fix[frontend](federation_service): added instance selector and actions

Author: AlexSanchez-bit

frontend/src/app/core/auth/user-route-access-service.ts

@@ -2,15 +2,21 @@ import {Injectable, isDevMode} from '@angular/core';
 import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
 import {ModalService} from '../modal/modal.service';
 
+import {FederationInstanceStateService} from '../../federation/services/federation-instance-state.service';
+import {FederationModeService} from '../../federation/services/federation-mode.service';
 import {AccountService} from './account.service';
 import {StateStorageService} from './state-storage.service';
 
+const FEDERATION_WELCOME_URL = '/federation/welcome';
+
 @Injectable({providedIn: 'root'})
 export class UserRouteAccessService implements CanActivate {
   constructor(
     private router: Router,
     private accountService: AccountService,
-    private stateStorageService: StateStorageService
+    private stateStorageService: StateStorageService,
+    private federationModeService: FederationModeService,
+    private federationInstanceState: FederationInstanceStateService
   ) {
   }
 
@@ -28,6 +34,14 @@ export class UserRouteAccessService implements CanActivate {
       return false;
     }
     if (account) {
+      if (
+        this.federationModeService.isActive &&
+        this.federationInstanceState.instances.length === 0 &&
+        !url.startsWith(FEDERATION_WELCOME_URL)
+      ) {
+        this.router.navigate([FEDERATION_WELCOME_URL]);
+        return false;
+      }
       const hasAnyAuthority = this.accountService.hasAnyAuthority(authorities);
       if (hasAnyAuthority) {
         return true;

frontend/src/app/federation/components/instance-switcher/instance-switcher.component.html

@@ -27,6 +27,7 @@ <h6 class="dropdown-header text-uppercase">Instances</h6>
          class="federation-instance-row dropdown-item d-flex align-items-center justify-content-between"
          [class.active]="active && instance.id === active.id">
       <button type="button"
+              [class.textActive]="active && instance.id === active.id"
               class="btn btn-link p-0 flex-grow-1 text-left text-truncate federation-instance-name-btn"
               (click)="select(instance, $event)">
         <i *ngIf="active && instance.id === active.id" class="icon-check mr-1"></i>

frontend/src/app/federation/components/instance-switcher/instance-switcher.component.scss

@@ -22,7 +22,7 @@
 
     &.active {
       background-color: rgba(35, 47, 62, 0.08);
-      color: inherit;
+      color: white !important;
     }
   }
 
@@ -55,3 +55,6 @@
     cursor: pointer;
   }
 }
+.textActive{
+      color: white !important;
+}

frontend/src/app/federation/federation-routing.module.ts

@@ -1,14 +1,25 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
+import {UserRouteAccessService} from '../core/auth/user-route-access-service';
 import {WelcomeComponent} from './pages/welcome/welcome.component';
 
 const routes: Routes = [
   {
     path: 'federation',
     children: [
       {path: '', redirectTo: 'welcome', pathMatch: 'full'},
-      {path: 'welcome', component: WelcomeComponent},
-      {path: 'instances', component: WelcomeComponent}
+      {
+        path: 'welcome',
+        component: WelcomeComponent,
+        data: {authorities: ['ROLE_USER']},
+        canActivate: [UserRouteAccessService]
+      },
+      {
+        path: 'instances',
+        component: WelcomeComponent,
+        data: {authorities: ['ROLE_USER']},
+        canActivate: [UserRouteAccessService]
+      }
     ]
   }
 ];