register

maxkey-web-frontend/maxkey-web-app/src/app/routes/passport/register/register.component.html

@@ -2,40 +2,31 @@
 <form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
   <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
   <nz-form-item>
-    <nz-form-control [nzErrorTip]="mailErrorTip">
+    <nz-form-control [nzErrorTip]="">
       <nz-input-group nzSize="large" nzAddonBeforeIcon="user">
-        <input nz-input formControlName="username" placeholder="username" />
+        <input nz-input formControlName="username" placeholder="{{ 'mxk.users.username' | i18n }}" />
       </nz-input-group>
-      <ng-template #mailErrorTip let-i>
-        <ng-container *ngIf="i.errors?.required">{{ 'validation.email.required' | i18n }}</ng-container>
-        <ng-container *ngIf="i.errors?.email">{{ 'validation.email.wrong-format' | i18n }}</ng-container>
-      </ng-template>
     </nz-form-control>
   </nz-form-item>
   <nz-form-item>
-    <nz-form-control [nzErrorTip]="mailErrorTip">
+    <nz-form-control [nzErrorTip]="">
       <nz-input-group nzSize="large" nzAddonBeforeIcon="user">
-        <input nz-input formControlName="displayName" placeholder="displayName" />
+        <input nz-input formControlName="displayName" placeholder="{{ 'mxk.users.displayName' | i18n }}" />
       </nz-input-group>
-      <ng-template #mailErrorTip let-i>
-        <ng-container *ngIf="i.errors?.required">{{ 'validation.email.required' | i18n }}</ng-container>
-        <ng-container *ngIf="i.errors?.email">{{ 'validation.email.wrong-format' | i18n }}</ng-container>
-      </ng-template>
     </nz-form-control>
   </nz-form-item>
   <nz-form-item>
     <nz-form-control [nzErrorTip]="mailErrorTip">
       <nz-input-group nzSize="large" nzAddonBeforeIcon="user">
-        <input nz-input formControlName="mail" placeholder="Email" />
+        <input nz-input formControlName="email" placeholder="{{ 'mxk.users.email' | i18n }}" />
       </nz-input-group>
       <ng-template #mailErrorTip let-i>
-        <ng-container *ngIf="i.errors?.required">{{ 'validation.email.required' | i18n }}</ng-container>
         <ng-container *ngIf="i.errors?.email">{{ 'validation.email.wrong-format' | i18n }}</ng-container>
       </ng-template>
     </nz-form-control>
   </nz-form-item>
   <nz-form-item>
-    <nz-form-control [nzErrorTip]="'validation.password.required' | i18n">
+    <nz-form-control [nzErrorTip]="">
       <nz-input-group
         nzSize="large"
         nzAddonBeforeIcon="lock"
@@ -47,7 +38,7 @@
         [nzPopoverOverlayStyle]="{ 'width.px': 240 }"
         [nzPopoverContent]="pwdCdkTpl"
       >
-        <input nz-input type="password" formControlName="password" placeholder="Password" />
+        <input nz-input type="password" formControlName="password" placeholder="{{ 'mxk.password.password' | i18n }}" />
       </nz-input-group>
       <ng-template #pwdCdkTpl>
         <div style="padding: 4px 0">
@@ -72,10 +63,9 @@
   <nz-form-item>
     <nz-form-control [nzErrorTip]="confirmErrorTip">
       <nz-input-group nzSize="large" nzAddonBeforeIcon="lock">
-        <input nz-input type="password" formControlName="confirm" placeholder="Confirm Password" />
+        <input nz-input type="password" formControlName="confirm" placeholder="{{ 'mxk.password.confirmPassword' | i18n }}" />
       </nz-input-group>
       <ng-template #confirmErrorTip let-i>
-        <ng-container *ngIf="i.errors?.required">{{ 'validation.confirm-password.required' | i18n }}</ng-container>
         <ng-container *ngIf="i.errors?.matchControl">{{ 'validation.password.twice' | i18n }}</ng-container>
       </ng-template>
     </nz-form-control>
@@ -89,24 +79,23 @@
             <nz-option [nzLabel]="'+87'" [nzValue]="'+87'"></nz-option>
           </nz-select>
         </ng-template>
-        <input formControlName="mobile" nz-input placeholder="Phone number" />
+        <input formControlName="mobile" nz-input placeholder="{{ 'mxk.users.mobile' | i18n }}" />
       </nz-input-group>
       <ng-template #mobileErrorTip let-i>
-        <ng-container *ngIf="i.errors?.required">{{ 'validation.phone-number.required' | i18n }}</ng-container>
         <ng-container *ngIf="i.errors?.pattern">{{ 'validation.phone-number.wrong-format' | i18n }}</ng-container>
       </ng-template>
     </nz-form-control>
   </nz-form-item>
   <nz-form-item>
-    <nz-form-control [nzErrorTip]="'validation.verification-code.required' | i18n">
+    <nz-form-control [nzErrorTip]="">
       <nz-row [nzGutter]="8">
         <nz-col [nzSpan]="16">
           <nz-input-group nzSize="large" nzAddonBeforeIcon="mail">
-            <input nz-input formControlName="captcha" placeholder="Captcha" />
+            <input nz-input formControlName="captcha" placeholder="{{ 'mxk.password.captcha' | i18n }}" />
           </nz-input-group>
         </nz-col>
         <nz-col [nzSpan]="8">
-          <button type="button" nz-button nzSize="large" (click)="getCaptcha()" [disabled]="count > 0" nzBlock [nzLoading]="loading">
+          <button type="button" nz-button nzSize="large" (click)="getCaptcha()" [disabled]="count > 0" nzBlock [nzLoading]="captchaLoading">
             {{ count ? count + 's' : ('app.register.get-verification-code' | i18n) }}
           </button>
         </nz-col>

maxkey-web-frontend/maxkey-web-app/src/app/routes/passport/register/register.component.ts

@@ -69,6 +69,7 @@ export class UserRegisterComponent implements OnDestroy {
   error = '';
   type = 0;
   loading = false;
+  captchaLoading = false;
   visible = false;
   status = 'pool';
   progress = 0;
@@ -111,13 +112,22 @@ export class UserRegisterComponent implements OnDestroy {
       this.mobile.updateValueAndValidity({ onlySelf: true });
       return;
     }
-    this.signUpService.produceOtp({ mobile: this.mobile.value }).subscribe(res => {
-      if (res.code !== 0) {
-        this.msg.success(`短信发送失败`);
-        this.cdr.detectChanges();
-      }
-      this.msg.success(`短信发送成功`);
-    });
+    this.captchaLoading = true;
+    this.signUpService
+      .produceOtp({ mobile: this.mobile.value })
+      .pipe(
+        finalize(() => {
+          this.captchaLoading = false;
+          this.cdr.detectChanges();
+        })
+      )
+      .subscribe(res => {
+        if (res.code !== 0) {
+          this.msg.success(`短信发送失败`);
+          this.cdr.detectChanges();
+        }
+        this.msg.success(`短信发送成功`);
+      });
     this.count = 59;
     this.cdr.detectChanges();
     this.interval$ = setInterval(() => {

maxkey-web-frontend/maxkey-web-app/src/assets/i18n/en-US.json

@@ -249,7 +249,8 @@
       "username": "Username",
       "oldPassword": "Old Password",
       "password": "New Password",
-      "confirmPassword": "Confirm Password"
+      "confirmPassword": "Confirm Password",
+      "captcha": "Captcha"
     },
     "ldapcontext":{
       "product": "product",

maxkey-web-frontend/maxkey-web-app/src/assets/i18n/zh-CN.json

@@ -542,7 +542,8 @@
       "username": "账号",
       "oldPassword": "当前密码",
       "password": "新密码",
-      "confirmPassword": "确认密码"
+      "confirmPassword": "确认密码",
+      "captcha": "验证码"
     },
     "socialsproviders":{
       "icon" :"图标",