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

<form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
  <nz-radio-group
    [(ngModel)]="loginType"
    [ngModelOptions]="{ standalone: true }"
    nzSize="large"
    *ngIf="switchTab"
    style="margin-bottom: 8px; width: 100%"
  >
    <label nz-radio-button nzValue="normal" style="width: 50%; text-align: center">
      <i nz-icon nzType="user" nzTheme="outline"></i>
      {{ 'mxk.login.tab-credentials' | i18n }}
    </label>
    <label nz-radio-button nzValue="mobile" style="width: 50%; text-align: center" class="d-none">
      <i nz-icon nzType="mobile" nzTheme="outline"></i>
      {{ 'mxk.login.tab-mobile' | i18n }}
    </label>
    <label nz-radio-button nzValue="qrscan" style="width: 50%; text-align: center" (click)="getQrCode()">
      <i nz-icon nzType="qrcode" nzTheme="outline"></i>{{ 'mxk.login.tab-qrscan' | i18n }}
    </label>
  </nz-radio-group>
  <div nz-row *ngIf="loginType == 'normal'">
    <nz-alert style="width: 100%" *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
    <nz-form-item style="width: 100%">
      <nz-form-control nzErrorTip="">
        <nz-input-group nzSize="large" nzPrefixIcon="user">
          <input nz-input formControlName="userName" placeholder="{{ 'mxk.login.text.username' | i18n }}" />
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item style="width: 100%">
      <nz-form-control nzErrorTip="">
        <nz-input-group [nzSuffix]="suffixTemplate" nzSize="large" nzPrefixIcon="key">
          <input
            [type]="passwordVisible ? 'text' : 'password'"
            nz-input
            placeholder="{{ 'mxk.login.text.password' | i18n }}"
            formControlName="password"
          />
        </nz-input-group>
        <ng-template #suffixTemplate>
          <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item style="width: 100%" *ngIf="captchaType != 'NONE'">
      <nz-form-control nzErrorTip="">
        <nz-input-group nzSearch nzSize="large" nzPrefixIcon="lock" nzSearch [nzAddOnAfter]="suffixImageCaptchaButton">
          <input type="text" formControlName="captcha" nz-input placeholder="{{ 'mxk.login.text.captcha' | i18n }}" />
        </nz-input-group>
        <ng-template #suffixImageCaptchaButton>
          <img src="{{ imageCaptcha }}" (click)="getImageCaptcha()" />
        </ng-template>
      </nz-form-control>
    </nz-form-item>
  </div>
  <div nz-row *ngIf="loginType == 'mobile'">
    <nz-form-item style="width: 100%">
      <nz-form-control [nzErrorTip]="">
        <nz-input-group nzSize="large" nzPrefixIcon="user">
          <input nz-input formControlName="mobile" placeholder="{{ 'mxk.login.text.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 style="width: 100%">
      <nz-form-control [nzErrorTip]="'' | i18n">
        <nz-input-group nzSize="large" nzPrefixIcon="mail" nzSearch [nzAddOnAfter]="suffixSendOtpCodeButton">
          <input nz-input formControlName="otpCaptcha" placeholder="{{ 'mxk.login.text.captcha' | i18n }}" />
        </nz-input-group>
        <ng-template #suffixSendOtpCodeButton>
          <button type="button" nz-button nzSize="large" (click)="sendOtpCode()" [disabled]="count > 0" nzBlock [nzLoading]="loading">
            {{ count ? count + 's' : ('app.register.get-verification-code' | i18n) }}
          </button>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
  </div>
  <div nz-row *ngIf="loginType=='qrscan'">
    <div class="qrcode" id="div_qrcodelogin" style="background: #fff;padding: 20px;"> </div>
    <div id="qrexpire" *ngIf="qrexpire" style="width: 100%;text-align: center;background: #fff;padding-bottom: 20px;">
      二维码过期 <a href="javascript:" (click)="getQrCode()">刷新</a>
    </div>
  </div>
  <nz-form-item *ngIf="loginType == 'normal' || loginType == 'mobile'">
    <nz-col [nzSpan]="12">
      <label nz-checkbox formControlName="remember">{{ 'mxk.login.remember-me' | i18n }}</label>
    </nz-col>
    <nz-col [nzSpan]="12" class="text-right">
      <a class="forgot" routerLink="/passport/forgot">{{ 'mxk.login.forgot-password' | i18n }}</a>
    </nz-col>
  </nz-form-item>
  <nz-form-item *ngIf="loginType == 'normal' || loginType == 'mobile'">
    <button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" nzBlock>
      {{ 'app.login.login' | i18n }}
    </button>
  </nz-form-item>
</form>
<div class="other" *ngIf="loginType == 'normal'">
  {{ 'app.login.sign-in-with' | i18n }}
  <ng-container *ngFor="let provd of socials.providers">
    <i nz-tooltip nzTooltipTitle="{{ provd.providerName }}" (click)="socialauth(provd.provider)" nz-icon class="icon">
      <img src="{{ provd.icon }}" style="width: 32px" />
    </i>
  </ng-container>
  <a class="register d-none" routerLink="/passport/register">{{ 'mxk.login.signup' | i18n }}</a>
</div>