Fix/1032 bug (#645)

* fix(password): updated password hint * fix(password): updated password styles

Author: nsemets

src/app/features/auth/pages/reset-password/reset-password.component.html

@@ -14,7 +14,7 @@ <h2 class="text-center">{{ 'auth.resetPassword.title' | translate }}</h2>
  autocomplete="new-password"
  ></p-password>
 
- <osf-password-input-hint [isError]="isNewPasswordError" />
+ <osf-password-input-hint [control]="resetPasswordForm.controls['newPassword']" />
  </div>
 
  <div class="flex flex-column">

src/app/features/auth/pages/reset-password/reset-password.component.ts

@@ -30,18 +30,17 @@ export class ResetPasswordComponent {
 
  resetPasswordForm: ResetPasswordFormGroupType = this.fb.group(
  {
- newPassword: ['', [CustomValidators.requiredTrimmed(), Validators.pattern(this.passwordRegex)]],
+ newPassword: [
+ '',
+ [CustomValidators.requiredTrimmed(), Validators.minLength(8), Validators.pattern(this.passwordRegex)],
+ ],
  confirmNewPassword: ['', CustomValidators.requiredTrimmed()],
  },
  {
  validators: CustomValidators.passwordMatchValidator('newPassword', 'confirmNewPassword'),
  }
  );
 
- get isNewPasswordError() {
- return this.resetPasswordForm.get('newPassword')?.errors && this.resetPasswordForm.get('newPassword')?.touched;
- }
-
  get isMismatchError(): boolean {
  return (
  this.resetPasswordForm.get('confirmNewPassword')?.dirty &&

src/app/features/auth/pages/sign-up/sign-up.component.html

@@ -89,7 +89,7 @@ <h2 class="text-center">{{ 'auth.signUp.title' | translate }}</h2>
  autocomplete="new-password"
  styleClass="w-full"
  ></p-password>
- <osf-password-input-hint [isError]="isPasswordError" />
+ <osf-password-input-hint [control]="signUpForm.controls['password']" />
  </div>
 
  <div class="flex mt-1">

src/app/features/auth/pages/sign-up/sign-up.component.ts

@@ -47,16 +47,11 @@ export class SignUpComponent implements OnInit {
  private readonly environment = inject(ENVIRONMENT);
 
  signUpForm = new FormGroup<SignUpForm>({} as SignUpForm);
- passwordRegex: RegExp = PASSWORD_REGEX;
  inputLimits = InputLimits;
  isFormSubmitted = signal(false);
 
  readonly siteKey = this.environment.recaptchaSiteKey;
 
- get isPasswordError() {
- return this.signUpForm.controls['password'].errors && this.signUpForm.get('password')?.touched;
- }
-
  ngOnInit(): void {
  this.initializeForm();
  }
@@ -76,7 +71,7 @@ export class SignUpComponent implements OnInit {
  }),
  password: new FormControl('', {
  nonNullable: true,
- validators: [CustomValidators.requiredTrimmed(), Validators.pattern(this.passwordRegex)],
+ validators: [CustomValidators.requiredTrimmed(), Validators.minLength(8), Validators.pattern(PASSWORD_REGEX)],
  }),
  acceptedTermsOfService: new FormControl(false, {
  nonNullable: true,

src/app/features/settings/account-settings/components/change-password/change-password.component.html

@@ -47,30 +47,6 @@ <h2>{{ 'settings.accountSettings.changePassword.title' | translate }}</h2>
  "
  />
 
- @if (
- FormValidationHelper.hasError(getFormControl(AccountSettingsPasswordFormControls.NewPassword), 'required')
- ) {
- <small class="text-red-500 mt-1">
- {{ 'settings.accountSettings.changePassword.validation.newPasswordRequired' | translate }}
- </small>
- }
-
- @if (
- FormValidationHelper.hasError(getFormControl(AccountSettingsPasswordFormControls.NewPassword), 'minlength')
- ) {
- <small class="text-red-500 mt-1">
- {{ 'settings.accountSettings.changePassword.validation.newPasswordMinLength' | translate }}
- </small>
- }
-
- @if (
- FormValidationHelper.hasError(getFormControl(AccountSettingsPasswordFormControls.NewPassword), 'pattern')
- ) {
- <small class="text-red-500 mt-1">
- {{ 'settings.accountSettings.changePassword.validation.newPasswordPattern' | translate }}
- </small>
- }
-
  @if (
  getFormErrors()['sameAsOldPassword'] &&
  FormValidationHelper.isFieldTouched(getFormControl(AccountSettingsPasswordFormControls.NewPassword))
@@ -80,9 +56,7 @@ <h2>{{ 'settings.accountSettings.changePassword.title' | translate }}</h2>
  </small>
  }
 
- <small class="password-help mt-1">
- {{ 'settings.accountSettings.changePassword.form.passwordRequirements' | translate }}
- </small>
+ <osf-password-input-hint [control]="getFormControl(AccountSettingsPasswordFormControls.NewPassword)" />
  </div>
 
  <div class="flex flex-column flex-1">

src/app/features/settings/account-settings/components/change-password/change-password.component.scss

@@ -1,5 +0,0 @@
-.password-help {
- color: var(--pr-blue-1);
- font-size: 0.75rem;
- font-weight: 600;
-}

src/app/features/settings/account-settings/components/change-password/change-password.component.ts

@@ -20,15 +20,16 @@ import {
 } from '@angular/forms';
 
 import { AuthService } from '@osf/core/services';
-import { CustomValidators, FormValidationHelper } from '@osf/shared/helpers';
+import { PasswordInputHintComponent } from '@osf/shared/components';
+import { CustomValidators, FormValidationHelper, PASSWORD_REGEX } from '@osf/shared/helpers';
 import { LoaderService, ToastService } from '@osf/shared/services';
 
 import { AccountSettingsPasswordForm, AccountSettingsPasswordFormControls } from '../../models';
 import { UpdatePassword } from '../../store';
 
 @Component({
  selector: 'osf-change-password',
- imports: [Card, ReactiveFormsModule, Password, CommonModule, Button, TranslatePipe],
+ imports: [Card, ReactiveFormsModule, Password, CommonModule, Button, TranslatePipe, PasswordInputHintComponent],
  templateUrl: './change-password.component.html',
  styleUrl: './change-password.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
@@ -47,11 +48,7 @@ export class ChangePasswordComponent implements OnInit {
  }),
  [AccountSettingsPasswordFormControls.NewPassword]: new FormControl('', {
  nonNullable: true,
- validators: [
- CustomValidators.requiredTrimmed(),
- Validators.minLength(8),
- Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[\d!@#$%^&*])[A-Za-z\d!@#$%^&*_]{8,}$/),
- ],
+ validators: [CustomValidators.requiredTrimmed(), Validators.minLength(8), Validators.pattern(PASSWORD_REGEX)],
  }),
  [AccountSettingsPasswordFormControls.ConfirmPassword]: new FormControl('', {
  nonNullable: true,

src/app/shared/components/password-input-hint/password-input-hint.component.html

@@ -1,3 +1,19 @@
-<small [class]="isError() ? 'text-danger' : ''">
- {{ 'auth.common.password.requirements' | translate }}
-</small>
+@if (validationError) {
+ <small class="text-danger font-semibold mt-1">
+ @switch (validationError) {
+ @case ('required') {
+ {{ 'auth.common.password.validation.required' | translate }}
+ }
+ @case ('minlength') {
+ {{ 'auth.common.password.validation.minlength' | translate }}
+ }
+ @case ('pattern') {
+ {{ 'auth.common.password.validation.pattern' | translate }}
+ }
+ }
+ </small>
+} @else {
+ <small class="hint-text font-semibold mt-1">
+ {{ 'auth.common.password.requirements' | translate }}
+ </small>
+}

src/app/shared/components/password-input-hint/password-input-hint.component.scss

@@ -1,9 +1,7 @@
-:host {
- color: var(--primary-blue-1);
- font-weight: 600;
- font-size: 0.85rem;
+.text-danger {
+ color: var(--red-1);
+}
 
- .text-danger {
- color: var(--red-1);
- }
+.hint-text {
+ color: var(--pr-blue-1);
 }

src/app/shared/components/password-input-hint/password-input-hint.component.ts

@@ -1,16 +1,26 @@
 import { TranslatePipe } from '@ngx-translate/core';
 
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-
-import { BooleanOrNullOrUndefined } from '@osf/shared/helpers';
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
 
 @Component({
  selector: 'osf-password-input-hint',
- imports: [TranslatePipe],
+ imports: [TranslatePipe, CommonModule],
  templateUrl: './password-input-hint.component.html',
  styleUrl: './password-input-hint.component.scss',
- changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PasswordInputHintComponent {
- isError = input<BooleanOrNullOrUndefined>(false);
+ control = input<AbstractControl | null>(null);
+
+ get validationError(): string | null {
+ const ctrl = this.control();
+ if (!ctrl || !ctrl.errors || !ctrl.touched) return null;
+
+ if (ctrl.errors['required']) return 'required';
+ if (ctrl.errors['minlength']) return 'minlength';
+ if (ctrl.errors['pattern']) return 'pattern';
+
+ return null;
+ }
 }