From 666463f35aab5f21fdb5062b7cccc7f1ee39a6de Mon Sep 17 00:00:00 2001
From: florimondmanca <florimond.manca@gmail.com>
Date: Thu, 20 Sep 2018 10:46:53 +0200
Subject: [PATCH] add confirmation checkboxes to student signup form
---
.../shared/form-page/form-page.component.scss | 2 +-
src/app/signup/signup.module.ts | 2 ++
.../student-signup.component.html | 36 +++++++++++++++++++
.../student-signup.component.scss | 4 +++
.../student-signup.component.ts | 2 ++
5 files changed, 45 insertions(+), 1 deletion(-)
diff --git a/src/app/shared/form-page/form-page.component.scss b/src/app/shared/form-page/form-page.component.scss
index 9b87fb5..c341cff 100644
--- a/src/app/shared/form-page/form-page.component.scss
+++ b/src/app/shared/form-page/form-page.component.scss
@@ -13,7 +13,7 @@
.well {
width: 100%;
- max-width: 30em;
+ max-width: 40em;
background: white;
border: 1px solid lightgray;
border-radius: 8px;
diff --git a/src/app/signup/signup.module.ts b/src/app/signup/signup.module.ts
index 3a9f406..62fc57b 100644
--- a/src/app/signup/signup.module.ts
+++ b/src/app/signup/signup.module.ts
@@ -9,6 +9,7 @@ import {
MatInputModule,
MatButtonModule,
MatSnackBarModule,
+ MatCheckboxModule,
} from '@angular/material';
import { SharedModule } from 'app/shared';
@@ -31,6 +32,7 @@ import { StudentSignupComponent } from './student-signup/student-signup.componen
MatInputModule,
MatButtonModule,
MatSnackBarModule,
+ MatCheckboxModule,
],
})
export class SignupModule { }
diff --git a/src/app/signup/student-signup/student-signup.component.html b/src/app/signup/student-signup/student-signup.component.html
index a62a8c6..93f86c4 100644
--- a/src/app/signup/student-signup/student-signup.component.html
+++ b/src/app/signup/student-signup/student-signup.component.html
@@ -3,6 +3,10 @@
<h1>Inscription</h1>
+ <p>
+ Bienvenue ! Procédons à ton inscription sur l'espace lycéens.
+ </p>
+
<!-- First name -->
<mat-form-field class="full-width">
<input matInput type="text" formControlName="firstName" placeholder="Prénom" required>
@@ -28,6 +32,38 @@
</mat-hint>
</mat-form-field>
+ <!-- TODO: add link to Google Form -->
+ <p>
+ Pour assurer ton inscription au tutorat, il est
+ <strong>obligatoire</strong>
+ de remplir le
+ <a href="" rel="noreferrer" target="_blank">
+ formulaire d'inscription administrative
+ </a>
+ (Google Form).
+ </p>
+
+ <mat-checkbox class="checkbox-field" formControlName="filledForm" required>
+ J'ai rempli le formulaire
+ </mat-checkbox>
+
+ <p>
+ <small>
+ Données personnelles : nous utiliserons les données fournies pour assurer le contact avec toi et ta famille, équilibrer les participations aux activités organisées ainsi qu'à des fins d'aggrégation anonymisée (statistiques, demandes de subvention). Plus d'informations dans nos <a routerLink="/mention-legales">mentions légales</a>.
+ </small>
+ </p>
+
+ <p>
+ J'accepte qu'OSER utilise mes données personnelles fournies ci-dessus ou dans le formulaire d'inscription adminsitrative, dans le strict respect du cadre spécifié ci-dessus :
+ </p>
+ <mat-checkbox class="checkbox-field" formControlName="acceptedConditions" required>
+ J'accepte cette utilisation
+ </mat-checkbox>
+
+ <p>
+ Il ne te reste plus qu'à choisir un mot de passe. :-)
+ </p>
+
<!-- Password -->
<mat-form-field class="full-width">
<input matInput type="password" formControlName="password" placeholder="Mot de passe" required>
diff --git a/src/app/signup/student-signup/student-signup.component.scss b/src/app/signup/student-signup/student-signup.component.scss
index e69de29..3a616f6 100644
--- a/src/app/signup/student-signup/student-signup.component.scss
+++ b/src/app/signup/student-signup/student-signup.component.scss
@@ -0,0 +1,4 @@
+.checkbox-field {
+ display: block;
+ margin: .5em 0;
+}
diff --git a/src/app/signup/student-signup/student-signup.component.ts b/src/app/signup/student-signup/student-signup.component.ts
index a1e0cd0..d05cfb6 100644
--- a/src/app/signup/student-signup/student-signup.component.ts
+++ b/src/app/signup/student-signup/student-signup.component.ts
@@ -40,6 +40,8 @@ export class StudentSignupComponent implements OnInit {
phoneNumber: '',
password: '',
passwordConfirm: '',
+ filledForm: false,
+ acceptedConditions: false,
}, { validator: (group) => this.checkPasswords(group)})
}
--
GitLab