lab-monitoring

Screenshots

Index Page

Authentication Page

Dashboard

My Courses

Monitor Lab

Auth0

1. Create a Vue Login App via Auth0 website to manage logins of the frontend
2. Follow quickstart instructions for configuring your Auth0 App
3. Get domain and client_id of your Auth0 app and store to .env (see .env.example inside the frontend directory)
4. Go to Dashboard > User Management > Roles and create the following roles:
   • Teacher - Supervises activities during a laboratory session
   • Student - Interacts with laboratory materials for learning purposes
5. Go to Dashboard > Auth Pipeline > Rules, and create the rule:
   • Access Control > Whitelist - this is where the admin (auth0 app creator) will add teacher emails to enable access to the lab-monitoring app.

Config

1. Rules

   1. Add access control

      • Check if user email domain matches configured domain (@ue.edu.ph)
      • Set roles to a user

   2. Enrich profile

      • Add user roles from a SQL Server database

      • Default picture for null avatars

      • Enrich profile with the locations where the user logs in

   3. Webhook

      • Track Logins in MixPanel or Track Logins and signups with Splunk HEC

• ? admin adds instructor emails to whitelist
• ? instructor adds student emails to whitelist

Frontend

Install dependencies

npm install

Start the app in development mode (hot-code reloading, error reporting, etc.)

quasar dev

Lint with ESLint

npm run lint

Format the files

npm run format

Build the app for production

quasar build

Customize the configuration, see Configuring quasar.config.js.

In Production

Google-oauth2

1. Configure keys: replace Auth0 development key with own key via App Dashboard > Social

Resources

Auth0

• User Profile Structure

Vue JS 3

• Quickstart
• Hands-on tutorial
• Examples
• Vue Router
• [Article] Vue Lifecycle Hooks
• Vue Awesome
• History Modes, e.g.: http://localhost:9000/#/dashboard

Quasar v2

• Configuring Quasar App
• Quasar App Flow
• Boot Files
• Quasar Awesome

JavaScript ES6

• Pretty print

Material Icons

• https://fonts.google.com/icons?selected=Material+Icons