Classes and Teacher Accounts

config.yaml

@@ -33,6 +33,9 @@ courses:
 
 accounts:
   enabled: false
+  teachers: false
+  parents: false
+  restricted: false
 
 tutor:
   enabled: true

docs/accounts.md

@@ -8,6 +8,11 @@ database. You can enable and configure this functionality using the `accounts` k
 accounts:
   emabled: true
 
+  # Whether teacher, parent and restricted accounts (for students aged <13) are supported.
+  teachers: boolean;
+  parents: boolean;
+  restricted: boolean;
+
   # Minimum age allowed for users
   minAge: 13
 

docs/example/config.yaml

@@ -45,6 +45,9 @@ social:
 
 accounts:
   enabled: true
+  teachers: true
+  parents: true
+  restricted: true
   minAge: 13
   privacyPolicy: https://mathigon.org/policies
   termsOfUse: https://mathigon.org/policies#terms

frontend/accounts.scss

@@ -10,6 +10,7 @@
 
 h1 { text-align: center; margin-bottom: 1.5em; }
 h1 x-icon { margin: 0 8px -14px; }
+h1 .subtitle { display: block; font-size: 60%; }
 
 .form-min-height { min-height: 360px; }
 .m-red { color: $red; }
@@ -47,3 +48,32 @@ x-password {
     &.on { opacity: 1; }
   }
 }
+
+.signup-tabs {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 50px;
+  button {
+    border: 2px solid $blue;
+    text-align: center;
+    padding: 6px 0;
+    font-weight: 600;
+    width: 100px;
+    color: $blue;
+    transition: color .2s, background .2s;
+    &:first-child { border-radius: 6px 0 0 6px; border-right: none; }
+    &:last-child { border-radius: 0 6px 6px 0;  border-left: none; }
+    &:hover { background: rgba($blue, 20%); }
+    &.active { background: $blue; color: white; cursor: default; }
+  }
+}
+
+.signup-box {
+  max-width: 580px;
+  min-height: 400px;
+  margin: 0 auto;
+  .btn-row { display: flex; flex-wrap: wrap; justify-content: center; margin: 8px 0 0; }
+  .btn { display: block; min-width: 120px; margin: 8px; }
+  .alternative { text-align: center; font-size: 16px; font-weight: 600; }
+  .alternative { a, .a { display: inline-block; margin: 12px 16px 0; } }
+}

frontend/accounts.ts

@@ -4,10 +4,14 @@
 // =============================================================================
 
 
-import {$, CustomElementView, FormView, InputView, observe, register, Router} from '@mathigon/boost';
+import {cache} from '@mathigon/core';
+import {$, Browser, CustomElementView, FormView, observe, register, Router} from '@mathigon/boost';
 import './main';
 
 
+const validate = cache((query: string) => fetch(`/validate?${query}`).then(r => r.text()));
+
+
 // -----------------------------------------------------------------------------
 // Password Component
 
@@ -91,16 +95,63 @@ Router.setup({
   }
 });
 
+Router.paths('/login', '/forgot', '/reset', '/reset/:token', '/profile');
+
+
+// -----------------------------------------------------------------------------
+// Signup Form
+
 Router.view('/signup', {
   enter($el) {
-    const $bday = $el.$('input[name="birthday"]') as InputView;
-    $bday.change((date) => {
-      const age = (Date.now() - (+new Date(date))) / (1000 * 60 * 60 * 24 * 365);
-      if (age < 0 || age > 100) return $bday.setValidity('Please enter a valid date of birth.');
-      if (age < 13) return $bday.setValidity('You have to be at least 13 years old to create an account.');
-      $bday.setValidity('');
+    const hash = Browser.getHash();
+    const year = 1000 * 60 * 60 * 24 * 365;
+
+    const model = observe({
+      step: 1,
+      next: () => (model.step = 2),
+      back: () => (model.step = 1),
+      changeType: () => (model.step = 1),
+
+      type: ['student', 'teacher', 'parent'].includes(hash) ? hash : 'student',
+      birthday: Browser.isIOS ? '2000-01-01' : '',  // Prefill on iOS to fix styling
+      classCode: '',
+      username: '',
+      email: '',
+      isRestricted: false,
+
+      birthdayError: false,
+      classCodeError: false,
+      emailError: '',
+      usernameError: ''
+    });
+
+    // Birthday validation
+    model.watch(({birthday}) => {
+      const age = (Date.now() - (+new Date(birthday))) / year;
+      model.birthdayError = age < 1 || age > 110;
+      model.isRestricted = (age < 13);
     });
+
+    // Class code validation
+    model.watch(async ({classCode}) => {
+      if (!classCode) return model.classCodeError = false;
+      let c = classCode.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 8);
+      if (c.length > 4) c = c.slice(0, 4) + '-' + c.slice(4, 8);
+      model.classCode = c;
+      model.classCodeError = c.length !== 9 || (await validate(`classcode=${c}`)) === 'invalid';
+    });
+
+    // Username validation
+    model.watch(async ({username}) => {
+      const u = model.username = username.toLowerCase().replace(/[^a-z0-9]/g, '');
+      model.usernameError = u.length < 4 ? 'short' : await validate(`username=${u}`);
+    });
+
+    // Email validation
+    model.watch(async ({email}) => {
+      model.emailError = await validate(`email=${email}`);
+    });
+
+    $el.bindModel(model);
   }
 });
-
-Router.paths('/login', '/forgot', '/reset', '/reset/:token', '/profile');

frontend/dashboard.scss

@@ -19,7 +19,6 @@ h1 .avatar {
 }
 h1 .subtitle { display: block; font-size: 60%; }
 
-
 .dashboard-body { width: 640px; max-width: calc(100% - 48px); }
 .overflow-wrap { margin: -32px -24px; padding: 32px 24px; min-height: 240px; @include overflow-scroll; }
 h2:first-child { margin-top: 0; }
@@ -90,3 +89,157 @@ form + p.caption { margin-top: 16px; }
   margin: 0 6px 20px;
   x-icon { margin: 8px; }
 }
+
+
+// -----------------------------------------------------------------------------
+// Teacher Dashboards
+
+.class-panel {
+  width: 240px;
+  height: 150px;
+  border-radius: 8px;
+  padding: 16px 18px;
+  transition: transform .2s;
+  background: mix($blue, white, 20%);
+  h3 { font-size: 24px; margin-bottom: 4px; }
+  p { font-size: 16px; opacity: 0.7; margin: 0; }
+  &:hover, &:focus { transform: scale(1.05); }
+}
+
+.new-class {
+  background: $grey-background;
+  text-align: center;
+  font-weight: 600;
+  font-size: 24px;
+  color: rgba(black, 30%);
+  x-icon { display: block; margin: 0 auto; fill: rgba(black, 20%); }
+}
+
+a.back {
+  display: block;
+  font-size: 22px;
+  margin: 80px 0 -72px -8px;
+  width: fit-content;
+  padding: 0 16px 0 8px;
+  border-radius: 20px;
+  color: $medium-grey;
+  transition: background .2s, color .2s;
+  &:hover, &:focus { background: rgba($medium-grey, 30%); }
+  x-icon { display: inline-block; margin: 0 4px -4px 0; }
+}
+
+.edit-class {
+  padding: 8px;
+  margin: 0 0 0 10px;
+  cursor: pointer;
+  color: $medium-grey;
+  transition: color .2s;
+  x-icon { margin: 0; display: block; }
+  &:hover, &:focus { color: $grey; }
+}
+
+.class-banner {
+  float: right;
+  margin-top: 40px;
+  text-align: center;
+  background: mix($blue, white, 20%);
+  border-radius: 6px;
+  line-height: 1.3;
+  padding: 8px 12px;
+  strong { display: block; font-size: 24px; }
+}
+
+.class-row {
+  display: flex;
+  align-items: center;
+  padding-bottom: 8px;
+  margin: 0 20px 8px;
+  border-bottom: 1px solid #aaa;
+  @include ellipsis;
+
+  img { border-radius: 100%; margin-right: 10px; }
+  h3 { margin: 0; font-size: 16px; font-weight: 400; }
+
+  button { opacity: 0; cursor: pointer; transition: opacity .2s; padding: 6px 0 6px 6px; }
+  &:hover button { opacity: 0.3; }
+  button:hover, button:focus { opacity: 0.6; }
+  button x-icon { display: block; }
+}
+
+
+// -----------------------------------------------------------------------------
+// Roster
+
+#roster {
+  $highlight: mix(white, $light-grey);
+  $highlight-dark: mix($dark-mode, white, 75%);
+
+  font-size: 16px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 110px;
+  min-width: 640px;
+
+  .cell {
+    border-bottom: 1px solid mix($medium-grey, white);
+    transition: color .2s, background .2s, border .2s;
+    line-height: 32px;
+    padding: 4px 6px;
+    @include ellipsis;
+    &.c1 { border-right: 2px solid $medium-grey; }
+    &.c2 { padding-left: 12px; }
+    &.c3 { padding-right: 12px; border-right: 2px solid $medium-grey; }
+    &.c4 { text-align: center; }
+    &.title { font-weight: 600; border-bottom: 2px solid $medium-grey; }
+    &.title.c2 { padding-right: 20px; }
+    &.interactive { cursor: pointer; }
+    &.interactive:hover, &.interactive:focus { @include theme(background, $highlight, $highlight-dark); }
+  }
+
+  .avatar, .course-img {
+    display: block;
+    float: left;
+    margin-right: 10px;
+    width: 32px;
+    height: 32px;
+    background: $grey;
+  }
+  .avatar { border-radius: 100%; }
+  .course-img { border-radius: 3px; background-size: cover; background-position: center; }
+
+  .popup-body {
+    position: absolute;
+    z-index: 2;
+    @include theme(background, white, mix($dark-mode, white, 90%));
+    max-height: 240px;
+    left: -3px;
+    right: -3px;
+    top: -9px;
+    border-radius: 8px;
+    padding: 5px;
+    box-shadow: 2px 6px 28px rgba(black, 40%);
+    transition: max-height .3s;
+    @include overflow-scroll;
+  }
+
+  .popup-row {
+    padding: 5px 7px;
+    cursor: pointer;
+    border-radius: 4px;
+    margin: 3px;
+    line-height: 32px;
+    font-weight: 600;
+    @include ellipsis;
+    &.active, &:not(.locked):hover { @include theme(background, $highlight, $highlight-dark); }
+    &.locked { cursor: default; color: $text-light; padding: 2px 7px; }
+  }
+
+  .popup.section { top: -6px; left: -9px; }
+  .popup.section .popup-row { padding: 2px 7px 6px; }
+
+  .progress { height: 20px; @include theme(background, rgba(black, 8%), rgba(white, 8%)); border-radius: 10px; margin-top: 6px; overflow: hidden; }
+  .progress .bar { background: currentColor; height: 100%; border-radius: 0 10px 10px 0; transition: width .2s; }
+  .popup-row .progress { height: 3px; margin-top: -3px; }
+
+  .arrow { position: absolute; left: -18px; top: 5px; fill: none;
+    stroke: $medium-grey; stroke-width: 2px; stroke-linecap: round; }
+}