From 7ad608477f003856de2a0bd4f3e437145b06d9d4 Mon Sep 17 00:00:00 2001 From: jabali2004 <32802935+jabali2004@users.noreply.github.com> Date: Fri, 5 Aug 2022 13:55:25 +0200 Subject: [PATCH] chore: update base profile component --- .../login-base/login-base.component.ts | 4 +- .../profile-base/profile-base.component.ts | 205 +++++---------- .../register-base/register-base.component.ts | 4 +- .../request-password-base.component.ts | 4 +- .../reset-password-base.component.ts | 4 +- .../default-profile.component.html | 240 ++++-------------- .../default-profile.component.scss | 25 -- .../src/lib/interceptors/auth.interceptor.ts | 4 +- .../src/lib/services/auth/auth.service.ts | 7 +- .../lib/types/requests/ReqPasswordUpdate.ts | 4 + .../src/lib/types/requests/ReqUserUpdate.ts | 4 - .../src/lib/types/responses/AuthError.ts | 2 +- projects/strapi-auth/src/public-api.ts | 3 +- 13 files changed, 134 insertions(+), 376 deletions(-) create mode 100644 projects/strapi-auth/src/lib/types/requests/ReqPasswordUpdate.ts diff --git a/projects/strapi-auth/src/lib/components/base-components/login-base/login-base.component.ts b/projects/strapi-auth/src/lib/components/base-components/login-base/login-base.component.ts index 88bf25c4..d80fb7ab 100644 --- a/projects/strapi-auth/src/lib/components/base-components/login-base/login-base.component.ts +++ b/projects/strapi-auth/src/lib/components/base-components/login-base/login-base.component.ts @@ -9,7 +9,7 @@ import { Router } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; import { AuthService } from '../../../services/auth/auth.service'; import { IReqAuthLogin } from '../../../types/requests/ReqAuthLogin'; -import { IAuthError } from '../../../types/responses/AuthError'; +import { IErrorRes } from '../../../types/responses/AuthError'; import { StrapiAuthConfig, StrapiAuthProviders @@ -29,7 +29,7 @@ export class LoginBaseComponent implements OnInit { password: new UntypedFormControl('', [Validators.required]) }); - public error: IAuthError; + public error: IErrorRes; constructor( protected authService: AuthService, diff --git a/projects/strapi-auth/src/lib/components/base-components/profile-base/profile-base.component.ts b/projects/strapi-auth/src/lib/components/base-components/profile-base/profile-base.component.ts index 3c971ab2..8372e115 100644 --- a/projects/strapi-auth/src/lib/components/base-components/profile-base/profile-base.component.ts +++ b/projects/strapi-auth/src/lib/components/base-components/profile-base/profile-base.component.ts @@ -1,3 +1,4 @@ +import { HttpErrorResponse } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; import { UntypedFormBuilder, @@ -8,76 +9,46 @@ import { import { TranslateService } from '@ngx-translate/core'; import { AuthService } from '../../../services/auth/auth.service'; import { IUser } from '../../../types/models/User'; +import { IReqPasswordUpdate } from '../../../types/requests/ReqPasswordUpdate'; import { IReqUserUpdate } from '../../../types/requests/ReqUserUpdate'; +import { IErrorRes } from '../../../types/responses/AuthError'; +import Validation from '../../../utils/validation'; @Component({ selector: 'strapi-profile-base', template: '' }) export class ProfileBaseComponent implements OnInit { - public form: UntypedFormGroup = new UntypedFormBuilder().group({ - firstname: new UntypedFormControl(), - lastname: new UntypedFormControl(), + private userObj: IUser; + private oldUserObj: IUser; + + public formGroup: UntypedFormGroup = new UntypedFormGroup({ email: new UntypedFormControl(), username: new UntypedFormControl() }); - public passwordForm: UntypedFormGroup = new UntypedFormBuilder().group({ - password: new UntypedFormControl('', [ - Validators.required, - Validators.pattern( - '(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\\d$@$!%*?&].{8,}' - ) - ]), - rePass: new UntypedFormControl('', [ - Validators.required, - Validators.pattern( - '(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\\d$@$!%*?&].{8,}' - ) - ]), - oldPassword: new UntypedFormControl() - }); + public passwordFormGroup: UntypedFormGroup = new UntypedFormGroup( + { + password: new UntypedFormControl('', [ + Validators.required, + Validators.pattern( + '(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\\d$@$!%*?&].{8,}' + ) + ]), + passwordConfirmation: new UntypedFormControl('', [ + Validators.required, + Validators.pattern( + '(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\\d$@$!%*?&].{8,}' + ) + ]), + oldPassword: new UntypedFormControl('', [Validators.required]) + }, + { + validators: [Validation.match('password', 'passwordConfirmation')] + } + ); - oldUserObj: IUser; - - userObj = { - firstname: null, - lastname: null, - email: null, - username: null, - password: null, - password_confirmation: null, - oldPassword: null, - provider: null - }; - - redirectDelay = 0; - showMessages: any = { - error: true - }; - - // TODO: Create error component for displaying errors - // TODO: Add opt in error notifications - submitted = false; - passwordSubmitted = false; - errors: string[] = []; - messages: string[] = []; - - config = { - firstnameRequired: false, - firstnameMinLength: 2, - firstnameMaxLength: 100, - lastnameRequired: false, - lastnameMinLength: 2, - lastnameMaxLength: 100, - usernameRequired: true, - usernameMinLength: 2, - usernameMaxLength: 100, - emailRequired: true, - passwordRequired: true, - passwordMinLength: 6, - passwordMaxLength: 60 - }; + public error: IErrorRes; constructor( protected authService: AuthService, @@ -90,38 +61,37 @@ export class ProfileBaseComponent implements OnInit { if (this.oldUserObj) { this.userObj = { - firstname: null, - lastname: null, - username: this.oldUserObj.username, - email: this.oldUserObj.email, - password: null, - password_confirmation: null, - oldPassword: null, - provider: null + ...this.oldUserObj }; } + + this.formGroup.setValue({ + username: this.userObj.username, + email: this.userObj.email + }); + // Hook on update from user service this.authService.UserState.subscribe(() => { this.oldUserObj = this.authService.getUser(); this.userObj = { - firstname: null, - lastname: null, - username: this.oldUserObj.username, - email: this.oldUserObj.email, - password: null, - password_confirmation: null, - oldPassword: null, - provider: null + ...this.oldUserObj }; + + this.formGroup.setValue({ + username: this.userObj.username, + email: this.userObj.email + }); }); } /** * Update UserData if changed */ - update(): void { - this.clearErrors(); - this.submitted = true; + public update(): void { + this.userObj = { + ...this.formGroup.value + }; + const updateRequest: IReqUserUpdate = { username: this.userObj.username && @@ -131,101 +101,44 @@ export class ProfileBaseComponent implements OnInit { email: this.userObj.email && this.oldUserObj.email !== this.userObj.email ? this.userObj.email - : null, - password: null, - oldPassword: null + : null }; if (!updateRequest.username && !updateRequest.email) { - this.submitted = false; return; } this.authService .updateProfile(updateRequest) .then(() => { - this.submitted = false; + this.formGroup.markAsPristine(); }) - .catch((err) => { - console.error(err); - - if (err.error.message === 'Username already exists!') { - console.log('error'); - this.errors.push( - this.translate.instant('errors.auth.profile.username_existence') - ); - - console.log(this.errors); - } - - if (err.error.message === 'Email already exists!') { - this.errors.push( - this.translate.instant('errors.auth.profile.email_existence') - ); - } - - this.submitted = false; + .catch((err: HttpErrorResponse) => { + this.error = err.error; }); - - this.form.markAsPristine(); } /** * Update password if changed * and confirmed */ - updatePassword(): void { - this.clearErrors(); - this.passwordSubmitted = true; - const updateRequest: IReqUserUpdate = { - email: null, - username: null, - password: - this.userObj.email && this.userObj.password_confirmation - ? this.userObj.password - : null, - oldPassword: this.userObj.oldPassword + public updatePassword(): void { + const updateRequest: IReqPasswordUpdate = { + password: this.passwordFormGroup.value.password, + oldPassword: this.passwordFormGroup.value.oldPassword }; - if (!updateRequest.password) { - this.passwordSubmitted = false; + if (!updateRequest.password || !updateRequest.oldPassword) { return; } this.authService .updateProfile(updateRequest) .then(() => { - this.passwordSubmitted = false; - this.passwordForm.controls.password.reset(); - this.passwordForm.controls.rePass.reset(); - this.passwordForm.controls.oldPassword.reset(); + this.passwordFormGroup.reset(); }) - .catch((err) => { - console.error(err); - - // TODO: Display errors - - if (err.error.message === 'Old user password does not match!') { - this.errors.push( - this.translate.instant('errors.auth.profile.wrong_current_password') - ); - } else if ( - err.error.message === 'Password does not fulfill requirements!' - ) { - this.errors.push( - this.translate.instant('errors.auth.profile.password_requirements') - ); - } else { - this.errors.push( - this.translate.instant('errors.auth.profile.password_change_error') - ); - } - - this.passwordSubmitted = false; + .catch((err: HttpErrorResponse) => { + this.error = err.error; }); } - - private clearErrors(): void { - this.errors = []; - } } diff --git a/projects/strapi-auth/src/lib/components/base-components/register-base/register-base.component.ts b/projects/strapi-auth/src/lib/components/base-components/register-base/register-base.component.ts index c68f0b0e..b8fce692 100644 --- a/projects/strapi-auth/src/lib/components/base-components/register-base/register-base.component.ts +++ b/projects/strapi-auth/src/lib/components/base-components/register-base/register-base.component.ts @@ -9,7 +9,7 @@ import { Router } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; import { AuthService } from '../../../services/auth/auth.service'; import { IReqAuthRegister } from '../../../types/requests/ReqAuthRegister'; -import { IAuthError } from '../../../types/responses/AuthError'; +import { IErrorRes } from '../../../types/responses/AuthError'; import Validation from '../../../utils/validation'; @Component({ @@ -33,7 +33,7 @@ export class RegisterBaseComponent implements OnInit { } ); - public error: IAuthError; + public error: IErrorRes; constructor( protected router: Router, diff --git a/projects/strapi-auth/src/lib/components/base-components/request-password-base/request-password-base.component.ts b/projects/strapi-auth/src/lib/components/base-components/request-password-base/request-password-base.component.ts index d8d5d3a5..14740f84 100644 --- a/projects/strapi-auth/src/lib/components/base-components/request-password-base/request-password-base.component.ts +++ b/projects/strapi-auth/src/lib/components/base-components/request-password-base/request-password-base.component.ts @@ -9,7 +9,7 @@ import { import { Router } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; import { AuthService } from '../../../services/auth/auth.service'; -import { IAuthError } from '../../../types/responses/AuthError'; +import { IErrorRes } from '../../../types/responses/AuthError'; import { IResRequestPasswordReset } from '../../../types/responses/ResRequestPasswordReset'; @Component({ @@ -21,7 +21,7 @@ export class RequestPasswordBaseComponent { email: new UntypedFormControl('', [Validators.required, Validators.email]) }); - public error: IAuthError; + public error: IErrorRes; constructor( protected cd: ChangeDetectorRef, diff --git a/projects/strapi-auth/src/lib/components/base-components/reset-password-base/reset-password-base.component.ts b/projects/strapi-auth/src/lib/components/base-components/reset-password-base/reset-password-base.component.ts index ba867026..41891d28 100644 --- a/projects/strapi-auth/src/lib/components/base-components/reset-password-base/reset-password-base.component.ts +++ b/projects/strapi-auth/src/lib/components/base-components/reset-password-base/reset-password-base.component.ts @@ -10,7 +10,7 @@ import { ActivatedRoute, Router } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; import { AuthService } from '../../../services/auth/auth.service'; import { IReqPasswordReset } from '../../../types/requests/ReqPasswordReset'; -import { IAuthError } from '../../../types/responses/AuthError'; +import { IErrorRes } from '../../../types/responses/AuthError'; import Validation from '../../../utils/validation'; @Component({ @@ -31,7 +31,7 @@ export class ResetPasswordBaseComponent implements OnInit { } ); - public error: IAuthError; + public error: IErrorRes; constructor( protected cd: ChangeDetectorRef, diff --git a/projects/strapi-auth/src/lib/components/default-components/default-profile/default-profile.component.html b/projects/strapi-auth/src/lib/components/default-components/default-profile/default-profile.component.html index d51fd817..e58c1155 100644 --- a/projects/strapi-auth/src/lib/components/default-components/default-profile/default-profile.component.html +++ b/projects/strapi-auth/src/lib/components/default-components/default-profile/default-profile.component.html @@ -1,201 +1,67 @@

{{ 'auth.profile.title' | translate }}

-{{userObj | json}} - +
+ + +
-
- - - -

- {{ 'auth.profile.form.input.email.required_message' | translate }} -

-

- {{ 'auth.profile.form.input.email.valid_message' | translate }} -

- -
+ +
+ + +
-
+
+ +
+ - - - - -
- - {{ 'auth.profile.change_password.title' | translate }} - -
-
- - - -

- {{ 'auth.profile.form.input.oldPassword.required_message' | translate }} -

- -
+
+ + + +
+ + +
+ + +
+ + +
-
- - - -

- {{ 'auth.profile.form.input.password.required_message' | translate }} -

-

- {{ 'auth.profile.form.input.password.pattern_message' | translate }} -

-

- {{ - 'auth.profile.form.input.password.min_length_message' - | translate: { min: config.passwordMinLength, max: config.passwordMaxLength } - }} -

- -
+ +
+ + +
-
- - - -

- {{ 'auth.profile.form.input.repeat_password.required_message' | translate }} -

-

- {{ 'auth.profile.form.input.repeat_password.match_message' | translate }} -

- -
+
+ -
+
+ - - - -
-
--> + diff --git a/projects/strapi-auth/src/lib/components/default-components/default-profile/default-profile.component.scss b/projects/strapi-auth/src/lib/components/default-components/default-profile/default-profile.component.scss index 4504d179..8b137891 100644 --- a/projects/strapi-auth/src/lib/components/default-components/default-profile/default-profile.component.scss +++ b/projects/strapi-auth/src/lib/components/default-components/default-profile/default-profile.component.scss @@ -1,26 +1 @@ -nb-card-body { - overflow: visible; - padding-top: 0; - >* { - margin-top: 1rem; - } -} - -.full-name-inputs, -.validation-checkboxes { - display: flex; - margin: 0 -0.5rem; - - >* { - margin: 0 0.5rem; - } -} - -.checkbox-radio { - display: flex; -} - -.demo-items { - flex: 1 0 33%; -} diff --git a/projects/strapi-auth/src/lib/interceptors/auth.interceptor.ts b/projects/strapi-auth/src/lib/interceptors/auth.interceptor.ts index 0654b862..9f0ebe5f 100644 --- a/projects/strapi-auth/src/lib/interceptors/auth.interceptor.ts +++ b/projects/strapi-auth/src/lib/interceptors/auth.interceptor.ts @@ -8,10 +8,10 @@ import { import { Inject, Injectable, Injector } from '@angular/core'; import { Router } from '@angular/router'; import { catchError, Observable, throwError } from 'rxjs'; -import { IAuthError } from '../../public-api'; import { AuthService } from '../services/auth/auth.service'; import { ConfigServiceInjector } from '../services/config/config.service'; import { TokenService } from '../services/token/token.service'; +import { IErrorRes } from '../types/responses/AuthError'; import { StrapiAuthConfig } from '../types/StrapiAuthConfig'; @Injectable() @@ -46,7 +46,7 @@ export class AuthInterceptor implements HttpInterceptor { return next.handle(req).pipe( catchError((error: HttpErrorResponse) => { - const authError: IAuthError = error.error as IAuthError; + const authError: IErrorRes = error.error; switch (error.status) { // Intercept unauthorized request diff --git a/projects/strapi-auth/src/lib/services/auth/auth.service.ts b/projects/strapi-auth/src/lib/services/auth/auth.service.ts index e7ec373b..c55b01a1 100644 --- a/projects/strapi-auth/src/lib/services/auth/auth.service.ts +++ b/projects/strapi-auth/src/lib/services/auth/auth.service.ts @@ -23,6 +23,7 @@ import { ConfigService, ConfigServiceInjector } from '../config/config.service'; import { TokenService } from '../token/token.service'; import { IReqAuthLogin } from '../../types/requests/ReqAuthLogin'; import { BrowserCheckService } from '../browser-check/browser-check.service'; +import { IReqPasswordUpdate } from '../../types/requests/ReqPasswordUpdate'; @Injectable({ providedIn: 'root' @@ -212,7 +213,9 @@ export class AuthService { /** * Update user profile */ - public async updateProfile(updateReq: IReqUserUpdate): Promise { + public async updateProfile( + updateReq: IReqUserUpdate | IReqPasswordUpdate + ): Promise { const res: IUser | HttpErrorResponse = await this.updateUser(updateReq); if (res) { @@ -294,7 +297,7 @@ export class AuthService { * Update user */ private async updateUser( - updateReq: IReqUserUpdate + updateReq: IReqUserUpdate | IReqPasswordUpdate ): Promise { // TODO: Check if functionality is given // Updating a user (authenticated user) profile is currently not built into strapi (in that way) diff --git a/projects/strapi-auth/src/lib/types/requests/ReqPasswordUpdate.ts b/projects/strapi-auth/src/lib/types/requests/ReqPasswordUpdate.ts new file mode 100644 index 00000000..a6f59508 --- /dev/null +++ b/projects/strapi-auth/src/lib/types/requests/ReqPasswordUpdate.ts @@ -0,0 +1,4 @@ +export interface IReqPasswordUpdate { + password: string; + oldPassword: string; +} diff --git a/projects/strapi-auth/src/lib/types/requests/ReqUserUpdate.ts b/projects/strapi-auth/src/lib/types/requests/ReqUserUpdate.ts index 4869b1f8..134f9149 100644 --- a/projects/strapi-auth/src/lib/types/requests/ReqUserUpdate.ts +++ b/projects/strapi-auth/src/lib/types/requests/ReqUserUpdate.ts @@ -1,8 +1,4 @@ export interface IReqUserUpdate { - // firstname?: string; - // lastname?: string; username: string; email: string; - password: string; - oldPassword?: string; } diff --git a/projects/strapi-auth/src/lib/types/responses/AuthError.ts b/projects/strapi-auth/src/lib/types/responses/AuthError.ts index e956a085..875ff7d0 100644 --- a/projects/strapi-auth/src/lib/types/responses/AuthError.ts +++ b/projects/strapi-auth/src/lib/types/responses/AuthError.ts @@ -5,7 +5,7 @@ export interface IStrapiError { status: number; } -export interface IAuthError { +export interface IErrorRes { data: object; error: IStrapiError; } diff --git a/projects/strapi-auth/src/public-api.ts b/projects/strapi-auth/src/public-api.ts index e70caba9..f0a68fc6 100644 --- a/projects/strapi-auth/src/public-api.ts +++ b/projects/strapi-auth/src/public-api.ts @@ -42,6 +42,7 @@ export { IReqAuthLogin } from './lib/types/requests/ReqAuthLogin'; export { IReqAuthRegister } from './lib/types/requests/ReqAuthRegister'; export { IReqPasswordReset } from './lib/types/requests/ReqPasswordReset'; export { IReqUserUpdate } from './lib/types/requests/ReqUserUpdate'; +export { IReqPasswordUpdate } from './lib/types/requests/ReqPasswordUpdate'; // Responses export { IResAuthLogin } from './lib/types/responses/ResAuthLogin'; @@ -50,7 +51,7 @@ export { IResPasswordReset } from './lib/types/responses/ResPasswordReset'; export { IResRequestPasswordReset } from './lib/types/responses/ResRequestPasswordReset'; // Errors -export { IStrapiError, IAuthError } from './lib/types/responses/AuthError'; +export { IStrapiError, IErrorRes } from './lib/types/responses/AuthError'; // Routing export { StrapiAuthRoutingModule } from './lib/routing/strapi-auth-routing.module';