|
|
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
|
|
|
import { CommonModule } from '@angular/common';
|
|
|
import { Router, RouterModule } from '@angular/router';
|
|
|
import { FormsModule } from '@angular/forms';
|
|
|
-import { CloudUser } from '../../../lib/ncloud';
|
|
|
+import { CloudObject, CloudQuery, CloudUser } from '../../../lib/ncloud';
|
|
|
|
|
|
@Component({
|
|
|
selector: 'app-nav-pc-top-menu',
|
|
|
@@ -12,11 +12,15 @@ import { CloudUser } from '../../../lib/ncloud';
|
|
|
styleUrls: ['./nav-pc-top-menu.scss']
|
|
|
})
|
|
|
export class NavPcTopMenu implements OnInit {
|
|
|
- user: any = null;
|
|
|
+ user: CloudUser | null = null;
|
|
|
userAvatar: string | null = null;
|
|
|
userInitials: string = '';
|
|
|
+ loginError: string = '';
|
|
|
+ registerError: string = '';
|
|
|
isLoading: boolean = true;
|
|
|
showMenu: boolean = false;
|
|
|
+ loginIdentifier: string = '';
|
|
|
+ emailError: boolean = false;
|
|
|
|
|
|
// 登录注册模态框相关
|
|
|
showAuthModal: boolean = false;
|
|
|
@@ -27,6 +31,7 @@ export class NavPcTopMenu implements OnInit {
|
|
|
loginPassword: string = '';
|
|
|
rememberMe: boolean = true;
|
|
|
isLoggingIn: boolean = false;
|
|
|
+
|
|
|
|
|
|
// 注册表单
|
|
|
registerUsername: string = '';
|
|
|
@@ -40,29 +45,39 @@ export class NavPcTopMenu implements OnInit {
|
|
|
constructor(private router: Router) {}
|
|
|
|
|
|
async ngOnInit() {
|
|
|
- // 初始化CloudUser
|
|
|
- this.user = new CloudUser();
|
|
|
-
|
|
|
// 尝试获取当前用户
|
|
|
try {
|
|
|
- const currentUser = await this.user.current();//尝试获取当前登录用户
|
|
|
+ this.user = new CloudUser();
|
|
|
+ const currentUser = await this.user.current();
|
|
|
+
|
|
|
if (currentUser && this.user.id) {
|
|
|
- this.user = currentUser;//登陆状态有效，保存用户信息
|
|
|
- this.generateUserInitials();//生成头像首字母
|
|
|
+ this.user = currentUser;
|
|
|
+ this.generateUserInitials();
|
|
|
+ } else {
|
|
|
+ this.user = null;
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('获取用户信息失败:', error);
|
|
|
+ this.user = null;
|
|
|
} finally {
|
|
|
- this.isLoading = false;//关闭加载态
|
|
|
+ this.isLoading = false;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 生成用户头像首字母
|
|
|
generateUserInitials() {
|
|
|
+ if (!this.user) return;
|
|
|
+
|
|
|
const username = this.user.get('username') || '';
|
|
|
if (username.length > 0) {
|
|
|
this.userInitials = username.charAt(0).toUpperCase();
|
|
|
}
|
|
|
+
|
|
|
+ // 如果有头像URL，则设置
|
|
|
+ const avatar = this.user.get('avatar');
|
|
|
+ if (avatar && typeof avatar === 'string') {
|
|
|
+ this.userAvatar = avatar;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
toggleMenu() {
|
|
|
@@ -72,12 +87,11 @@ export class NavPcTopMenu implements OnInit {
|
|
|
openAuthModal(type: 'login' | 'register') {
|
|
|
this.authType = type;
|
|
|
this.showAuthModal = true;
|
|
|
- this.showMenu = false; // 关闭用户菜单
|
|
|
+ this.showMenu = false;
|
|
|
}
|
|
|
|
|
|
closeAuthModal() {
|
|
|
this.showAuthModal = false;
|
|
|
- // 重置表单状态
|
|
|
this.isLoggingIn = false;
|
|
|
this.isRegistering = false;
|
|
|
}
|
|
|
@@ -86,44 +100,76 @@ export class NavPcTopMenu implements OnInit {
|
|
|
this.authType = type;
|
|
|
}
|
|
|
|
|
|
- async login() {
|
|
|
- if (!this.loginUsername || !this.loginPassword) {//检验表单必填项
|
|
|
+async login() {
|
|
|
+ if (!this.loginIdentifier || !this.loginPassword) {
|
|
|
+ this.loginError = '请输入用户名/手机号/邮箱和密码';
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
- this.isLoggingIn = true; // 显示“登录中”加载态
|
|
|
+ this.isLoggingIn = true;
|
|
|
+ this.loginError = '';
|
|
|
|
|
|
try {
|
|
|
- const loggedInUser = await this.user.login(this.loginUsername, this.loginPassword);
|
|
|
- if (loggedInUser) {
|
|
|
- this.user = loggedInUser;// 保存登录后的用户信息
|
|
|
- this.generateUserInitials();// 更新头像首字母
|
|
|
- this.closeAuthModal();// 关闭模态框
|
|
|
+ const user = new CloudUser();
|
|
|
+ const loggedIn = await user.login(
|
|
|
+ this.loginIdentifier,
|
|
|
+ this.loginPassword
|
|
|
+ );
|
|
|
+
|
|
|
+ if (loggedIn) {
|
|
|
+ this.user = loggedIn;
|
|
|
+ this.generateUserInitials();
|
|
|
+ this.closeAuthModal();
|
|
|
+ } else {
|
|
|
+ this.loginError = '用户名或密码错误';
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('登录失败:', error);
|
|
|
- // 实际应用中应显示错误提示
|
|
|
+ this.loginError = '登录失败，请稍后重试';
|
|
|
} finally {
|
|
|
- this.isLoggingIn = false;// 关闭加载态
|
|
|
+ this.isLoggingIn = false;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+
|
|
|
async register() {
|
|
|
- if (!this.registerUsername || !this.registerEmail || !this.registerPassword) {
|
|
|
+ // 重置错误状态
|
|
|
+ this.registerError = '';
|
|
|
+ this.emailError = false;
|
|
|
+ // 表单验证
|
|
|
+ if (!this.registerUsername) {
|
|
|
+ alert('请输入用户名');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.registerEmail) {
|
|
|
+ alert('请输入邮箱');
|
|
|
+ return;
|
|
|
+ }else {
|
|
|
+ const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
|
|
+ if (!emailRegex.test(this.registerEmail)) {
|
|
|
+ this.emailError = true;
|
|
|
+ this.registerError = '邮箱格式不正确';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.registerPassword) {
|
|
|
+ alert('请输入密码');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (this.registerPassword !== this.registerPasswordConfirm) {
|
|
|
- // 实际应用中应显示错误提示
|
|
|
- return;// 校验密码一致
|
|
|
+ alert('两次输入的密码不一致');
|
|
|
+ return;
|
|
|
}
|
|
|
|
|
|
if (!this.acceptTerms) {
|
|
|
- // 实际应用中应显示错误提示
|
|
|
- return; // 校验协议勾选
|
|
|
+ alert('请阅读并同意用户协议和隐私政策');
|
|
|
+ return;
|
|
|
}
|
|
|
|
|
|
- this.isRegistering = true;// 显示“注册中”加载态
|
|
|
+ this.isRegistering = true;
|
|
|
|
|
|
try {
|
|
|
const additionalData = {
|
|
|
@@ -131,35 +177,46 @@ export class NavPcTopMenu implements OnInit {
|
|
|
phone: this.registerPhone
|
|
|
};
|
|
|
|
|
|
- const newUser = await this.user.signUp(
|
|
|
+ const user = new CloudUser();
|
|
|
+ const newUser = await user.signUp(
|
|
|
this.registerUsername,
|
|
|
this.registerPassword,
|
|
|
additionalData
|
|
|
);
|
|
|
|
|
|
if (newUser) {
|
|
|
- this.user = newUser;// 保存注册后的用户信息
|
|
|
- this.generateUserInitials();// 更新头像首字母
|
|
|
- this.closeAuthModal();// 关闭模态框
|
|
|
+ this.user = newUser;
|
|
|
+ this.generateUserInitials();
|
|
|
+ this.closeAuthModal();
|
|
|
+ // 注册成功后自动登录
|
|
|
+ this.loginIdentifier = this.registerUsername;
|
|
|
+ this.loginPassword = this.registerPassword;
|
|
|
+ await this.login();
|
|
|
+ } else {
|
|
|
+ this.registerError = '注册失败，请稍后重试';
|
|
|
}
|
|
|
- } catch (error) {
|
|
|
+ } catch (error: any) {
|
|
|
console.error('注册失败:', error);
|
|
|
- // 实际应用中应显示错误提示
|
|
|
+ this.registerError = error.message || '注册失败，请稍后重试';
|
|
|
} finally {
|
|
|
this.isRegistering = false;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+
|
|
|
async logout() {
|
|
|
+ if (!this.user) return;
|
|
|
+
|
|
|
try {
|
|
|
- await this.user.logout();// 调用后端退出接口
|
|
|
- this.user = null; // 清除前端用户信息
|
|
|
+ await this.user.logout();
|
|
|
+ this.user = null;
|
|
|
this.userAvatar = null;
|
|
|
this.userInitials = '';
|
|
|
- this.showMenu = false; // 关闭用户菜单
|
|
|
- this.router.navigate(['/home']); // 跳转到首页
|
|
|
+ this.showMenu = false;
|
|
|
+ this.router.navigate(['/home']);
|
|
|
} catch (error) {
|
|
|
console.error('退出登录失败:', error);
|
|
|
+ alert('退出登录失败: ' + (error instanceof Error ? error.message : '未知错误'));
|
|
|
}
|
|
|
}
|
|
|
}
|
0235624