[Login] added change password component

src/app/app.component.html

@@ -93,12 +93,26 @@
 
 <!--menus-->
 <mat-menu #userMenu="matMenu">
-  <button mat-menu-item [matMenuTriggerFor]="settings">{{'settings'|tr:'Settings'}}</button>
+  <button mat-menu-item [matMenuTriggerFor]="account" id="account-menu-button">
+    @if (loginService?.user?.pictures?.length > 0) {
+      <img title="{{'profile_pic'|tr:'Profile Picture'}}" class="profile-pic" src="{{loginService?.user?.pictures[0]?.value}}">
+    }
+    @else {
+      <mat-icon>account_circle</mat-icon>
+    }
+    {{'account'|tr:'Account'}}</button>
+  <button mat-menu-item [matMenuTriggerFor]="settings"><mat-icon>settings</mat-icon>{{'settings'|tr:'Settings'}}</button>
   <button mat-menu-item (click)="loginService.logout()" [disabled]="!loginService.user">
     <mat-icon>logout</mat-icon>
     {{'logout'|tr:'Logout'}}</button>
 </mat-menu>
 
+<mat-menu #account="matMenu">
+  <button mat-menu-item (click)="cs.navigate('/auth/change')" [disabled]="!loginService.user">
+    <mat-icon>lock_reset</mat-icon>
+    {{'change_password'|tr:'Change Password'}}</button>
+</mat-menu>
+
 <mat-menu #settings="matMenu">
   <button mat-menu-item [matMenuTriggerFor]="themes">{{'theme'|tr:'Theme'}}</button>
   <button mat-menu-item [matMenuTriggerFor]="language">{{'language'|tr:'Language'}}</button>

src/app/app.component.scss

@@ -80,11 +80,16 @@
     background: color-mix(in srgb, var(--pill-accent) 15%, transparent);
 }
 
-.toolbar-item > .profile-pic {
+.profile-pic {
     height: 25px;
+    width: 25px;
+    max-width: 25px;
     border-radius: 50%;
 }
 
+#account-menu-button .profile-pic {
+    margin-right: 12px;
+}
 .toolbar, .mobile-toolbar {
     height: 40px;
 }