s202226701003/AiStudy-app/src/app/tab3/tab3.page.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { 
  IonHeader, 
  IonToolbar, 
  IonTitle, 
  IonContent,
  IonCard,
  IonCardHeader,
  IonCardContent,
  IonItem,
  IonAvatar,
  IonLabel,
  IonButton,
  IonIcon,
  IonList,
  IonListHeader,
  IonBadge,
  IonInput,
  AlertController
} from '@ionic/angular/standalone';
import { NgIf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { addIcons } from 'ionicons';
import { 
  personOutline,
  createOutline,
  trophyOutline,
  timeOutline,
  cardOutline,
  bookOutline,
  receiptOutline,
  notificationsOutline,
  lockClosedOutline,
  informationCircleOutline,
  chevronForward,
  mailOutline,
  keyOutline,
  settingsOutline,
  starOutline
} from 'ionicons/icons';
import Parse from 'parse';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss'],
  standalone: true,
  imports: [
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonCard,
    IonCardHeader,
    IonCardContent,
    IonItem,
    IonAvatar,
    IonLabel,
    IonButton,
    IonIcon,
    IonList,
    IonListHeader,
    IonBadge,
    IonInput,
    NgIf,
    FormsModule
  ]
})
export class Tab3Page implements OnInit {
  isLoggedIn: boolean = false;
  userAvatar: string = 'assets/default-avatar.png';
  userName: string = '';
  userLevel: string = 'LV.1 新手学习者';
  achievementCount: number = 0;
  
  // 登录表单数据
  loginData = {
    username: '',
    password: ''
  };

  // 注册表单数据
  registerData = {
    username: '',
    email: '',
    password: '',
    confirmPassword: ''
  };

  // 是否显示注册表单
  showRegisterForm: boolean = false;
  
  constructor(
    private router: Router,
    private alertController: AlertController
  ) {
    addIcons({
      personOutline,
      createOutline,
      trophyOutline,
      timeOutline,
      cardOutline,
      bookOutline,
      receiptOutline,
      notificationsOutline,
      lockClosedOutline,
      informationCircleOutline,
      chevronForward,
      mailOutline,
      keyOutline,
      settingsOutline,
      starOutline
    });
  }

  ngOnInit() {
    // 检查是否已登录
    const currentUser = Parse.User.current();
    if (currentUser) {
      this.isLoggedIn = true;
      this.userName = currentUser.get('username');
      this.userAvatar = currentUser.get('avatar') || 'assets/default-avatar.png';
    }
  }

  // 切换注册/登录表单
  toggleForm() {
    this.showRegisterForm = !this.showRegisterForm;
  }

  // 处理登录
  async handleLogin() {
    try {
      // 基本的输入验证
      if (!this.loginData.username || !this.loginData.password) {
        const alert = await this.alertController.create({
          header: '提示',
          message: '请输入用户名和密码',
          buttons: ['确定']
        });
        await alert.present();
        return;
      }

      // 执行登录
      const user = await Parse.User.logIn(this.loginData.username, this.loginData.password);
      
      // 更新界面状态
      this.isLoggedIn = true;
      this.userName = user.get('username');
      this.userLevel = user.get('level') || 'LV.1 新手学习者';
      this.userAvatar = user.get('avatar') || 'assets/default-avatar.png';
      
      // 显示登录成功提示
      const alert = await this.alertController.create({
        header: '成功',
        message: '登录成功！',
        buttons: ['确定']
      });
      await alert.present();
      
    } catch (error: any) {
      console.error('登录错误:', error);
      let errorMessage = '登录失败，请稍后重试';
      if (error.code === 101) {
        errorMessage = '用户名或密码错误';
      }

      const alert = await this.alertController.create({
        header: '错误',
        message: errorMessage,
        buttons: ['确定']
      });
      await alert.present();
    }
  }

  // 处理注册
  async handleRegister() {
    try {
      // 基本的输入验证
      if (!this.registerData.username || !this.registerData.email || !this.registerData.password) {
        const alert = await this.alertController.create({
          header: '提示',
          message: '请填写所有必填字段',
          buttons: ['确定']
        });
        await alert.present();
        return;
      }

      // 验证邮箱格式
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(this.registerData.email)) {
        const alert = await this.alertController.create({
          header: '错误',
          message: '请输入正确的邮箱格式',
          buttons: ['确定']
        });
        await alert.present();
        return;
      }

      // 验证密码是否匹配
      if (this.registerData.password !== this.registerData.confirmPassword) {
        const alert = await this.alertController.create({
          header: '错误',
          message: '两次输入的密码不一致',
          buttons: ['确定']
        });
        await alert.present();
        return;
      }

      // 验证密码长度
      if (this.registerData.password.length < 6) {
        const alert = await this.alertController.create({
          header: '错误',
          message: '密码长度至少为6位',
          buttons: ['确定']
        });
        await alert.present();
        return;
      }

      // 验证用户名长度
      if (this.registerData.username.length < 3) {
        const alert = await this.alertController.create({
          header: '错误',
          message: '用户名长度至少为3位',
          buttons: ['确定']
        });
        await alert.present();
        return;
      }

      // 创建新用户
      const user = new Parse.User();
      user.set('username', this.registerData.username.trim());
      user.set('email', this.registerData.email.trim().toLowerCase());
      user.set('password', this.registerData.password);
      
      // 设置初始用户信息
      user.set('level', 'LV.1 新手学习者');
      user.set('avatar', 'assets/default-avatar.png');
      user.set('achievementCount', 0);
      user.set('learningDays', 0);
      user.set('completionRate', 0);

      await user.signUp();

      // 注册成功后自动登录
      this.isLoggedIn = true;
      this.userName = user.get('username');
      this.userLevel = user.get('level');
      this.userAvatar = user.get('avatar');

      // 注册成功提示
      const alert = await this.alertController.create({
        header: '成功',
        message: '注册成功！',
        buttons: ['确定']
      });
      await alert.present();

    } catch (error: any) {
      console.error('注册错误:', error);
      let errorMessage = '注册失败，请稍后重试';
      
      // 处理常见错误
      switch(error.code) {
        case 202:
          errorMessage = '用户名已存在';
          break;
        case 203:
          errorMessage = '邮箱已被使用';
          break;
        case 125:
          errorMessage = '邮箱格式不正确';
          break;
        case 201:
          errorMessage = '密码不能为空';
          break;
        default:
          if (error.message.includes('Email')) {
            errorMessage = '请输入正确的邮箱格式';
          }
      }

      const alert = await this.alertController.create({
        header: '错误',
        message: errorMessage,
        buttons: ['确定']
      });
      await alert.present();
    }
  }

  // 编辑个人资料
  editProfile() {
    this.navigateTo('profile');
  }

  // 导航到指定页面
  navigateTo(page: string) {
    this.router.navigate([`/tabs/tab3/${page}`]);
  }

  // 退出登录
  async logout() {
    const alert = await this.alertController.create({
      header: '确认退出',
      message: '您确定要退出登录吗？',
      buttons: [
        {
          text: '取消',
          role: 'cancel'
        },
        {
          text: '确定',
          handler: async () => {
            try {
              await Parse.User.logOut();
              this.isLoggedIn = false;
              this.userName = '';
              this.userAvatar = 'assets/default-avatar.png';
            } catch (error) {
              console.error('退出登录失败:', error);
            }
          }
        }
      ]
    });

    await alert.present();
  }
}