feat: improve profile experience for end users

proxy.conf.json

@@ -1,6 +1,6 @@
 {
   "/api": {
-    "target": "http://127.0.0.1:8080",
+    "target": "http://localhost:8080",
     "secure": false,
     "changeOrigin": true
   }

src/app/app.routes.ts

@@ -8,6 +8,10 @@ import { WorkspaceMembersComponent } from './components/workspace-members/worksp
 export const routes: Routes = [
   { path: 'login', component: Login },
   { path: 'signup', component: Login },
+  {
+    path: 'reset-password/:token',
+    loadComponent: () => import('./components/reset-password/reset-password').then(m => m.ResetPasswordComponent)
+  },
   {
     path: 'invitations/:token',
     loadComponent: () => import('./components/accept-invitation/accept-invitation').then(m => m.AcceptInvitationComponent)
@@ -17,6 +21,11 @@ export const routes: Routes = [
     loadComponent: () => import('./components/dashboard/dashboard').then(m => m.Dashboard),
     canActivate: [authGuard]
   },
+  {
+    path: 'profile',
+    loadComponent: () => import('./components/profile/profile').then(m => m.ProfileComponent),
+    canActivate: [authGuard]
+  },
   {
     path: 'workspace/create',
     component: CreateWorkspace,

src/app/components/dashboard/dashboard.css

@@ -37,6 +37,12 @@
   gap: 16px;
 }
 
+.hero-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
 .brand {
   display: inline-flex;
   align-items: center;
@@ -56,16 +62,19 @@
   place-items: center;
 }
 
-.logout-btn {
+.logout-btn,
+.profile-btn {
   border: 1px solid rgba(255, 255, 255, 0.24);
   background: transparent;
   color: #f7f7f7;
   border-radius: 10px;
   padding: 9px 14px;
   cursor: pointer;
+  text-decoration: none;
 }
 
-.logout-btn:hover {
+.logout-btn:hover,
+.profile-btn:hover {
   background: rgba(255, 255, 255, 0.1);
 }
 

src/app/components/dashboard/dashboard.html

@@ -12,7 +12,10 @@
         </div>
         <span>Sentinent</span>
       </div>
-      <button (click)="logout()" class="logout-btn">Logout</button>
+      <div class="hero-actions">
+        <a routerLink="/profile" class="profile-btn">Profile</a>
+        <button (click)="logout()" class="logout-btn">Logout</button>
+      </div>
     </div>
 
     <div class="hero-copy">

src/app/components/login/login.css

@@ -329,10 +329,9 @@ h1 {
   cursor: default;
 }
 
-.subtle-copy {
-  margin: 0 0 6px;
-  color: var(--muted);
-  font-size: 13px;
+.success-link {
+  margin-top: 14px;
+  text-decoration: none;
 }
 
 .error-text,

src/app/components/login/login.html

@@ -127,6 +127,7 @@ <h2>Welcome back</h2>
         <div class="success-icon">✓</div>
         <h3>{{ successTitle }}</h3>
         <p>{{ successText }}</p>
+        <a *ngIf="successActionUrl" class="btn-primary success-link" [href]="successActionUrl">{{ successActionLabel }}</a>
       </div>
 
     </div>

src/app/components/login/login.spec.ts

@@ -15,7 +15,7 @@ describe('Login', () => {
   let document: Document;
 
   beforeEach(async () => {
-    mockAuthService = jasmine.createSpyObj<AuthService>('AuthService', ['login', 'signup']);
+    mockAuthService = jasmine.createSpyObj<AuthService>('AuthService', ['login', 'signup', 'requestPasswordReset']);
 
     spyOn(localStorage, 'getItem').and.returnValue(null);
     spyOn(localStorage, 'setItem');
@@ -188,4 +188,19 @@ describe('Login', () => {
     expect(component.forgotError).toBe('Enter a valid email address');
     expect(component.isForgotSubmitting).toBeFalse();
   });
+
+  it('requests a password reset link from the backend', () => {
+    mockAuthService.requestPasswordReset.and.returnValue(of({
+      message: 'If an account exists, a reset link has been generated.',
+      resetUrl: 'http://localhost:4200/reset-password/reset-token',
+    }));
+    component.showForgotPassword();
+    component.forgotEmail = 'user@example.com';
+
+    component.handleForgot();
+
+    expect(mockAuthService.requestPasswordReset).toHaveBeenCalledWith('user@example.com');
+    expect(component.showSuccess).toBeTrue();
+    expect(component.successActionUrl).toContain('/reset-password/reset-token');
+  });
 });

src/app/components/login/login.ts

@@ -37,6 +37,8 @@ export class Login implements OnInit {
   showSuccess = false;
   successTitle = 'Check your email';
   successText = 'We sent you a verification link.';
+  successActionLabel = '';
+  successActionUrl = '';
 
   isDarkMode = false;
   isLoginSubmitting = false;
@@ -187,17 +189,39 @@ export class Login implements OnInit {
       return;
     }
     this.isForgotSubmitting = true;
-    setTimeout(() => {
-      this.isForgotSubmitting = false;
-      this.showSuccessMessage('Check your email', 'We sent a password reset link.');
-    }, 1200);
+
+    this.authService.requestPasswordReset(this.forgotEmail.trim()).pipe(
+      timeout(8000),
+      finalize(() => {
+        this.isForgotSubmitting = false;
+        this.syncView();
+      })
+    ).subscribe({
+      next: (response) => {
+        this.showSuccessMessage(
+          'Check your email',
+          response.resetUrl
+            ? 'A password reset link is ready. Use the button below to continue.'
+            : response.message,
+          response.resetUrl ? 'Open Reset Link' : '',
+          response.resetUrl ?? ''
+        );
+        this.syncView();
+      },
+      error: () => {
+        this.forgotError = 'Could not start password reset. Please try again.';
+        this.syncView();
+      }
+    });
   }
 
-  private showSuccessMessage(title: string, text: string): void {
+  private showSuccessMessage(title: string, text: string, actionLabel: string = '', actionUrl: string = ''): void {
     this.showForgot = false;
     this.showSuccess = true;
     this.successTitle = title;
     this.successText = text;
+    this.successActionLabel = actionLabel;
+    this.successActionUrl = actionUrl;
   }
 
   private applyTheme(): void {