s202226701049/AIart-app/src/lib/user/model-user-login/model-user-login.component.html

<!-- 用户登录状态 -->
<ion-card>
  <ion-card-header>
    <ion-card-title>
      <ion-segment [value]="type" (ionChange)="typeChange($event)">
        <ion-segment-button value="login">
          <ion-label>登录</ion-label>
        </ion-segment-button>
        <ion-segment-button value="signup">
          <ion-label>注册</ion-label>
        </ion-segment-button>
      </ion-segment>
    </ion-card-title>
    <ion-card-subtitle>{{ isSignup ? '创建新账号' : '请输入账号密码' }}</ion-card-subtitle>
  </ion-card-header>
  <ion-card-content>
    <div class="form-group">
      <ion-item [class.ion-invalid]="errorMessage && !username">
        <ion-icon slot="start" name="person-outline"></ion-icon>
        <ion-label position="stacked">用户名</ion-label>
        <ion-input type="text" [(ngModel)]="username" placeholder="请输入3-20位字母、数字、下划线或中文" (ionFocus)="errorMessage = ''">
        </ion-input>
      </ion-item>

      <ion-item [class.ion-invalid]="errorMessage && !password">
        <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
        <ion-label position="stacked">密码</ion-label>
        <ion-input type="password" [(ngModel)]="password" placeholder="请输入6-20位字母、数字或下划线"
          (ionFocus)="errorMessage = ''">
        </ion-input>
      </ion-item>

      @if(isSignup) {
      <ion-item [class.ion-invalid]="errorMessage && !password2">
        <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
        <ion-label position="stacked">确认密码</ion-label>
        <ion-input type="password" [(ngModel)]="password2" placeholder="请再次输入密码" (ionFocus)="errorMessage = ''">
        </ion-input>
      </ion-item>
      }

      @if(errorMessage) {
      <div class="error-message">
        {{ errorMessage }}
      </div>
      }
    </div>

    @if(type==="login"){
    <ion-button expand="block" (click)="login()">登录</ion-button>
    }
    @if(type==="signup"){
    <ion-button expand="block" (click)="signup()">注册</ion-button>
    }
  </ion-card-content>
</ion-card>