Add special character requirement for password

frontend/src/app/account/_validators/weak-password.validator.ts

@@ -1,12 +1,13 @@
 import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
 
-const PASSWORD_REGEX = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})/;
+export const STRONG_PASSWORD_REGEX =
+    /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})(?=.*[!"#$%&'()*+,-.:;<=>?@\\/\\[\]^_`{|}~])/;
 
 export const PASSWORD_WEAK = 'passwordWeak';
 
 export function weakPasswordValidator(): ValidatorFn {
     return (control: AbstractControl): ValidationErrors | null => {
-        const weak = !PASSWORD_REGEX.test(control.value);
+        const weak = !STRONG_PASSWORD_REGEX.test(control.value);
         return weak ? { [PASSWORD_WEAK]: true } : null;
     };
 }

frontend/src/app/account/register.component.html

@@ -20,16 +20,22 @@ <h2 class="mt-0 align-self-start">Register</h2>
         </div>
         <div class="form-field">
             <label for="password">Password</label>
-            <p-password id="password" class="p-fluid" formControlName="password" [toggleMask]="true">
+            <p-password
+                id="password"
+                class="p-fluid"
+                formControlName="password"
+                [strongRegex]="strongPasswordRegex"
+                [toggleMask]="true">
                 <ng-template pTemplate="footer">
                     <p-divider />
-                    <p class="mt-1 text-sm">Required</p>
+                    <p class="mt-1 text-sm">Your password must contain:</p>
                     <ul class="pl-2 ml-2 mt-0 text-sm line-height-3">
                         <li>At least one lowercase</li>
                         <li>At least one uppercase</li>
                         <li>At least one numeric</li>
+                        <li>At least one special character (e.g. $!&#64;#)</li>
                         <li>Minimum 8 characters</li>
-                        <li>No spaces allowed</li>
+                        <li>No spaces</li>
                     </ul>
                 </ng-template>
             </p-password>

frontend/src/app/account/register.component.ts

@@ -8,7 +8,7 @@ import { ButtonModule } from 'primeng/button';
 import { DividerModule } from 'primeng/divider';
 import { ToastModule } from 'primeng/toast';
 import { MessageService } from 'primeng/api';
-import { PASSWORD_WEAK, weakPasswordValidator } from './_validators/weak-password.validator';
+import { PASSWORD_WEAK, STRONG_PASSWORD_REGEX, weakPasswordValidator } from './_validators/weak-password.validator';
 import { mismatchPasswordValidator, PASSWORD_MISMATCH } from './_validators/mismatch-password.validator';
 import { invalidUsernameValidator, USERNAME_INVALID } from './_validators/invalid-username.validator';
 import { invalidPasswordValidator, PASSWORD_INVALID } from './_validators/invalid-password.validator';
@@ -47,6 +47,8 @@ export class RegisterComponent {
     );
     isProcessingRegistration = false;
 
+    strongPasswordRegex = STRONG_PASSWORD_REGEX.source;
+
     get isUsernameInvalid(): boolean {
         const usernameControl = this.userForm.controls['username'];
         return usernameControl.dirty && usernameControl.hasError(USERNAME_INVALID);