Implement community feedback

Remove other registration references Enabled enter submit in registration form Fixed create-profile password validation to be on debounce Fixed register page title
2025-10-07 10:04:11 +00:00 · 2020-06-10 10:15:06 +02:00
parent 8fc2309d48
commit ca7a76b80f
9 changed files with 37 additions and 110 deletions
--- a/src/app/core/auth/auth.actions.ts
+++ b/src/app/core/auth/auth.actions.ts
@@ -3,7 +3,6 @@ import { Action } from '@ngrx/store';
 // import type function
 import { type } from '../../shared/ngrx/type';
 // import models
-import { EPerson } from '../eperson/models/eperson.model';
 import { AuthTokenInfo } from './models/auth-token-info.model';
 import { AuthMethod } from './models/auth.method';
 import { AuthStatus } from './models/auth-status.model';
@@ -31,9 +30,6 @@ export const AuthActionTypes = {
  LOG_OUT: type('dspace/auth/LOG_OUT'),
  LOG_OUT_ERROR: type('dspace/auth/LOG_OUT_ERROR'),
  LOG_OUT_SUCCESS: type('dspace/auth/LOG_OUT_SUCCESS'),
-  REGISTRATION: type('dspace/auth/REGISTRATION'),
-  REGISTRATION_ERROR: type('dspace/auth/REGISTRATION_ERROR'),
-  REGISTRATION_SUCCESS: type('dspace/auth/REGISTRATION_SUCCESS'),
  SET_REDIRECT_URL: type('dspace/auth/SET_REDIRECT_URL'),
  RETRIEVE_AUTHENTICATED_EPERSON: type('dspace/auth/RETRIEVE_AUTHENTICATED_EPERSON'),
  RETRIEVE_AUTHENTICATED_EPERSON_SUCCESS: type('dspace/auth/RETRIEVE_AUTHENTICATED_EPERSON_SUCCESS'),
@@ -263,48 +259,6 @@ export class RetrieveTokenAction implements Action {
  public type: string = AuthActionTypes.RETRIEVE_TOKEN;
 }

-/**
- * Sign up.
- * @class RegistrationAction
- * @implements {Action}
- */
-export class RegistrationAction implements Action {
-  public type: string = AuthActionTypes.REGISTRATION;
-  payload: EPerson;
-
-  constructor(user: EPerson) {
-    this.payload = user;
-  }
-}
-
-/**
- * Sign up error.
- * @class RegistrationErrorAction
- * @implements {Action}
- */
-export class RegistrationErrorAction implements Action {
-  public type: string = AuthActionTypes.REGISTRATION_ERROR;
-  payload: Error;
-
-  constructor(payload: Error) {
-    this.payload = payload;
-  }
-}
-
-/**
- * Sign up success.
- * @class RegistrationSuccessAction
- * @implements {Action}
- */
-export class RegistrationSuccessAction implements Action {
-  public type: string = AuthActionTypes.REGISTRATION_SUCCESS;
-  payload: EPerson;
-
-  constructor(user: EPerson) {
-    this.payload = user;
-  }
-}
-
 /**
 * Add uthentication message.
 * @class AddAuthenticationMessageAction
@@ -439,9 +393,6 @@ export type AuthActions
  | CheckAuthenticationTokenCookieAction
  | RedirectWhenAuthenticationIsRequiredAction
  | RedirectWhenTokenExpiredAction
-  | RegistrationAction
-  | RegistrationErrorAction
-  | RegistrationSuccessAction
  | AddAuthenticationMessageAction
  | RefreshTokenAction
  | RefreshTokenErrorAction
--- a/src/app/core/auth/auth.effects.ts
+++ b/src/app/core/auth/auth.effects.ts
@@ -32,9 +32,6 @@ import {
  RefreshTokenAction,
  RefreshTokenErrorAction,
  RefreshTokenSuccessAction,
-  RegistrationAction,
-  RegistrationErrorAction,
-  RegistrationSuccessAction,
  RetrieveAuthenticatedEpersonAction,
  RetrieveAuthenticatedEpersonErrorAction,
  RetrieveAuthenticatedEpersonSuccessAction,
@@ -138,18 +135,6 @@ export class AuthEffects {
    })
  );

-  @Effect()
-  public createUser$: Observable<Action> = this.actions$.pipe(
-    ofType(AuthActionTypes.REGISTRATION),
-    debounceTime(500), // to remove when functionality is implemented
-    switchMap((action: RegistrationAction) => {
-      return this.authService.create(action.payload).pipe(
-        map((user: EPerson) => new RegistrationSuccessAction(user)),
-        catchError((error) => observableOf(new RegistrationErrorAction(error)))
-      );
-    })
-  );
-
  @Effect()
  public retrieveToken$: Observable<Action> = this.actions$.pipe(
    ofType(AuthActionTypes.RETRIEVE_TOKEN),
--- a/src/app/core/auth/auth.reducer.ts
+++ b/src/app/core/auth/auth.reducer.ts
@@ -115,7 +115,6 @@ export function authReducer(state: any = initialState, action: AuthActions): Aut
      });

    case AuthActionTypes.AUTHENTICATE_ERROR:
-    case AuthActionTypes.REGISTRATION_ERROR:
      return Object.assign({}, state, {
        authenticated: false,
        authToken: undefined,
@@ -157,18 +156,6 @@ export function authReducer(state: any = initialState, action: AuthActions): Aut
        userId: undefined
      });

-    case AuthActionTypes.REGISTRATION:
-      return Object.assign({}, state, {
-        authenticated: false,
-        authToken: undefined,
-        error: undefined,
-        loading: true,
-        info: undefined
-      });
-
-    case AuthActionTypes.REGISTRATION_SUCCESS:
-      return state;
-
    case AuthActionTypes.REFRESH_TOKEN:
      return Object.assign({}, state, {
        refreshing: true,
--- a/src/app/core/auth/auth.service.ts
+++ b/src/app/core/auth/auth.service.ts
@@ -270,18 +270,6 @@ export class AuthService {
    return observableOf(authMethods);
  }

-  /**
-   * Create a new user
-   * @returns {User}
-   */
-  public create(user: EPerson): Observable<EPerson> {
-    // Normally you would do an HTTP request to POST the user
-    // details and then return the new user object
-    // but, let's just return the new user for this example.
-    // this._authenticated = true;
-    return observableOf(user);
-  }
-
  /**
   * End session
   * @returns {Observable<boolean>}
--- a/src/app/register-page/create-profile/create-profile.component.html
+++ b/src/app/register-page/create-profile/create-profile.component.html
@@ -7,7 +7,7 @@
                   for="email">{{'register-page.create-profile.identification.email' | translate}}</label>
            <span id="email">{{(registration$ |async).email}}</span></div>
    </div>
-    <form [class]="'ng-invalid'" [formGroup]="userInfoForm">
+    <form [class]="'ng-invalid'" [formGroup]="userInfoForm" (ngSubmit)="submitEperson()">

        <div class="form-group">
            <div class="row">
@@ -64,13 +64,13 @@
    <h4>{{'register-page.create-profile.security.header' | translate}}</h4>
    <p>{{'register-page.create-profile.security.info' | translate}}</p>

-    <form class="form-horizontal" [formGroup]="passwordForm">
+    <form class="form-horizontal" [formGroup]="passwordForm" (ngSubmit)="submitEperson()">
        <div class="form-group">
            <div class="row">
                <div class="col-12">
                    <label class="font-weight-bold" for="password">{{'register-page.create-profile.security.password' |translate}}</label>
                    <input [type]="'password'"
-                           [className]="(passwordForm.invalid) && (password.dirty || password.touched) && (confirmPassword.dirty || confirmPassword.touched) ? 'form-control is-invalid' :'form-control'"
+                           [className]="(!(isValidPassWord$|async)) && (password.dirty || password.touched) && (confirmPassword.dirty || confirmPassword.touched) ? 'form-control is-invalid' :'form-control'"
                           type="text" id="password" formControlName="password"/>
                </div>
            </div>
@@ -78,9 +78,9 @@
                <div class="col-12">
                    <label class="font-weight-bold" for="confirmPassword">{{'register-page.create-profile.security.confirm-password' |translate}}</label>
                    <input [type]="'password'"
-                           [className]="(passwordForm.invalid) && (password.dirty || password.touched) && (confirmPassword.dirty || confirmPassword.touched) ? 'form-control is-invalid' :'form-control'"
+                           [className]="(!(isValidPassWord$|async)) && (password.dirty || password.touched) && (confirmPassword.dirty || confirmPassword.touched) ? 'form-control is-invalid' :'form-control'"
                           id="confirmPassword" formControlName="confirmPassword">
-                    <div *ngIf="passwordForm.invalid && (password.dirty || password.touched) && (confirmPassword.dirty || confirmPassword.touched)"
+                    <div *ngIf="!(isValidPassWord$|async) && (password.dirty || password.touched) && (confirmPassword.dirty || confirmPassword.touched)"
                         class="invalid-feedback show-feedback">
                        {{ 'register-page.create-profile.security.password.error' | translate }}
                    </div>
@@ -92,7 +92,7 @@
    <div class="row">
        <div class="col-12">
            <button
-                    [disabled]="passwordForm.invalid || userInfoForm.invalid"
+                    [disabled]=" !(isValidPassWord$|async) || userInfoForm.invalid"
                    class="btn btn-default btn-primary" (click)="submitEperson()">{{'register-page.create-profile.submit' | translate}}</button>
        </div>
    </div>
--- a/src/app/register-page/create-profile/create-profile.component.ts
+++ b/src/app/register-page/create-profile/create-profile.component.ts
@@ -1,6 +1,6 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { map } from 'rxjs/operators';
+import { debounceTime, map } from 'rxjs/operators';
 import { Registration } from '../../core/shared/registration.model';
 import { Observable } from 'rxjs';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
@@ -32,6 +32,8 @@ export class CreateProfileComponent implements OnInit {
  passwordForm: FormGroup;
  activeLangs: LangConfig[];

+  isValidPassWord$: Observable<boolean>;
+
  constructor(
    private translateService: TranslateService,
    private ePersonDataService: EPersonDataService,
@@ -68,15 +70,26 @@ export class CreateProfileComponent implements OnInit {
    this.passwordForm = this.formBuilder.group({
      password: new FormControl('', {
        validators: [Validators.required, Validators.minLength(6)],
-        updateOn: 'blur'
+        updateOn: 'change'
      }),
      confirmPassword: new FormControl('', {
        validators: [Validators.required],
-        updateOn: 'blur'
+        updateOn: 'change'
      })
    }, {
      validator: ConfirmedValidator('password', 'confirmPassword')
    });
+
+    this.isValidPassWord$ = this.passwordForm.statusChanges.pipe(
+      debounceTime(300),
+      map((status: string) => {
+        if (status === 'VALID') {
+          return true;
+        } else {
+          return false;
+        }
+      })
+    );
  }

  get firstName() {
--- a/src/app/register-page/register-email/register-email.component.html
+++ b/src/app/register-page/register-email/register-email.component.html
@@ -2,7 +2,7 @@
    <h2>{{'register-page.registration.header'|translate}}</h2>
    <p>{{'register-page.registration.info' | translate}}</p>

-    <form [class]="'ng-invalid'" [formGroup]="form">
+    <form [class]="'ng-invalid'" [formGroup]="form" (ngSubmit)="register()">

        <div class="form-group">
            <div class="row">
--- a/src/app/register-page/register-email/register-email.component.ts
+++ b/src/app/register-page/register-email/register-email.component.ts
@@ -42,17 +42,19 @@ export class RegisterEmailComponent implements OnInit {
   * Register an email address
   */
  register() {
-    this.epersonRegistrationService.registerEmail(this.email.value).subscribe((response: RestResponse) => {
-        if (response.isSuccessful) {
-          this.notificationService.success(this.translateService.get('register-page.registration.success.head'),
-            this.translateService.get('register-page.registration.success.content', {email: this.email.value}));
-          this.router.navigate(['/home']);
-        } else {
-          this.notificationService.error(this.translateService.get('register-page.registration.error.head'),
-            this.translateService.get('register-page.registration.error.content', {email: this.email.value}));
+    if (!this.form.invalid) {
+      this.epersonRegistrationService.registerEmail(this.email.value).subscribe((response: RestResponse) => {
+          if (response.isSuccessful) {
+            this.notificationService.success(this.translateService.get('register-page.registration.success.head'),
+              this.translateService.get('register-page.registration.success.content', {email: this.email.value}));
+            this.router.navigate(['/home']);
+          } else {
+            this.notificationService.error(this.translateService.get('register-page.registration.error.head'),
+              this.translateService.get('register-page.registration.error.content', {email: this.email.value}));
+          }
        }
-      }
-    );
+      );
+    }
  }

  get email() {
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -2037,6 +2037,7 @@
  "publication.search.title": "DSpace Angular :: Publication Search",


+  "register-email.title": "New user registration",

  "register-page.create-profile.header": "Create Profile",