feat: added small improvements

src/app/pages/landing-page/forgot-password/send-reset-password/send-reset-password.component.html

@@ -52,7 +52,7 @@ <h1 style="color: #3f51b5">Forgot your password?</h1>
             mat-button
             (click)="navigateToRegister()"
         >
-            Not registered? Sign Up
+            Not registered? Register
         </button>
     </div>
 </div>

src/app/pages/landing-page/landing-page.component.html

@@ -1,14 +1,12 @@
 <div class="login d-flex flex-column align-items-center justify-content-center">
-    <div align="center">
-        <mat-card class="card shadow-lg">
-            <router-outlet></router-outlet>
-            <div class="my-3">
-                <span class="error-text"
-                    >For any questions/concerns/password problems, please contact <b>[email protected]</b></span
-                >
-            </div>
-        </mat-card>
-    </div>
+    <mat-card class="card shadow-lg">
+        <router-outlet></router-outlet>
+        <div class="my-3 text-center">
+            <span class="error-text"
+                >For any questions/concerns/password problems, please contact <b>[email protected]</b></span
+            >
+        </div>
+    </mat-card>
 </div>
 
 <div class="vector" style="background: linear-gradient(145deg, #3f51b5, #3f51b5)"></div>

src/app/pages/landing-page/landing-page.component.scss

@@ -17,9 +17,9 @@
 }
 
 .card {
-    min-width: 350px;
-    border-radius: 10px;
-    width: 25vw;
+    min-width: 400px;
+    border-radius: 8px;
+    width: 30%;
 }
 
 .error-text {

src/app/pages/landing-page/login/login.component.html

@@ -38,7 +38,7 @@ <h1 style="color: #3f51b5">Welcome to the Sharplab</h1>
     </form>
     <div matRipple matRippleColor="#ffffff33">
         <button class="btn-block" style="color: #3f51b5" mat-button (click)="navigateToRegister()">
-            Not registered? Sign Up
+            Not registered? Register
         </button>
     </div>
 

src/app/pages/landing-page/not-found/not-found.component.html

@@ -1,10 +1,15 @@
 <div class="w-100 h-100 d-flex justify-content-center align-items-center">
     <div class="text-container">
         <mat-card>
-            <h1 style="color: black">There was a problem with your request.</h1>
-            <span style="color: black"
+            <h1 style="color: #3f51b5">There was a problem with your request.</h1>
+            <span style="color: #3f51b5"
                 >The data or web page you are looking for could not be found, or does not exist.</span
             >
+
+            <div class="button-container">
+                <button (click)="routeToLogin()" color="primary" mat-raised-button>Click here to login</button>
+                <button (click)="routeToRegister()" color="secondary" mat-raised-button>Click here to register</button>
+            </div>
         </mat-card>
     </div>
 </div>

src/app/pages/landing-page/not-found/not-found.component.scss

@@ -15,3 +15,9 @@
     display: flex;
     flex-direction: row;
 }
+
+.button-container {
+    display: flex;
+    justify-content: space-around;
+    margin: 10px 0;
+}

src/app/pages/landing-page/not-found/not-found.component.ts

@@ -1,15 +1,22 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { RouteNames } from 'src/app/models/enums';
 
 @Component({
-  selector: 'app-not-found',
-  templateUrl: './not-found.component.html',
-  styleUrls: ['./not-found.component.scss']
+    selector: 'app-not-found',
+    templateUrl: './not-found.component.html',
+    styleUrls: ['./not-found.component.scss'],
 })
 export class NotFoundComponent implements OnInit {
+    constructor(private router: Router) {}
 
-  constructor() { }
+    ngOnInit(): void {}
 
-  ngOnInit(): void {
-  }
+    routeToLogin(): void {
+        this.router.navigate([`${RouteNames.LANDINGPAGE_LOGIN_BASEROUTE}`]);
+    }
 
+    routeToRegister(): void {
+        this.router.navigate([`${RouteNames.LANDINGPAGE_REGISTER_BASEROUTE}`]);
+    }
 }

src/app/pages/landing-page/register/register.component.html

@@ -11,6 +11,18 @@ <h1 style="color: #3f51b5">Welcome to the sharplab</h1>
             <mat-error *ngIf="registerForm.get('email')?.hasError('required')">This is required</mat-error>
             <mat-error *ngIf="registerForm.get('email')?.hasError('email')">This must be a valid email</mat-error>
         </mat-form-field>
+        <mat-form-field class="py-1" floatLabel="always">
+            <mat-label>CONFIRM EMAIL</mat-label>
+            <mat-icon matSuffix>email</mat-icon>
+            <input
+                matInput
+                formControlName="confirmEmail"
+                placeholder="[email protected]"
+                type="email"
+                email
+                required
+            />
+        </mat-form-field>
         <mat-form-field class="py-1" floatLabel="always">
             <mat-label>PASSWORD</mat-label>
             <mat-icon matSuffix>vpn_key</mat-icon>
@@ -21,6 +33,7 @@ <h1 style="color: #3f51b5">Welcome to the sharplab</h1>
                 type="password"
                 matInput
                 placeholder="my-strong-password"
+                required
             />
             <mat-error *ngIf="registerForm.get('password')?.hasError('required')">This is required</mat-error>
         </mat-form-field>
@@ -33,9 +46,10 @@ <h1 style="color: #3f51b5">Welcome to the sharplab</h1>
                 type="password"
                 matInput
                 placeholder="my-strong-password"
+                required
             />
             <mat-error *ngIf="registerForm.get('confirmPassword').hasError('required')">This is required</mat-error>
-            <mat-error *ngIf="registerForm.hasError('passwordMatch')">Passwords must match</mat-error>
+            <mat-error *ngIf="registerForm.hasError('passwordMatchErr')">Passwords must match</mat-error>
         </mat-form-field>
         <div matRipple matRippleColor="#ffffff33" class="mt-3">
             <button

src/app/pages/landing-page/register/register.component.ts

@@ -9,22 +9,29 @@ import { LoaderService } from 'src/app/services/loader/loader.service';
 import { SnackbarService } from 'src/app/services/snackbar.service';
 import { UserService } from 'src/app/services/user.service';
 
-function passwordMatchingValidator(control: AbstractControl): ValidationErrors | null {
-    const password = control.get('password');
-    const confirmPassword = control.get('confirmPassword');
+function fieldsMatchingValidator(
+    firstFieldName: string,
+    secondFieldName: string,
+    validationKey: string,
+    validationErrMsg: string
+) {
+    return function (control: AbstractControl): ValidationErrors | null {
+        const password = control.get(firstFieldName);
+        const confirmPassword = control.get(secondFieldName);
 
-    if (!password || !password.value || !confirmPassword || !confirmPassword.value) return null;
+        if (!password || !password.value || !confirmPassword || !confirmPassword.value) return null;
 
-    if (password.value !== confirmPassword.value) {
-        const err = {
-            passwordMatch: 'Passwords do not match!',
-        };
+        if (password.value !== confirmPassword.value) {
+            const err = {
+                [validationKey]: validationErrMsg,
+            };
 
-        confirmPassword.setErrors(err);
-        return err;
-    } else {
-        return null;
-    }
+            confirmPassword.setErrors(err);
+            return err;
+        } else {
+            return null;
+        }
+    };
 }
 
 @Component({
@@ -49,10 +56,16 @@ export class RegisterComponent {
     registerForm = this.fb.group(
         {
             email: ['', Validators.compose([Validators.email, Validators.required])],
+            confirmEmail: ['', Validators.compose([Validators.email, Validators.required])],
             password: ['', Validators.required],
             confirmPassword: ['', Validators.required],
         },
-        { validators: passwordMatchingValidator }
+        {
+            validators: [
+                fieldsMatchingValidator('password', 'confirmPassword', 'passwordMatchErr', 'Passwords do not match!'),
+                fieldsMatchingValidator('email', 'confirmEmail', 'emailMatchErr', 'Emails do not match!'),
+            ],
+        }
     );
 
     onSubmit() {

src/app/pages/landing-page/study-background/study-background.component.html

@@ -11,7 +11,7 @@ <h2 style="color: #3f51b5" class="welcome-header">Welcome to the Sharplab</h2>
     <div style="padding: 2% 4%" *ngIf="!studyBackground">
         <h1 class="mat-h1" style="color: #3f51b5">This study currently has no info.</h1>
         <div style="color: #3f51b5">
-            You can still sign up for it by clicking the buttons below. <b>Register</b> if you have never done a study
+            You can still register for it by clicking the buttons below. <b>Register</b> if you have never done a study
             with us, or <b>sign in</b> if you have previously completed a study with us.
         </div>
     </div>

src/app/pages/tasks/questionnaire-reader/questionnaire-reader.component.html

@@ -88,7 +88,7 @@ <h2 *ngIf="question.title" class="title-text" [innerHTML]="question.title"></h2>
                                 ></app-slider>
                             </div>
                         </div>
-                        <div class="w-25 slider-error error-text" style="font-size: 75%">
+                        <div class="w-25 slider-error error-text" style="font-size: 1rem">
                             <span *ngIf="questionnaire.get(question.key)?.hasError('required')">
                                 This is required
                             </span>
@@ -109,6 +109,12 @@ <h2 *ngIf="question.title" class="title-text" [innerHTML]="question.title"></h2>
                     </div>
                 </div>
             </ng-container>
+            <div style="color: red; font-size: 1rem; padding: 10px 0" *ngIf="!questionnaire.valid">
+                <span
+                    >There are still invalid/unanswered questions above. Please review your responses above to make sure
+                    you have answered each of the questions.
+                </span>
+            </div>
             <button
                 (click)="onSubmit()"
                 class="w-25 mb-5"

src/app/pages/tasks/questionnaire-reader/questionnaire-reader.component.scss

@@ -1,4 +1,4 @@
-@import "../../../../app/sass/mixins";
+@import '../../../../app/sass/mixins';
 
 .questionnaire-container {
     padding: 2% 4%;
@@ -48,3 +48,7 @@
     display: flex;
     flex-direction: column;
 }
+
+.mat-error {
+    font-size: 1rem !important;
+}

src/styles.scss

@@ -1,14 +1,14 @@
-@import "~ng-zorro-antd/ng-zorro-antd.min.css";
-@import "~ng-zorro-antd/style/index.min.css";
-@import "./app/sass/mixins";
+@import '~ng-zorro-antd/ng-zorro-antd.min.css';
+@import '~ng-zorro-antd/style/index.min.css';
+@import './app/sass/mixins';
 
 html,
 body {
     height: 100%;
 }
 body {
     margin: 0;
-    font-family: Roboto, "Helvetica Neue", sans-serif;
+    font-family: Roboto, 'Helvetica Neue', sans-serif;
     background-color: white;
 }