ai-interview/src/app/interviewee-auth/auth.html

<!-- auth.component.html -->
<div class="auth-container">
  <!-- 装饰元素 -->
  <div class="decorator decorator-1"></div>
  <div class="decorator decorator-2"></div>
  
  <div class="auth-header">
    <h1 class="auth-title">{{ isLoginMode() ? '用户登录' : '用户注册' }}</h1>
    <p class="auth-subtitle">{{ isLoginMode() ? '欢迎回到未来世界' : '加入我们的科技社区' }}</p>
  </div>

  <!-- 错误消息 -->
  @if (errorMessage()) {
    <div class="message error-message">
      {{ errorMessage() }}
    </div>
  }

  <!-- 成功消息 -->
  @if (successMessage()) {
    <div class="message success-message">
      {{ successMessage() }}
    </div>
  }

  <form class="auth-form" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label class="form-label" for="username">用户名</label>
      <input 
        class="form-input" 
        id="username" 
        type="text" 
        [(ngModel)]="username" 
        name="username" 
        required
        placeholder="输入您的用户名"
      >
    </div>

    <div class="form-group">
      <label class="form-label" for="password">密码</label>
      <input 
        class="form-input" 
        id="password" 
        type="password" 
        [(ngModel)]="password" 
        name="password" 
        required
        placeholder="输入您的密码"
      >
      @if (!isLoginMode()) {
        <small style="color: #94a3b8; font-size: 0.8rem;">密码长度必须大于8个字符</small>
      }
    </div>

    <button class="submit-btn" type="submit">
      {{ isLoginMode() ? '登录' : '注册' }}
    </button>
  </form>

  <div class="mode-toggle">
    {{ isLoginMode() ? '没有账号?' : '已有账号?' }}
    <a class="toggle-link" (click)="toggleMode()">
      {{ isLoginMode() ? '立即注册' : '立即登录' }}
    </a>
  </div>
</div>