update UI to allow renaming

gfxcc · Jan 22, 2024 · aded6f7 · aded6f7
1 parent a35074f
commit aded6f7
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 39 deletions.
diff --git a/front-end/src/app/account-management/signin/signin.component.ts b/front-end/src/app/account-management/signin/signin.component.ts
@@ -4,7 +4,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatStepper } from '@angular/material/stepper';
 import { Router } from '@angular/router';
-import { SendVerificationCodeRequest, SignInRequest, UpdatePasswordRequest, User, VerifyEmailRequest, VerifyEmailResponse } from "../../../proto/san11-platform.pb";
+import { Empty, SendVerificationCodeRequest, SignInRequest, UpdatePasswordRequest, User, VerifyEmailRequest, VerifyEmailResponse } from "../../../proto/san11-platform.pb";
 import { NotificationService } from "../../common/notification.service";
 import { San11PlatformServiceService } from '../../service/san11-platform-service.service';
 import { saveUser } from '../../utils/user_util';
@@ -90,13 +90,12 @@ export class SigninComponent implements OnInit {
   //
 
   onSignIn(input) {
-// signInForm.value
+    // signInForm.value
     this.san11PlatformServiceService.signIn(new SignInRequest({
       identity: input.identity,
       password: input.password
     })).subscribe(
       resp => {
-
         this.notificationService.success('登陆成功');
 
         localStorage.setItem('sid', resp.sid);
@@ -121,19 +120,6 @@ export class SigninComponent implements OnInit {
       this.onResendVerificationCodeClick();
     }
     stepper.next();
-    // this.san11PlatformServiceService.getUser(new GetUserRequest({ username: this.username.value })).subscribe(
-    //   (user: User) => {
-    //     this.user = user;
-    //     if (user.email != this.email.value) {
-    //       this.notificationService.warn('邮箱与用户名不符');
-    //     } else {
-    //       if (this.timeToResend === undefined) {
-    //         this.onResendVerificationCodeClick();
-    //       }
-    //       stepper.next();
-    //     }
-    //   }
-    // );
   }
 
   onResendVerificationCodeClick() {
@@ -188,14 +174,14 @@ export class SigninComponent implements OnInit {
       name: this.user.name,
       password: this.password.value,
       verificationCode: this.verificationCode.value
-    })).subscribe(
-      resp => {
+    })).subscribe({
+      next: (resp: Empty) => {
         this.notificationService.success('密码更新成功');
         this.selectedTabIndex = 0;
       },
-      error => {
-        this.notificationService.warn(`更新失败: ${error.statusMessage}`);
+      error: error => {
+        this.notificationService.warn(`密码更新失败: ${error.statusMessage}`)
       }
-    );
+    });
   }
 }
diff --git a/front-end/src/app/settings/account-info/account-info.component.html b/front-end/src/app/settings/account-info/account-info.component.html
@@ -79,9 +79,9 @@
             <mat-step state="check" *ngIf="iAmTheUser()">
                 <ng-template matStepLabel>3. 完成更新</ng-template>
 
-                <p *ngIf="this.updatedUser.username">新用户名: {{this.updatedUser.username}}</p>
-                <p *ngIf="this.updatedUser.email">新邮箱: {{this.updatedUser.email}}</p>
-                <p *ngIf="password.value != this.PASSWORD_PLACEHOLDER">更新密码</p>
+                <p *ngIf="this.updatedUser.username" style="color:var(--primary-color)">* 新用户名: {{this.updatedUser.username}}</p>
+                <p *ngIf="this.updatedUser.email" style="color:var(--primary-color)">* 新邮箱: {{this.updatedUser.email}}</p>
+                <p *ngIf="password.value != this.PASSWORD_PLACEHOLDER" style="color:var(--primary-color)">* 更新密码</p>
 
                 <button mat-button matStepperPrevious>上一步</button>
                 <button mat-raised-button color="primary" (click)="onUpdateUser()">更新</button>

diff --git a/front-end/src/app/settings/account-info/account-info.component.ts b/front-end/src/app/settings/account-info/account-info.component.ts
@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatStepper } from '@angular/material/stepper';
 import { ActivatedRoute, Router } from '@angular/router';
+import { saveUser } from 'src/app/utils/user_util';
 import { FieldMask, SendVerificationCodeRequest, UpdatePasswordRequest, UpdateUserRequest, User, VerifyEmailRequest, VerifyEmailResponse } from '../../../proto/san11-platform.pb';
 import { NewUserValidators } from "../../account-management/common/new-user-validator";
 import { NotificationService } from '../../common/notification.service';
@@ -146,7 +147,7 @@ export class AccountInfoComponent implements OnInit {
       this.onResendVerificationCodeClick();
     }
   }
-  
+
   prepareUpdateUser() {
     this.updatedUser.userId = this.user.userId;
     this.updatedUser.name = `users/${this.user.userId}`;
@@ -169,32 +170,38 @@ export class AccountInfoComponent implements OnInit {
         updateMask: new FieldMask({
           paths: paths
         })
-      })).subscribe(
-        (resp: User) => {
-          this.notificationService.success('更新成功');
-          this.router.navigate(['categories/1']);
+      })).subscribe({
+        next: (resp: User) => {
+          saveUser(resp);
+          this.notificationService.success('更新成功 2s后刷新页面');
+
+          // refresh page in 2s
+          setTimeout(() => {
+            this.router.navigate(['/']).then(() => {
+              window.location.reload();
+            });
+          }, 2000);
         },
-        error => {
+        error: error => {
           this.notificationService.warn(`更新失败: ${error.statusMessage}`);
         }
-      );
+      });
     }
+
     if (this.password.value != this.PASSWORD_PLACEHOLDER) {
       this.san11pkService.updatePassword(new UpdatePasswordRequest({
         name: this.user.name,
         password: this.password.value,
         verificationCode: this.verificationCode.value,
-      })).subscribe(
-        empty => {
-          this.notificationService.success('更新密码 成功');
+      })).subscribe({
+        next: (resp: User) => {
+          this.notificationService.success('更新成功');
           this.router.navigate(['categories/1']);
         },
-        error => {
-          this.notificationService.warn('更新密码 失败:' + error.statusMessage);
+        error: error => {
+          this.notificationService.warn(`更新失败: ${error.statusMessage}`);
         }
-      );
+      });
     }
-
   }
-
 }
diff --git a/front-end/src/app/shared/components/header/header.component.ts b/front-end/src/app/shared/components/header/header.component.ts
@@ -39,6 +39,7 @@ export class HeaderComponent implements OnInit {
   ngOnInit(): void {
     if (signedIn()) {
       this.user = loadUser();
+      console.log(this.user);
       this.loadNotifications();
     }
   }

diff --git a/front-end/src/styles.css b/front-end/src/styles.css
@@ -1,5 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 :root {
+    --primary-color: #3f51b5;
     --accent-color: rgb(204, 0, 0);
     --lightest-gray: rgb(244, 244, 244);
     --light-gray: rgb(144, 144, 144);