/lab-monitoring

Single-page application frontend for the UE CCSS Lab Monitoring System, generated using Quasar CLI

Primary LanguageVue

lab-monitoring

process


Screenshots

Index Page

process

Authentication Page

process

Dashboard

process

My Courses

process

Monitor Lab

process

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

Vue JS 3

Quasar v2

JavaScript ES6

Material Icons