29

src/lib/user/modal-user-edit/modal-user-edit.component.html

@@ -1,29 +1,50 @@
-<!-- 用户登录状态 -->
-<ion-card>
-  <ion-card-header>
-    <ion-card-title>
-      用户名：{{currentUser?.get("username")}}
-    </ion-card-title>
-    <ion-card-subtitle>请输入您的详细资料</ion-card-subtitle>
-   </ion-card-header>
- <ion-card-content>
+<ion-header>
+  <ion-toolbar>
+    <ion-title>编辑资料</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="cancel()">取消</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
 
-   <ion-item>
-     <ion-input [value]="userData['realname']" (ionChange)="userDataChange('realname',$event)" label="姓名" placeholder="请您输入真实姓名"></ion-input>
-   </ion-item>
-   <ion-item>
-     <ion-input type="number" [value]="userData['age']" (ionChange)="userDataChange('age',$event)" label="年龄" placeholder="请您输入年龄"></ion-input>
+<ion-content class="ion-padding">
+  <ion-list *ngIf="!isLoading">
+    <ion-item>
+      <ion-label position="stacked">昵称</ion-label>
+      <ion-input
+        type="text"
+        [value]="userData['nickname']"
+        (ionChange)="userDataChange('nickname', $event)"
+        placeholder="请输入昵称">
+      </ion-input>
     </ion-item>
-  <ion-item>
-     <ion-input [value]="userData['gender']" (ionChange)="userDataChange('gender',$event)" label="性别" placeholder="请您输入男/女"></ion-input>
+
+    <ion-item>
+      <ion-label position="stacked">年龄</ion-label>
+      <ion-input
+        type="number"
+        [value]="userData['age']"
+        (ionChange)="userDataChange('age', $event)"
+        placeholder="请输入年龄">
+      </ion-input>
     </ion-item>
+
     <ion-item>
-      <ion-input [value]="userData['avatar']" (ionChange)="userDataChange('avatar',$event)" label="头像" placeholder="请您输入头像地址(地址错误则会显示默认头像)"></ion-input>
-     </ion-item>
+      <ion-label position="stacked">简介</ion-label>
+      <ion-textarea
+        [value]="userData['bio']"
+        (ionChange)="userDataChange('bio', $event)"
+        placeholder="请输入个人简介"
+        rows="4">
+      </ion-textarea>
+    </ion-item>
+  </ion-list>
 
-   <ion-button expand="block" (click)="save()">保存</ion-button>
-   <ion-button expand="block" (click)="cancel()">取消</ion-button>
- 
+  <div class="ion-padding">
+    <ion-button expand="block" (click)="save()" [disabled]="isLoading">
+      保存
+    </ion-button>
+  </div>
 
-</ion-card-content>
-</ion-card>
+  <ion-spinner *ngIf="isLoading" class="ion-margin-auto"></ion-spinner>
+</ion-content>

src/lib/user/modal-user-edit/modal-user-edit.component.ts

@@ -1,11 +1,11 @@
 import { Component, OnInit } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, 
-         IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, IonInput, 
-         IonItem, IonSegment, IonSegmentButton, IonLabel } from '@ionic/angular/standalone';
-import { ModalController } from '@ionic/angular/standalone';
-import { CloudUser } from '../../ncloud';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButtons, IonButton,
+         IonList, IonItem, IonLabel, IonInput, IonTextarea, 
+         IonSpinner } from '@ionic/angular/standalone';
+import { ModalController, AlertController } from '@ionic/angular/standalone';
+import { CloudUser } from '../../../lib/ncloud';
 
 @Component({
   selector: 'app-modal-user-edit',
@@ -19,55 +19,92 @@ import { FormsModule } from '@angular/forms';
     IonToolbar,
     IonTitle,
     IonContent,
-    IonCard,
-    IonCardContent,
+    IonButtons,
     IonButton,
-    IonCardHeader,
-    IonCardTitle,
-    IonCardSubtitle,
-    IonInput,
+    IonList,
     IonItem,
-    IonSegment,
-    IonSegmentButton,
-    IonLabel
+    IonLabel,
+    IonInput,
+    IonTextarea,
+    IonSpinner
   ]
 })
-export class ModalUserEditComponent  implements OnInit {
+export class ModalUserEditComponent implements OnInit {
+  currentUser: CloudUser;
+  userData: Record<string, any> = {};
+  isLoading = true;
+
+  constructor(
+    private modalCtrl: ModalController,
+    private alertCtrl: AlertController
+  ) {
+    this.currentUser = new CloudUser();
+  }
+
+  async ngOnInit() {
+    await this.initUserData();
+  }
 
-  currentUser:CloudUser|undefined
-  userData:any = {}
-  userDataChange(key:string,ev:any){
-    let value = ev?.detail?.value
-    if(value){
-      this.userData[key] = value
+  private async initUserData() {
+    try {
+      const user = await this.currentUser.current();
+      if (!user) {
+        this.modalCtrl.dismiss(null, 'not_logged_in');
+        return;
+      }
+      this.userData = { ...this.currentUser.data };
+    } catch (error) {
+      console.error('Failed to init user data:', error);
+      await this.showAlert('错误', '获取用户数据失败');
+      this.modalCtrl.dismiss(null, 'error');
+    } finally {
+      this.isLoading = false;
     }
   }
-  constructor(private modalCtrl:ModalController) { 
-    this.currentUser = new CloudUser();
-    this.userData = this.currentUser.data;
+
+  userDataChange(key: string, ev: CustomEvent) {
+    const value = ev.detail?.value;
+    if (value !== undefined) {
+      this.userData[key] = value;
+    }
   }
 
-  ngOnInit() {}
+  async save() {
+    try {
+      if (!this.currentUser) {
+        throw new Error('用户未登录');
+      }
 
-  async save(){
-    Object.keys(this.userData).forEach(key=>{
-      if(key=="age"){
-        this.userData[key] = Number(this.userData[key])
+      const processedData = { ...this.userData };
+      if (processedData['age']) {
+        processedData['age'] = Number(processedData['age']);
       }
-    })
 
-    this.currentUser?.set(this.userData)
-    await this.currentUser?.save()
-    this.modalCtrl.dismiss(this.currentUser,"confirm")
+      this.currentUser.set(processedData);
+      await this.currentUser.save();
+      this.modalCtrl.dismiss(this.currentUser, 'confirm');
+    } catch (error: any) {
+      console.error('Save failed:', error);
+      await this.showAlert('保存失败', error.message || '请稍后重试');
+    }
+  }
+
+  cancel() {
+    this.modalCtrl.dismiss(null, 'cancel');
   }
-  cancel(){
-    this.modalCtrl.dismiss(null,"cancel")
 
+  private async showAlert(header: string, message: string) {
+    const alert = await this.alertCtrl.create({
+      header,
+      message,
+      buttons: ['确定']
+    });
+    await alert.present();
   }
 }
 
-export async function openUserEditModal(modalController: ModalController) {
-  const modal = await modalController.create({
+export async function openUserEditModal(modalCtrl: ModalController) {
+  const modal = await modalCtrl.create({
     component: ModalUserEditComponent
   });
   await modal.present();

src/lib/user/modal-user-login/modal-user-login.component.html

@@ -1,49 +1,37 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>{{ type === 'login' ? '登录' : '注册' }}</ion-title>
+    <ion-title>{{ isSignup ? '注册' : '登录' }}</ion-title>
     <ion-buttons slot="end">
-      <ion-button (click)="dismiss()">取消</ion-button>
+      <ion-button (click)="cancel()">取消</ion-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
 <ion-content class="ion-padding">
-  <ion-segment [(ngModel)]="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-item>
-    <ion-label position="stacked">用户名</ion-label>
-    <ion-input [(ngModel)]="username" type="text"></ion-input>
-  </ion-item>
-
-  <ion-item>
-    <ion-label position="stacked">密码</ion-label>
-    <ion-input [(ngModel)]="password" type="password"></ion-input>
-  </ion-item>
-
-  @if (type === 'signup') {
+  <ion-list>
     <ion-item>
-      <ion-label position="stacked">确认密码</ion-label>
-      <ion-input [(ngModel)]="password2" type="password"></ion-input>
+      <ion-label position="stacked">用户名</ion-label>
+      <ion-input type="text" [(ngModel)]="username" placeholder="请输入用户名"></ion-input>
     </ion-item>
 
     <ion-item>
-      <ion-label position="stacked">邮箱（可选）</ion-label>
-      <ion-input [(ngModel)]="email" type="email"></ion-input>
+      <ion-label position="stacked">密码</ion-label>
+      <ion-input type="password" [(ngModel)]="password" placeholder="请输入密码"></ion-input>
     </ion-item>
-  }
+
+    <ion-item *ngIf="isSignup">
+      <ion-label position="stacked">邮箱</ion-label>
+      <ion-input type="email" [(ngModel)]="email" placeholder="请输入邮箱"></ion-input>
+    </ion-item>
+  </ion-list>
 
   <div class="ion-padding">
-    @if (type === 'login') {
-      <ion-button expand="block" (click)="login()">登录</ion-button>
-    } @else {
-      <ion-button expand="block" (click)="signup()">注册</ion-button>
-    }
+    <ion-button expand="block" (click)="isSignup ? signup() : login()">
+      {{ isSignup ? '注册' : '登录' }}
+    </ion-button>
+
+    <ion-button expand="block" fill="clear" (click)="toggleMode()">
+      {{ isSignup ? '已有账号？去登录' : '没有账号？去注册' }}
+    </ion-button>
   </div>
 </ion-content>

src/lib/user/modal-user-login/modal-user-login.component.ts

@@ -1,11 +1,18 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, 
-         IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, IonInput, 
-         IonItem, IonSegment, IonSegmentButton, IonLabel, IonButtons } from '@ionic/angular/standalone';
-import { ModalController, AlertController } from '@ionic/angular/standalone';
-import { CloudUser } from '../../ncloud';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButtons, IonButton,
+         IonList, IonItem, IonLabel, IonInput } from '@ionic/angular/standalone';
+import { ModalController, AlertController } from '@ionic/angular/standalone';
+import { CloudUser } from '../../../lib/ncloud';
+
+export async function openUserLoginModal(modalCtrl: ModalController) {
+  const modal = await modalCtrl.create({
+    component: ModalUserLoginComponent
+  });
+  await modal.present();
+  return modal.onDidDismiss();
+}
 
 @Component({
   selector: 'app-modal-user-login',
@@ -15,52 +22,40 @@ import { FormsModule } from '@angular/forms';
   imports: [
     CommonModule,
     FormsModule,
-    IonHeader, IonToolbar, IonTitle, IonContent, IonCard, 
-    IonCardContent, IonButton, IonCardHeader, IonCardTitle, 
-    IonCardSubtitle, IonInput, IonItem, IonSegment, 
-    IonSegmentButton, IonLabel,
-    IonButtons
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonButtons,
+    IonButton,
+    IonList,
+    IonItem,
+    IonLabel,
+    IonInput
   ]
 })
 export class ModalUserLoginComponent {
-  type: string = 'login';
-  username: string = '';
-  password: string = '';
-  password2: string = '';
-  email: string = '';
+  username = '';
+  password = '';
+  isSignup = false;
+  email = '';
 
   constructor(
     private modalCtrl: ModalController,
-    private alertController: AlertController
+    private alertCtrl: AlertController
   ) {}
 
-  async showAlert(header: string, message: string) {
-    const alert = await this.alertController.create({
-      header,
-      message,
-      buttons: ['确定']
-    });
-    await alert.present();
-  }
-
-  typeChange(ev: any) {
-    this.type = ev.detail.value;
-    // 切换时清空表单
-    this.username = '';
-    this.password = '';
-    this.password2 = '';
-    this.email = '';
-  }
-
   async login() {
-    if (!this.username || !this.password) {
-      await this.showAlert('错误', '请输入用户名和密码');
-      return;
-    }
-
     try {
+      if (!this.username.trim()) {
+        throw new Error('用户名不能为空');
+      }
+      if (!this.password) {
+        throw new Error('密码不能为空');
+      }
+
       const user = new CloudUser();
-      await user.logIn(this.username, this.password);
+      await user.logIn(this.username.trim(), this.password);
       this.modalCtrl.dismiss({ data: user, role: 'confirm' });
     } catch (error: any) {
       await this.showAlert('登录失败', error.message || '请检查用户名和密码');
@@ -68,40 +63,41 @@ export class ModalUserLoginComponent {
   }
 
   async signup() {
-    if (!this.username || !this.password || !this.password2) {
-      await this.showAlert('错误', '请填写所有必填字段');
-      return;
-    }
-
-    if (this.password !== this.password2) {
-      await this.showAlert('错误', '两次输入的密码不一致');
-      return;
-    }
-
-    if (this.password.length < 6) {
-      await this.showAlert('错误', '密码长度至少6位');
-      return;
-    }
-
     try {
+      if (!this.username.trim()) {
+        throw new Error('用户名不能为空');
+      }
+      if (!this.password) {
+        throw new Error('密码不能为空');
+      }
+      if (!this.email.trim()) {
+        throw new Error('邮箱不能为空');
+      }
+
       const user = new CloudUser();
-      const additionalData = this.email ? { email: this.email } : {};
-      await user.signUp(this.username, this.password, additionalData);
+      await user.signUp(this.username.trim(), this.password, {
+        email: this.email.trim()
+      });
       this.modalCtrl.dismiss({ data: user, role: 'confirm' });
     } catch (error: any) {
       await this.showAlert('注册失败', error.message || '注册失败，请稍后重试');
     }
   }
 
-  dismiss() {
+  cancel() {
     this.modalCtrl.dismiss(null, 'cancel');
   }
-}
 
-export async function openUserLoginModal(modalController: ModalController) {
-  const modal = await modalController.create({
-    component: ModalUserLoginComponent
-  });
-  await modal.present();
-  return modal.onDidDismiss();
+  toggleMode() {
+    this.isSignup = !this.isSignup;
+  }
+
+  private async showAlert(header: string, message: string) {
+    const alert = await this.alertCtrl.create({
+      header,
+      message,
+      buttons: ['确定']
+    });
+    await alert.present();
+  }
 }