modal-user-login.component.ts 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. import { Input, OnInit } from '@angular/core';
  2. import { Component } from '@angular/core';
  3. import { IonButtons, IonIcon, IonText, ModalController } from '@ionic/angular/standalone';
  4. import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCol, IonContent, IonHeader, IonInput, IonItem, IonLabel, IonRow, IonTitle, IonToolbar } from '@ionic/angular/standalone';
  5. import { addIcons } from 'ionicons';
  6. import { arrowBack, arrowBackOutline, chevronBack } from 'ionicons/icons';
  7. import { CloudUser } from 'src/lib/ncloud';
  8. @Component({
  9. selector: 'app-modal-user-login',
  10. templateUrl: './modal-user-login.component.html',
  11. styleUrls: ['./modal-user-login.component.scss'],
  12. standalone: true,
  13. imports:[IonLabel,IonCol,IonRow,IonButton,IonInput,IonItem,IonCardContent,IonCardSubtitle,IonCardTitle,IonCardHeader,IonContent,IonTitle,IonCard,IonToolbar,IonHeader,IonIcon,IonButtons
  14. ,IonText
  15. ]
  16. })
  17. export class ModalUserLoginComponent implements OnInit {
  18. @Input() type: "login" | "signup" = "login"; // 登录或注册状态
  19. username: string = ""; // 用户名
  20. password: string = ""; // 密码
  21. password2: string = ""; // 确认密码
  22. constructor(private modalCtrl: ModalController) {
  23. addIcons({chevronBack,arrowBack});
  24. }
  25. ngOnInit() {}
  26. // 输入框值变化
  27. usernameChange(ev: any) {
  28. this.username = ev?.detail?.value || '';
  29. }
  30. passwordChange(ev: any) {
  31. this.password = ev?.detail?.value || '';
  32. }
  33. password2Change(ev: any) {
  34. this.password2 = ev?.detail?.value || '';
  35. }
  36. // 登录功能
  37. async login() {
  38. if (!this.username || !this.password) {
  39. console.log("请输入完整");
  40. return;
  41. }
  42. const user = new CloudUser();
  43. const result = await user.login(this.username, this.password);
  44. if (result?.id) {
  45. this.modalCtrl.dismiss(result, "confirm");
  46. } else {
  47. console.log("登录失败");
  48. }
  49. }
  50. // 注册功能
  51. async signup() {
  52. if (!this.username || !this.password || !this.password2) {
  53. console.log("请输入完整");
  54. return;
  55. }
  56. if (this.password !== this.password2) {
  57. console.log("两次密码不符,请修改");
  58. return;
  59. }
  60. const user = new CloudUser();
  61. const result = await user.signUp(this.username, this.password);
  62. if (result) {
  63. this.type = "login";
  64. console.log("注册成功,请登录");
  65. }
  66. }
  67. // 切换登录/注册
  68. toggleType() {
  69. this.type = this.type === 'login' ? 'signup' : 'login';
  70. }
  71. dismissModal() {
  72. this.modalCtrl.dismiss();
  73. }
  74. }
  75. export async function openUserLoginModal(modalCtrl: ModalController, type: "login" | "signup" = "login"): Promise<CloudUser | null> {
  76. const modal = await modalCtrl.create({
  77. component: ModalUserLoginComponent,
  78. componentProps: { type }
  79. });
  80. await modal.present();
  81. const { data, role } = await modal.onWillDismiss();
  82. if (role === 'confirm') {
  83. return data;
  84. }
  85. return null;
  86. }