add scilog-token and copy-to-clipboard functionality in user-profile dialog (#460)

Author: omkar-ethz

scilog/src/app/core/auth-services/auth.service.ts

@@ -40,4 +40,7 @@ export class AuthService {
     return Math.floor((Math.random() * 1000) + 1).toString();
   }
 
+  getScilogToken(): string | null {
+    return localStorage.getItem('id_token');
+  }
 }

scilog/src/app/logbook/core/settings/profile-settings/profile-settings.component.css

@@ -1,10 +1,14 @@
 .profile {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
 
-  input:disabled {
-	color: rgba(0, 0, 0, 1);
-}
+input:disabled {
+  color: rgba(0, 0, 0, 1);
+}
+
+button[matSuffix] {
+  color: gray;
+}

scilog/src/app/logbook/core/settings/profile-settings/profile-settings.component.html

@@ -26,6 +26,16 @@
             <input matInput placeholder="Title of the view" [formControl]="profileFormGroup.get('username')">
           </mat-form-field>
     </div>
+
+    <div>
+        <mat-form-field required>
+            <mat-label>SciLog token</mat-label>
+            <input matInput [formControl]="profileFormGroup.get('token')">
+            <button mat-icon-button matSuffix (click)="copyToClipboard()">
+                <mat-icon>content_copy</mat-icon>
+            </button>
+        </mat-form-field>
+    </div>
 </form>
 
 </div>

scilog/src/app/logbook/core/settings/profile-settings/profile-settings.component.spec.ts

@@ -4,6 +4,8 @@ import { ProfileSettingsComponent } from './profile-settings.component';
 import { UserPreferencesService } from '@shared/user-preferences.service';
 import { UntypedFormBuilder } from '@angular/forms';
 import { AppConfigService } from 'src/app/app-config.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { AuthService } from '@shared/auth-services/auth.service';
 
 
 class UserPreferencesMock {
@@ -13,6 +15,16 @@ class UserPreferencesMock {
   }
 }
 
+class AuthServiceMock {
+  getScilogToken() {
+    return 'mock-token-123';
+  }
+}
+
+class MatSnackBarMock {
+  open() {}
+}
+
 const getConfig = () => ({});
 
 describe('ProfileSettingsComponent', () => {
@@ -25,7 +37,9 @@ describe('ProfileSettingsComponent', () => {
     providers: [
         UntypedFormBuilder,
         { provide: UserPreferencesService, useClass: UserPreferencesMock },
-        { provide: AppConfigService, useValue: { getConfig } }
+        { provide: AppConfigService, useValue: { getConfig } },
+        { provide: MatSnackBar, useClass: MatSnackBarMock },
+        { provide: AuthService, useClass: AuthServiceMock }
     ]
 })
     .compileComponents();
@@ -40,4 +54,10 @@ describe('ProfileSettingsComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('copies token to clipboard', () => {
+    const clipboardSpy = spyOn(navigator.clipboard, 'writeText').and.resolveTo(void 0);
+    component.copyToClipboard();
+    expect(clipboardSpy).toHaveBeenCalledWith('mock-token-123');
+  });
 });

scilog/src/app/logbook/core/settings/profile-settings/profile-settings.component.ts

@@ -1,39 +1,82 @@
 import { Component, OnInit } from '@angular/core';
 import { UserPreferencesService } from '@shared/user-preferences.service';
 import { UntypedFormBuilder, UntypedFormGroup, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatFormField, MatLabel } from '@angular/material/form-field';
-import { MatInput } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { AuthService } from '@shared/auth-services/auth.service';
+import { MatIconModule } from "@angular/material/icon";
+import { MatButtonModule } from '@angular/material/button';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
-    selector: 'app-profile-settings',
-    templateUrl: './profile-settings.component.html',
-    styleUrls: ['./profile-settings.component.css'],
-    imports: [FormsModule, ReactiveFormsModule, MatFormField, MatLabel, MatInput]
+  selector: 'app-profile-settings',
+  templateUrl: './profile-settings.component.html',
+  styleUrls: ['./profile-settings.component.css'],
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+  ],
 })
 export class ProfileSettingsComponent implements OnInit {
-
   formBuilder: UntypedFormBuilder;
   profileFormGroup: UntypedFormGroup;
 
-
   constructor(
     private userPreferences: UserPreferencesService,
-    fb: UntypedFormBuilder,
-  ) { 
+    private authService: AuthService,
+    private snackBar: MatSnackBar,
+    fb: UntypedFormBuilder
+  ) {
     this.formBuilder = fb;
-
   }
 
   ngOnInit(): void {
     this.profileFormGroup = this.formBuilder.group({
-      name: new UntypedFormControl({ value: this.userPreferences.userInfo.firstName, disabled: true }),
-      lastname: new UntypedFormControl({ value: this.userPreferences.userInfo.lastName, disabled: true }),
-      email: new UntypedFormControl({ value: this.userPreferences.userInfo.email, disabled: true }),
-      username: new UntypedFormControl({ value: this.userPreferences.userInfo.email, disabled: true }),
-
+      name: new UntypedFormControl({
+        value: this.userPreferences.userInfo.firstName,
+        disabled: true,
+      }),
+      lastname: new UntypedFormControl({
+        value: this.userPreferences.userInfo.lastName,
+        disabled: true,
+      }),
+      email: new UntypedFormControl({
+        value: this.userPreferences.userInfo.email,
+        disabled: true,
+      }),
+      username: new UntypedFormControl({
+        value: this.userPreferences.userInfo.email,
+        disabled: true,
+      }),
+      token: new UntypedFormControl({
+        value: this.authService.getScilogToken(),
+        disabled: true,
+      }),
     });
-    console.log(this.userPreferences.userInfo)
-    
   }
 
+  copyToClipboard() {
+    const token = this.profileFormGroup.get('token')?.value;
+    if (token) {
+      navigator.clipboard
+        .writeText(token)
+        .then(() => {
+          this.snackBar.open('Token copied to clipboard', 'Dismiss', {
+            duration: 3000,
+            verticalPosition: 'top',
+          });
+        })
+        .catch((err) => {
+          console.error('Failed to copy token: ', err);
+          this.snackBar.open('Failed to copy token to clipboard', 'Dismiss', {
+            duration: 3000,
+            verticalPosition: 'top',
+          });
+        });
+    }
+  }
 }