<ion-header>
  <ion-toolbar>
    <ion-title>{{ isLoginMode ? '登录' : '注册' }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <form [formGroup]="authForm" (ngSubmit)="onSubmit()">
    <ion-item>
      <ion-label position="floating">邮箱</ion-label>
      <ion-input type="email" formControlName="email" required></ion-input>
    </ion-item>
    <ion-note color="danger" *ngIf="email?.touched && email?.invalid">
      <small *ngIf="email?.errors?.['required']">邮箱是必填项</small>
      <small *ngIf="email?.errors?.['email']">请输入有效的邮箱地址</small>
    </ion-note>

    <ion-item>
      <ion-label position="floating">密码</ion-label>
      <ion-input type="password" formControlName="password" required></ion-input>
    </ion-item>
    <ion-note color="danger" *ngIf="password?.touched && password?.invalid">
      <small *ngIf="password?.errors?.['required']">密码是必填项</small>
      <small *ngIf="password?.errors?.['minlength']">密码至少6位</small>
    </ion-note>

    <ion-item *ngIf="!isLoginMode">
      <ion-label position="floating">确认密码</ion-label>
      <ion-input type="password" formControlName="confirmPassword" required></ion-input>
    </ion-item>
    <ion-note color="danger" *ngIf="!isLoginMode && authForm.errors?.['mismatch'] && confirmPassword?.touched">
      <small>两次输入的密码不一致</small>
    </ion-note>

    <div class="error-msg" *ngIf="errorMessage">{{ errorMessage }}</div>

    <ion-button expand="block" type="submit" [disabled]="authForm.invalid">
      {{ isLoginMode ? '登录' : '注册' }}
    </ion-button>
  </form>

  <div class="switch-mode">
    <span>{{ isLoginMode ? '还没有账号？' : '已有账号？' }}</span>
    <ion-button fill="clear" size="small" (click)="switchMode()">
      {{ isLoginMode ? '注册' : '登录' }}
    </ion-button>
  </div>
</ion-content>
