feat:signup

myapp/src/lib/user/modal-user-register/modal-user-register.component.html

@@ -0,0 +1,21 @@
+<ion-content class="ion-padding">
+  <h2>注册新用户</h2>
+
+  <ion-input
+    label="用户名"
+    labelPlacement="stacked"
+    [(ngModel)]="username"
+    placeholder="请输入用户名">
+  </ion-input>
+
+  <ion-input
+    label="密码"
+    labelPlacement="stacked"
+    [(ngModel)]="password"
+    placeholder="请输入密码"
+    type="password">
+  </ion-input>
+
+  <ion-button expand="block" (click)="register()">注册</ion-button>
+  <ion-button expand="block" color="medium" (click)="close()">取消</ion-button>
+</ion-content>

myapp/src/lib/user/modal-user-register/modal-user-register.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ModalUserRegisterComponent } from './modal-user-register.component';
+
+describe('ModalUserRegisterComponent', () => {
+  let component: ModalUserRegisterComponent;
+  let fixture: ComponentFixture<ModalUserRegisterComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ModalUserRegisterComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ModalUserRegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

myapp/src/lib/user/modal-user-register/modal-user-register.component.ts

@@ -0,0 +1,65 @@
+import { Component } from '@angular/core';
+import { AlertController, ModalController, IonicModule } from '@ionic/angular';
+import { CloudUser } from 'src/lib/ncloud';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-modal-user-register',
+  standalone: true,
+  templateUrl: './modal-user-register.component.html',
+  styleUrls: ['./modal-user-register.component.scss'],
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule
+  ]
+})
+export class ModalUserRegisterComponent {
+  username = '';
+  password = '';
+
+  constructor(
+    private modalCtrl: ModalController,
+    private alertCtrl: AlertController
+  ) {}
+
+  async register() {
+    if (!this.username || !this.password) {
+      const alert = await this.alertCtrl.create({
+        header: '错误',
+        message: '请输入用户名和密码',
+        buttons: ['确定']
+      });
+      await alert.present();
+      return;
+    }
+
+    try {
+      const user: any = new CloudUser();
+      user.set('username', this.username);
+      user.set('password', this.password);
+      const signedUpUser = await user.signUp();
+
+      const alert = await this.alertCtrl.create({
+        header: '注册成功',
+        message: '欢迎你！',
+        buttons: ['确定']
+      });
+      await alert.present();
+
+      this.modalCtrl.dismiss({ user: signedUpUser }, 'success');
+    } catch (error: any) {
+      const alert = await this.alertCtrl.create({
+        header: '注册失败',
+        message: error.message || '注册过程中发生错误',
+        buttons: ['确定']
+      });
+      await alert.present();
+    }
+  }
+
+  close() {
+    this.modalCtrl.dismiss(null, 'cancel');
+  }
+}

myapp/src/lib/user/page-mine/page-mine.component.html

@@ -54,6 +54,7 @@
         <ion-button class="btn-primary" expand="block" (click)="login()">
           登录
         </ion-button>
+        <ion-button expand="block" color="secondary" (click)="openRegisterModal()">注册</ion-button>
       </div>
       }
     </div>

myapp/src/lib/user/page-mine/page-mine.component.ts

@@ -15,6 +15,7 @@ import { IonAvatar,
 import { ModalUserEditComponent } from '../modal-user-edit/modal-user-edit.component';
 import { FormsModule } from '@angular/forms';
 import { CloudUser } from 'src/lib/ncloud';
+import { ModalUserRegisterComponent } from '../modal-user-register/modal-user-register.component';
 
 @Component({
   selector: 'app-page-mine',
@@ -91,6 +92,19 @@ export class PageMineComponent implements OnInit {
     }
   }
 
+  async openRegisterModal() {
+  const modal = await this.modalCtrl.create({
+    component: ModalUserRegisterComponent
+  });
+  await modal.present();
+
+  const { data, role } = await modal.onWillDismiss();
+  if (role === 'success') {
+    this.currentUser = data.user;
+  }
+}
+
+
   logout() {
     this.currentUser?.logout();
     this.currentUser = undefined;