From aba1143166a97c8fa2cb1b897eee5e4f6a5ed651 Mon Sep 17 00:00:00 2001 From: Drew McMillan Date: Fri, 20 May 2022 08:19:19 +0100 Subject: [PATCH] form and badges Date: Fri May 20 08:22:27 2022 +0100 --- functions/views/badges.pug | 2 +- functions/views/signup.pug | 72 +++++++++++++++++++++++++++----------- pages/badges.md | 9 +++++ static/scripts/user.js | 37 +++++++++++--------- static/styles/forms.less | 16 ++++++++- 5 files changed, 96 insertions(+), 40 deletions(-) create mode 100644 pages/badges.md diff --git a/functions/views/badges.pug b/functions/views/badges.pug index 1cb25721..dc9e2057 100644 --- a/functions/views/badges.pug +++ b/functions/views/badges.pug @@ -1,7 +1,7 @@ extends _layout block content - h1 Badges + include ../build/badges.html .toggle for l in user.sidebarLevels diff --git a/functions/views/signup.pug b/functions/views/signup.pug index 3bd620c4..5661f995 100644 --- a/functions/views/signup.pug +++ b/functions/views/signup.pug @@ -4,36 +4,61 @@ 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) @@ -41,28 +66,33 @@ block content 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 diff --git a/pages/badges.md b/pages/badges.md new file mode 100644 index 00000000..2f8fa758 --- /dev/null +++ b/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. diff --git a/static/scripts/user.js b/static/scripts/user.js index b32c1c20..d2140659 100755 --- a/static/scripts/user.js +++ b/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); diff --git a/static/styles/forms.less b/static/styles/forms.less index c7eb2873..1423807e 100644 --- a/static/styles/forms.less +++ b/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;