form and badges

Date:      Fri May 20 08:22:27 2022 +0100

functions/views/badges.pug

@@ -1,7 +1,7 @@
 extends _layout
 
 block content
-  h1 Badges
+  include ../build/badges.html
 
   .toggle
     for l in user.sidebarLevels

functions/views/signup.pug

@@ -4,65 +4,95 @@ block content
 
   h1 Create New Account
 
-  form(v-on:submit="user.signup"  v-bind:class="{loading: user.signupForm.loading}")
+  form(v-on:submit="user.signup"  v-bind:class="{loading: user.signupForm.loading}" class="signup-form")
 
     .toggle
-      a(v-on:click="user.signupForm.isTeacher = false" v-bind:class="{active: !user.signupForm.isTeacher}") Student
-      a(v-on:click="user.signupForm.isTeacher = true" v-bind:class="{active: user.signupForm.isTeacher}") Teacher
+      a(v-on:click="user.signupForm.type = 'student'" v-bind:class="{active: user.signupForm.type === 'student'}") Student
+      a(v-on:click="user.signupForm.type = 'teacher'" v-bind:class="{active: user.signupForm.type === 'teacher'}") Teacher
+      a(v-on:click="user.signupForm.type = 'parent'" v-bind:class="{active: user.signupForm.type === 'parent'}") Parent
 
     .error(v-show="user.signupForm.error" style="margin-top: .5em") {{user.signupForm.error}}
 
     label
-      | First Name
+      span(v-if="user.signupForm.type !== 'parent'") First Name
+      span(v-if="user.signupForm.type === 'parent'") Your child's first name
       input(type="text" required v-model="user.signupForm.first" autocomplete="given-name")
 
     label
-      | Surname
+      span(v-if="user.signupForm.type !== 'parent'") Surname
+      span(v-if="user.signupForm.type === 'parent'") Your child's surname
       input(type="text" required v-model="user.signupForm.last" autocomplete="family-name")
 
     label
-      | Email
+      span Email
+      br
+      div(class="info" v-if="user.signupForm.type === 'student'") (We sometimes find that our emails are blocked by school firewalls and therefore suggest that you do not use a school email address if possible.)
+      div(class="info" v-if="user.signupForm.type === 'parent'") (Used to log in)
       input(type="email" required v-model="user.signupForm.email" autocomplete="email")
 
+    label(v-if="user.signupForm.type !== 'teacher'")
+      span(v-if="user.signupForm.type === 'student'") Is your own email or a parent's email?
+      span(v-if="user.signupForm.type === 'parent'") Is this your child's own email or a parent's email?
+      div(style="text-align: center")
+        input(type='radio' v-model="user.signupForm.primaryEmailType" value='student')#is-student-email-student
+        label(class="radio-label" for="is-student-email-student") Child's
+        input(type='radio' v-model="user.signupForm.primaryEmailType" value='parent')#is-student-email-parent
+        label(class="radio-label" for="is-student-email-parent") Parent's
+
+    //- label(v-if="user.signupForm.type !== 'teacher' && user.signupForm.primaryEmailType === 'student' && user.signupForm.birthYear < 2009")
+    //-   span Parent's Email
+    //-   br
+    //-   div(class="info" v-if="user.signupForm.type === 'student'") (NEED STUDENT TEXT)
+    //-   div(class="info" v-if="user.signupForm.type === 'parent'") (NEED PARENT TEXT)
+    //-   input(type="email" required v-model="user.signupForm.guardianEmail" autocomplete="email")
+
     label
-      | Password (min 6 characters)
+      span Password
+      div(class="info") (min 6 characters)
       input(type="password" required pattern=".{6,}" v-model="user.signupForm.password" autocomplete="password")
 
-    label(v-if="!user.signupForm.isTeacher")
-      | Teacher code (if you are participating as part of a school)
+    label(v-if="user.signupForm.type !== 'teacher'")
+      span Teacher code 
+      div(class="info") (if you are participating as part of a school)
       input(type="text" v-model="user.signupForm.teacherCode")
 
-    label(v-if="!user.signupForm.isTeacher")
-      | Year
+    label(v-if="user.signupForm.type !== 'teacher'")
+      span(v-if="user.signupForm.type === 'student'") Year
+      span(v-if="user.signupForm.type === 'parent'") Your child's year group
       select(v-model="user.signupForm.level")
         option(value="year7") Year 7 (age 12 or below)
         option(value="year8") Year 8 (age 12–13)
         option(value="year9") Year 9 (age 13–14)
         option(value="year10") Year 10 (age 14–15)
         option(value="year11") Year 11 (age 15 or above)
 
-    label(v-if="!user.signupForm.isTeacher && !user.signupForm.teacherCode")
-      | Year of Birth
+    label(v-if="user.signupForm.type !== 'teacher' && !user.signupForm.teacherCode")
+      span(v-if="user.signupForm.type === 'student'") Year of Birth
+      span(v-if="user.signupForm.type === 'parent'") Your child's year of birth
       select(v-model="user.signupForm.birthYear")
         - var year = 1920;
         while year < 2016
           option= year++
 
-    label(v-if="user.signupForm.isTeacher")
-      | School Name
+    label(v-if="user.signupForm.type === 'teacher'")
+      span School Name
       input(type="text" v-model="user.signupForm.schoolName" required)
 
-    label(v-if="user.signupForm.isTeacher")
-      | School Post Code
+    label(v-if="user.signupForm.type === 'teacher'")
+      span School Post Code
       input(type="text" v-model="user.signupForm.postCode" required)
 
-    label(v-if="user.signupForm.isTeacher")
-      | School Phone Number
+    label(v-if="user.signupForm.type === 'teacher'")
+      span School Phone Number
       input(type="text" v-model="user.signupForm.phoneNumber" required)
 
     //- TODO Calculate the age dynamically
-    label(v-if="!user.signupForm.isTeacher && !user.signupForm.teacherCode && user.signupForm.birthYear >= 2009")
-      | Email of a parent or guardian#[br]#[em This is required because you are not yet 13 years old.]
+    label(v-if="user.signupForm.type !== 'teacher' && !user.signupForm.teacherCode && user.signupForm.birthYear >= 2009 && user.signupForm.primaryEmailType !== 'parent'")
+      span Email of a parent or guardian
+      div(class="info" v-if="user.signupForm.type === 'student'") This is required because you are not yet 13 years old.
+      div(class="info" v-if="user.signupForm.type === 'parent'") This is required because your child is not yet 13 years old.
+
+
       input(type="email" v-model="user.signupForm.guardianEmail" required)
 
     p.checkbox

pages/badges.md

@@ -0,0 +1,9 @@
+# Badges
+
+In the Parallel Universe, you can earn awards by collecting points.
+
+This page shows the points you have earned by completing Parallelograms. You earn 1 point for every percentage point you score in every Parallelogram. Points turn into badges. 
+
+At the end of the academic year, you will be awarded a certificate based on the points you have scored.
+
+You can also earn points and awards by attending our live Parallel Circles. 

static/scripts/user.js

@@ -88,7 +88,7 @@ export default function() {
   const editForm = {loading: false, error: '', teacherCodes: []};
   const passwordForm = {loading: false, error: ''};
   const signupForm = {error: null, loading: false, level: 'year7',
-    birthYear: 2000, isTeacher: location.hash === '#teacher'};
+    birthYear: 2000, type: location.hash === '#teacher' ? 'teacher' : location.hash === '#parent' ? 'parent' : 'student', primaryEmailType: null};
 
   if (window.USER_DATA) {
     for (let key of ['first', 'last', 'schoolName', 'postCode', 'phoneNumber', 'level']) {
@@ -209,7 +209,7 @@ export default function() {
       signupForm.loading = true;
       signupForm.error = null;
 
-      if (signupForm.isTeacher) {
+      if (signupForm.type === 'teacher') {
         if (!signupForm.schoolName) {
           signupForm.loading = false;
           return signupForm.error = 'Please provide a valid school name.';
@@ -236,7 +236,7 @@ export default function() {
       }
 
       // Redirect after login
-      nextUrl = signupForm.isTeacher ? '/dashboard' : '/introduction';
+      nextUrl = signupForm.type === 'teacher' ? '/dashboard' : '/introduction';
 
       // user has come from parallel live, send them back
       if(window.location.href.includes('#live') || window.location.href.includes('?live') || window.location.href.includes('#circles') || window.location.href.includes('?circles')) {
@@ -246,22 +246,25 @@ export default function() {
       // Ensure that there are no existing cookies
       document.cookie = '__session=;max-age=-999';
 
+      const signupData = {
+        first: signupForm.first || null,
+        last: signupForm.last || null,
+        teacherCode: signupForm.teacherCode ? [signupForm.teacherCode] : null,
+        code: signupForm.code || null,
+        level: signupForm.level || null,
+        birthYear: signupForm.birthYear || null,
+        schoolName: signupForm.schoolName || null,
+        phoneNumber: signupForm.phoneNumber || null,
+        postCode: signupForm.postCode || null,
+        guardianEmail: signupForm.guardianEmail || null,
+        acceptedTerms: true,
+        userReference: generateUserReference(),
+        primaryEmailType: signupForm.type === 'teacher' ? 'teacher' : signupForm.primaryEmailType
+      }
+
       userPromise = fbAuth.createUserWithEmailAndPassword(signupForm.email, signupForm.password)
           .then(({user}) => {
-            return fbDatabase.collection('users').doc(user.uid).set({
-              first: signupForm.first || null,
-              last: signupForm.last || null,
-              teacherCode: signupForm.teacherCode ? [signupForm.teacherCode] : null,
-              code: signupForm.code || null,
-              level: signupForm.level || null,
-              birthYear: signupForm.birthYear || null,
-              schoolName: signupForm.schoolName || null,
-              phoneNumber: signupForm.phoneNumber || null,
-              postCode: signupForm.postCode || null,
-              guardianEmail: signupForm.guardianEmail || null,
-              acceptedTerms: true,
-              userReference: generateUserReference()
-            });
+            return fbDatabase.collection('users').doc(user.uid).set(signupData);
           })
           .catch(error => {
             console.error(error);

static/styles/forms.less

@@ -2,7 +2,21 @@
 // Parallel Forms
 // =============================================================================
 
-
+.signup-form {
+  span {
+    font-size: 16px;
+    margin-right: 4px;
+  }
+  .info {
+    display: inline-block;
+  }
+  .radio-label {
+    display: inline-block;
+    font-size: 16px;
+    padding: 6px;
+    margin: 0;
+  }
+}
 
 form {
   line-height: 1.5;