refactor: New auth state management

Author: FilipLeitner

projects/hslayers/assets/locales/cs.json

@@ -1,4 +1,12 @@
 {
+  "AUTH": {
+    "signingIn": "Přihlašování ...",
+    "logoutSuccessful": "Byli jste velmi odhlášeni!",
+    "loginSuccessful": "Úspěšně přihlášen",
+    "authenticationFailed": "Chyba ověření",
+    "userInfoFailed": "Chyba při načítání uživatelských údajů",
+    "loginFailed": "Přihlášení se nezdařilo"
+  },
   "ADDDATA": {
     "CATALOGUE": {
       "DESC": {
@@ -322,7 +330,9 @@
     "base": "Podkladová mapa",
     "thematic": "Tematická mapa",
     "contains": "obsahuje",
-    "property": "Atribut"
+    "property": "Atribut",
+    "error": "Chyba",
+    "success": "Úspěch"
   },
   "COMPOSITIONS": {
     "addByAddress": "Přidat kompozici z adresy",

projects/hslayers/assets/locales/en.json

@@ -1,4 +1,14 @@
 {
+  "AUTH": {
+    "signingIn": "Signing in...",
+    "logoutSuccessful": "You have been sucesfully logged out!",
+    "loginSuccessful": "Successfully logged in",
+    "authenticationFailed": "Authentication failed",
+    "userInfoFailed": "Failed to retrieve user information",
+    "loginFailed": "Login failed",
+    "Login": "Log in",
+    "Logout": "Log out"
+  },
   "ADDDATA": {
     "CATALOGUE": {
       "DESC": {
@@ -219,8 +229,6 @@
     "lineColor": "Line color",
     "lineWidth": "Line width",
     "loading": "Loading",
-    "Login": "Log in",
-    "Logout": "Log out",
     "mapExtentFilterMissing": "Please enable Filter by map extent checkbox to be able to sort data by Bounding box",
     "menu": "Menu",
     "metadata": "Metadata",
@@ -322,7 +330,9 @@
     "base": "Basemap",
     "thematic": "Thematic map",
     "contains": "contains",
-    "property": "Property"
+    "property": "Property",
+    "error": "Error",
+    "success": "Success"
   },
   "COMPOSITIONS": {
     "addByAddress": "Add composition by address",

projects/hslayers/assets/locales/sk.json

@@ -1,4 +1,12 @@
 {
+  "AUTH": {
+    "signingIn": "Prihlasovanie ...",
+    "logoutSuccessful": "Boli ste úspešne odhlásený!",
+    "loginSuccessful": "Úspešne prihlásený",
+    "authenticationFailed": "Chyba prihlásenia",
+    "userInfoFailed": "Chyba pri načítaní údajov o užívateľovi",
+    "loginFailed": "Prihlasovanie nebolo úspešné"
+  },
   "ADDDATA": {
     "CATALOGUE": {
       "DESC": {
@@ -322,7 +330,9 @@
     "base": "Podkladová mapa",
     "thematic": "Tematická mapa",
     "contains": "obsahuje",
-    "property": "Atribút"
+    "property": "Atribút",
+    "error": "Chyba",
+    "success": "Úspech"
   },
   "COMPOSITIONS": {
     "addByAddress": "Pridať kompozíciu z adresy",

projects/hslayers/common/dialog-set-permissions/set-permissions.component.ts

@@ -57,7 +57,7 @@ export class HsSetPermissionsDialogComponent
 
   ngOnInit(): void {
     // Can set permission for Layman endpoint only
-    this.endpoint = this.hsCommonLaymanService.layman;
+    this.endpoint = this.hsCommonLaymanService.layman();
     if (!this.data.selectedRecord?.access_rights || !this.endpoint) {
       this.close();
       return;
@@ -70,7 +70,7 @@ export class HsSetPermissionsDialogComponent
    * so it can be used for Layman access rights component
    */
   parseCurrentPermissions(): void {
-    const currentUser = this.endpoint.user;
+    const currentUser = this.hsCommonLaymanService.user();
     let read: string[] = this.data.selectedRecord.access_rights.read;
     let write: string[] = this.data.selectedRecord.access_rights.write;
     if (read.includes('EVERYONE')) {
@@ -105,7 +105,7 @@ export class HsSetPermissionsDialogComponent
         const layerDesc: UpsertLayerObject = {
           name: this.data.selectedRecord.name,
           title: this.data.selectedRecord.title,
-          workspace: this.endpoint.user,
+          workspace: this.hsCommonLaymanService.user(),
           access_rights: this.access_rights,
         };
         response = await this.hsLaymanService.makeUpsertLayerRequest(

projects/hslayers/common/layman/access-rights/layman-access-rights.component.html

@@ -56,11 +56,11 @@
 <div class="hs-save-map-users-list p-1 my-1" [class.collapsed]="collapsed">
   @for (user of allUsers | filter: userFilter; track user) {
   <div class="d-flex flex-row justify-content-between align-items-start p-1"
-    [class.bg-primary-subtle]="user.username === this.endpoint.user">
+    [class.bg-primary-subtle]="user.username === hsCommonLaymanService.user()">
     <span class="w-50">{{user.hslDisplayName}}</span>
     @for (type of rightsOptions; track type) {
     <label style="cursor: pointer;"><input class="me-2" type="checkbox" [name]="'rightTo'+type"
-        [disabled]="user.username === this.endpoint.user" [(ngModel)]="user[type]"
+        [disabled]="user.username === hsCommonLaymanService.user()" [(ngModel)]="user[type]"
         (change)="accessRightsChanged(type, user.username, $event)">{{ type | translateHs :'SAVECOMPOSITION.form'
       }}</label>
     }

projects/hslayers/common/layman/access-rights/layman-access-rights.component.ts

@@ -68,12 +68,12 @@ export class HsCommonLaymanAccessRightsComponent implements OnInit {
   userSearch: string;
   endpoint: HsEndpoint;
   constructor(
-    private hsCommonLaymanService: HsCommonLaymanService,
+    public hsCommonLaymanService: HsCommonLaymanService,
     private $http: HttpClient,
     private hsLog: HsLogService,
   ) {}
   async ngOnInit(): Promise<void> {
-    this.endpoint = this.hsCommonLaymanService.layman;
+    this.endpoint = this.hsCommonLaymanService.layman();
     this.defaultAccessRights = JSON.parse(JSON.stringify(this.access_rights));
     this.setUpAccessRights();
   }
@@ -113,7 +113,7 @@ export class HsCommonLaymanAccessRightsComponent implements OnInit {
       this.allUsers.length / 2 >= this.allUsers.filter((u) => u[type]).length;
 
     this.allUsers.forEach((user) => {
-      const isCurrentUser = user.name === this.endpoint.user;
+      const isCurrentUser = user.name === this.hsCommonLaymanService.user();
       //Value for current user won't be changed
       user[type] = isCurrentUser ? user[type] : value;
       //In case write permission is being added make sure read is granted as well
@@ -199,7 +199,7 @@ export class HsCommonLaymanAccessRightsComponent implements OnInit {
         : [
             ...this.allRoles,
             //Add current user as he has got to retain both read and write rights
-            {name: this.endpoint.user, read: true, write: true},
+            {name: this.hsCommonLaymanService.user(), read: true, write: true},
           ];
     this.access_rights[`access_rights.${type}`] = source
       .reduce((acc, curr) => {
@@ -291,7 +291,7 @@ export class HsCommonLaymanAccessRightsComponent implements OnInit {
    * Get user roles
    */
   async getRoles(access_rights?: AccessRightsModel): Promise<void> {
-    if (this.endpoint?.authenticated) {
+    if (this.hsCommonLaymanService.isAuthenticated()) {
       const url = `${this.endpoint.url}/rest/roles`;
 
       access_rights ??= this.access_rights;
@@ -390,7 +390,7 @@ export class HsCommonLaymanAccessRightsComponent implements OnInit {
    * Get all registered users from Layman's endpoint service
    */
   async getAllUsers(access_rights?: AccessRightsModel): Promise<void> {
-    if (this.endpoint?.authenticated) {
+    if (this.hsCommonLaymanService.isAuthenticated()) {
       access_rights ??= this.access_rights;
       const read = access_rights[AccessRights.READ].split(',');
       const write = access_rights[AccessRights.WRITE].split(',');
@@ -403,7 +403,8 @@ export class HsCommonLaymanAccessRightsComponent implements OnInit {
             ),
             map((res: LaymanUser[]) => {
               return res.map((user) => {
-                const isCurrentUser = user.username === this.endpoint.user;
+                const isCurrentUser =
+                  user.username === this.hsCommonLaymanService.user();
                 const laymanUser: LaymanUser = {
                   ...user,
                   name: user.username,

projects/hslayers/common/layman/layman-current-user.component.html

@@ -1,23 +1,53 @@
-@if ((inAppLogin | async) && endpoint) {
-<div style="margin-left: 1em; float: right; ">
-  @if (!isAuthenticated() && sameDomain()) {
-  <a class="btn btn-primary" style="border-radius: 0.25rem; color: #fff;" (click)="login();">
-    <!-- TODO: Remove function call from template -->
-    {{'COMPOSITIONS.loginToCatalogue' | translateHs }}
-  </a>
-  }
-  @if (!isAuthenticated() && !sameDomain()) {
-  <a class="btn btn-primary" style="border-radius: 0.25rem; color: #fff;" (click)="login();" [href]="authUrl()"
-    target="_blank">
-    <!-- TODO: Remove function call from template -->
-    {{'COMPOSITIONS.loginToCatalogue' | translateHs }}
-  </a>
-  }
-  @if (isAuthenticated()) {
-  <a class="btn btn-primary text-truncate"
-    style="border-radius: 0.25rem; color: #fff; max-width:25ch; white-space:nowrap" (click)="logout()">{{'COMMON.Logout'
-    | translateHs }}
-    {{endpoint.user}}</a>
-  }<!-- TODO: Remove function call from template -->
-</div>
-}
+@if ((inAppLogin | async) && hsCommonLaymanService.layman()) {
+  <div class="user-auth-container ms-3 float-end">
+    @if (!hsCommonLaymanService.isAuthenticated()) {
+      @if (hsCommonLaymanService.isAuthenticating()) {
+        <button 
+          class="btn btn-outline-primary d-flex align-items-center"
+          type="button"
+          disabled>
+          <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+          <span>{{'AUTH.signingIn' | translateHs }}</span>
+        </button>
+      } @else {
+        <button 
+          class="btn btn-outline-primary d-flex align-items-center"
+          (click)="login()"
+          type="button">
+          <i class="fa-solid fa-sign-in-alt me-2"></i>
+          {{'COMPOSITIONS.loginToCatalogue' | translateHs }}
+        </button>
+      }
+    } @else {
+      <div ngbDropdown placement="bottom-end" class="user-dropdown">
+        <button 
+          class="btn btn-primary d-flex align-items-center" 
+          ngbDropdownToggle>
+          <div class="user-avatar me-2">
+            <i class="fa-solid fa-user"></i>
+          </div>
+          <span class="text-truncate" style="max-width: 8rem;">{{hsCommonLaymanService.user()}}</span>
+        </button>
+        <div ngbDropdownMenu class="user-dropdown-menu p-0">
+          <div class="user-header p-3 bg-light border-bottom">
+            <div class="d-flex align-items-center">
+              <div class="user-avatar-large me-3">
+                <i class="fa-solid fa-user"></i>
+              </div>
+              <div>
+                <h6 class="mb-0">{{hsCommonLaymanService.user()}}</h6>
+                <small class="text-muted">Logged in</small>
+              </div>
+            </div>
+          </div>
+          <div class="p-2">
+            <button ngbDropdownItem (click)="logout()" class="text-danger">
+              <i class="fa-solid fa-sign-out-alt me-2"></i>
+              {{'AUTH.Logout' | translateHs }}
+            </button>
+          </div>
+        </div>
+      </div>
+    }
+  </div>
+}