fix signup to display better errors

oengusio · Apr 3, 2024 · 98ea3d9 · 98ea3d9
1 parent 8f61116
commit 98ea3d9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/src/app/auth/login-oauth/login-oauth.component.ts b/src/app/auth/login-oauth/login-oauth.component.ts
@@ -83,6 +83,7 @@ export class LoginOauthComponent implements OnInit {
   }
 
   unknownAccountToast() {
+    // TODO: somehow get the default username from the response.
     this.router.navigate(['/register']);
 
     // TODO: translation

diff --git a/src/app/auth/sign-up/sign-up.component.html b/src/app/auth/sign-up/sign-up.component.html
@@ -17,7 +17,7 @@ <h2 class="subtitle">{{'user.settings.new.description' | translate}}</h2>
       <label for="displayName" class="label">{{'user.settings.displayName.label' | translate}}</label>
       <div class="control has-icons-left">
         <input class="input"
-               [ngClass]="{'is-danger': displayName.invalid}"
+               [ngClass]="{'is-danger': displayName.invalid || errors.displayName}"
                type="text"
                [(ngModel)]="data.displayName"
                name="displayName"
@@ -32,6 +32,8 @@ <h2 class="subtitle">{{'user.settings.new.description' | translate}}</h2>
           <fa-icon [icon]="iconUser"></fa-icon>
         </span>
       </div>
+      <p class="help is-danger"
+         *ngIf="errors.displayName">{{ errors.displayName }}</p>
       <div *ngIf="displayName.invalid">
         <p class="help is-danger"
            *ngIf="displayName.errors.maxlength">{{'user.settings.displayName.error.max' | translate}}</p>
@@ -49,7 +51,7 @@ <h2 class="subtitle">{{'user.settings.new.description' | translate}}</h2>
       <div class="control has-icons-left">
         <input
           type="text"
-          [ngClass]="{'is-danger': username.invalid}"
+          [ngClass]="{'is-danger': username.invalid || errors.username}"
           id="username"
           name="username"
           class="input"
@@ -65,6 +67,8 @@ <h2 class="subtitle">{{'user.settings.new.description' | translate}}</h2>
           <fa-icon [icon]="iconUser"></fa-icon>
         </span>
       </div>
+      <p class="help is-danger"
+         *ngIf="errors.username">{{ errors.username }}</p>
       <div *ngIf="username.invalid">
         <p class="help is-danger"
            *ngIf="username.errors.minlength">{{'user.settings.username.error.min' | translate}}</p>
@@ -92,7 +96,7 @@ <h2 class="subtitle">{{'user.settings.new.description' | translate}}</h2>
       <label for="email" class="label">{{'user.settings.email.label' | translate}}</label>
       <div class="control has-icons-left">
         <input class="input"
-               [ngClass]="{'is-danger': mail.invalid}"
+               [ngClass]="{'is-danger': mail.invalid || errors.email}"
                type="email" [(ngModel)]="data.email"
                id="email"
                name="mail"
@@ -105,6 +109,8 @@ <h2 class="subtitle">{{'user.settings.new.description' | translate}}</h2>
           <fa-icon [icon]="iconEmail"></fa-icon>
         </span>
       </div>
+      <p class="help is-danger"
+         *ngIf="errors.email">{{ errors.email }}</p>
       <div *ngIf="mail.invalid">
         <p class="help is-danger" *ngIf="mail.errors.email">{{'user.settings.email.error.email' | translate}}</p>
         <p class="help is-danger" *ngIf="mail.errors.required">{{'user.settings.email.error.required' | translate}}</p>
@@ -117,7 +123,7 @@ <h2 class="subtitle">{{'user.settings.new.description' | translate}}</h2>
     <div class="field has-addons">
       <div class="control has-icons-left is-expanded">
         <input class="input"
-               [ngClass]="{'is-danger': pwField.invalid}"
+               [ngClass]="{'is-danger': pwField.invalid || errors.password}"
                [type]="passwordHidden ? 'password' : 'text'"
                name="password"
                required
@@ -143,6 +149,11 @@ <h2 class="subtitle">{{'user.settings.new.description' | translate}}</h2>
     </div>
   </div>
 
+    <div class="field"
+         *ngIf="errors.password">
+      <p class="help is-danger">{{ errors.password }}</p>
+    </div>
+
   <div *ngIf="pwField.invalid" class="field">
     <p class="help is-danger"
        *ngIf="pwField.errors.required">{{'user.settings.password.error.required' | translate}}</p>

diff --git a/src/app/auth/sign-up/sign-up.component.ts b/src/app/auth/sign-up/sign-up.component.ts
@@ -31,6 +31,8 @@ export class SignUpComponent {
     connections: [],
   };
 
+  errors: { [key: string]: string } = {};
+
   constructor(
     private route: ActivatedRoute,
     private authService: AuthService,
@@ -44,6 +46,7 @@ export class SignUpComponent {
 
   async submit() {
     this.loading = true;
+    this.errors = {};
     this.data.displayName = this.data.displayName || this.data.username;
     this.data.connections = this.data.connections.filter(it => it.platform && it.username);
 
@@ -54,9 +57,14 @@ export class SignUpComponent {
         this.showNextStep = true;
       }
     } catch (e: any) {
+      const errors: { field: string; defaultMessage: string }[] = e.error.errors || {};
+
+      errors.forEach(({ field, defaultMessage }) => {
+        this.errors[field] = defaultMessage;
+      });
+
       console.log(e);
       this.showNextStep = false;
-      // TODO: show any errors
     } finally {
       this.loading = false;
     }