diff --git a/scilog/src/app/core/auth-services/auth.service.ts b/scilog/src/app/core/auth-services/auth.service.ts index 39004d0e..ad533c6e 100644 --- a/scilog/src/app/core/auth-services/auth.service.ts +++ b/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'); + } } \ No newline at end of file diff --git a/scilog/src/app/logbook/core/settings/profile-settings/profile-settings.component.css b/scilog/src/app/logbook/core/settings/profile-settings/profile-settings.component.css index bd8f2360..d24a6058 100644 --- a/scilog/src/app/logbook/core/settings/profile-settings/profile-settings.component.css +++ b/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); -} \ No newline at end of file +input:disabled { + color: rgba(0, 0, 0, 1); +} + +button[matSuffix] { + color: gray; +} diff --git a/scilog/src/app/logbook/core/settings/profile-settings/profile-settings.component.html b/scilog/src/app/logbook/core/settings/profile-settings/profile-settings.component.html index b7096814..668580a7 100644 --- a/scilog/src/app/logbook/core/settings/profile-settings/profile-settings.component.html +++ b/scilog/src/app/logbook/core/settings/profile-settings/profile-settings.component.html @@ -26,6 +26,16 @@ + +
+ + SciLog token + + + +
\ No newline at end of file diff --git a/scilog/src/app/logbook/core/settings/profile-settings/profile-settings.component.spec.ts b/scilog/src/app/logbook/core/settings/profile-settings/profile-settings.component.spec.ts index a7d0eb2e..52b49d1b 100644 --- a/scilog/src/app/logbook/core/settings/profile-settings/profile-settings.component.spec.ts +++ b/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'); + }); }); diff --git a/scilog/src/app/logbook/core/settings/profile-settings/profile-settings.component.ts b/scilog/src/app/logbook/core/settings/profile-settings/profile-settings.component.ts index 61b40137..715e1664 100644 --- a/scilog/src/app/logbook/core/settings/profile-settings/profile-settings.component.ts +++ b/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', + }); + }); + } + } }