feat(login): Added login page within application with links to CIAM login-functionality. (TV-595)

Merge in TEA/mina-sidor-fa-web from feature/TV-595-ciam-login-page to develop Squashed commit of the following: commit 7796cbc958bfb14dccb6cfc329fb223b66643af1 Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Wed Nov 17 09:46:47 2021 +0100 Using guard to check if user is logged in commit 43b9fca3d0d640b5c9711ec9837222ac2df5c782 Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Wed Nov 17 08:32:10 2021 +0100 Added link-button as logout link to my account commit ab40fae0d4741ee30af146a41ce254c6c7f6658a Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Wed Nov 17 08:25:04 2021 +0100 Refactored authentication a bit commit d1c75864f2a0b1867b372655e81e37b28a067503 Merge: 45f35088 8f05343e Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Wed Nov 17 07:04:32 2021 +0100 Merge branch 'develop' into feature/TV-595-ciam-login-page commit 45f3508811de2842af1c095ff72949b619d5bc8d Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Tue Nov 16 16:28:44 2021 +0100 Added resolve to check if user already is logged in when navigating to login page commit 44b212fb1e0eab7fdb823a8f41ea0d780c920ee0 Merge: 56ed0e57 54ac27ef Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Tue Nov 16 13:58:58 2021 +0100 Merge branch 'develop' into feature/TV-595-ciam-login-page commit 56ed0e57fb3f19c4c41ec3fe676db41ed5831557 Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Tue Nov 16 13:48:53 2021 +0100 Implemented custom login page commit 27a514758d73d685e80a37e490646a759783d1f5 Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Tue Nov 16 11:51:57 2021 +0100 WIP
2021-11-17 12:06:37 +01:00
parent fac16f0bfc
commit 5aec476719
22 changed files with 302 additions and 95 deletions
@@ -1,4 +1,11 @@
 <ui-icon-custom *ngIf="isCustomIcon; else digiIcon" aria-hidden="true" class="icon" [ngClass]="[iconClass]">
+  <svg *ngIf="icon === iconType.BANKID" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 169 158">
+    <path
+      d="M45.916 135.23c5.268 0 9.905 2.083 9.015 7.63l-1.005 6.257c-.355 2.211-.289 2.873 2.253 2.922l-2.583 5.878c-4.495.291-6.67-.167-7.75-2.046-2.384 1.422-5.006 2.129-7.814 2.129-5.093 0-6.845-2.541-6.392-5.378.213-1.34 1.03-2.67 2.328-3.756 2.794-2.336 9.715-2.673 12.42-4.462.236-2.002-.6-2.712-3.15-2.712-2.979 0-5.466.961-9.714 3.754l1.035-6.47c3.698-2.58 7.251-3.747 11.357-3.747zm32.032 0c4.892 0 7.172 3.008 6.407 7.968L82.075 158h-8.773l1.889-12.256c.342-2.244-.3-3.266-2.028-3.266-1.392 0-2.649.764-3.872 2.414L67.27 158H58.5l3.446-22.395h8.774l-.452 2.929c2.772-2.376 4.896-3.305 7.68-3.305zm22.058-7.436l-2.19 14.881 8.377-8.065H117l-10.759 9.971L114.866 158h-10.973l-6.656-10.808h-.082L95.567 158H86.82l4.438-30.206h8.747zm-78.437.93c7.265 0 9.048 3.578 8.525 6.855-.423 2.664-2.276 4.617-5.514 5.906 4.08 1.496 5.669 3.863 5.084 7.52-.733 4.616-4.87 8.066-10.257 8.066H0l4.514-28.347h17.055zm131.362 0c11.337 0 14.611 7.98 13.563 14.547-1.03 6.442-6.288 13.8-16.25 13.8h-16.53l4.532-28.347h14.685zm-19.681 0l-4.553 28.347h-10.304l4.554-28.347h10.303zm-87.452 19.348c-2.392 1.462-6.8 1.21-7.281 4.213-.228 1.42.685 2.46 2.151 2.46 1.427 0 3.164-.583 4.517-1.5-.091-.498-.047-1.042.113-2.043l.5-3.13zm-30.297-3.262h-3.332l-1.265 7.938h3.076c3.421 0 5.43-1.33 5.872-4.115.38-2.37-1.017-3.823-4.351-3.823zm134.677-9.357h-2.75l-2.379 14.884h2.707c4.978 0 7.721-2.37 8.535-7.439.595-3.741-.573-7.445-6.113-7.445zm-133.187-2.41h-2.95l-1.185 7.44h2.95c3.334 0 4.889-1.704 5.212-3.74.344-2.158-.692-3.7-4.027-3.7zM43.87 14.405c3.239 0 5.74.667 7.04 1.88.907.849 1.245 1.96.977 3.219-.26 1.215-1.64 2.797-3.71 4.223-5.866 4.066-4.85 8.28-4.397 9.477 1.358 3.601 5.892 5.544 9.462 5.544h7.58l-7.07 43.956h.121c-2.632 16.426-4.59 28.813-4.953 31.148H6.964c.804-5.165 11.305-70.804 11.97-75.091h.645l2.179.005h.502l1.696.004.446.001.62.001h.371l.172.001.451.001h.504l.058.001h.076c5.043-.027 9.69-2.3 11.844-5.793 2.106-3.388 1.305-7.02-2.076-9.482-1.127-.818-2.424-2.145-2.17-3.787.348-2.217 4.171-5.308 9.617-5.308zM109.119 0c38.623 0 65.555 16.776 58.858 58.635-5.415 33.793-32.973 55.218-66.709 55.218H93.27l5.425-34.104c13.664-.152 25.113-6.51 27.478-21.265 2.54-15.881-5.526-22.699-20.537-22.815.003-.024.003-.037.003-.037h-11.04c-2.542 0-5.808-1.395-6.655-3.641-.264-.696-.802-3.206 3.314-6.068 1.58-1.101 4.324-3.347 4.9-6.034.471-2.252-.198-4.429-1.845-5.967-1.876-1.757-5.01-2.69-9.061-2.69-6.765 0-11.939 4.042-12.527 7.813-.037.245-.061.532-.061.846 0 1.5.59 3.709 3.397 5.763 1.03.753 2.028 1.86 2.028 3.341 0 .679-.21 1.43-.723 2.267-1.608 2.612-5.341 4.378-9.301 4.4l-7.243-.017L66.526 0z"
+      transform="translate(-100 -239) translate(100 239)"
+      fill="currentColor"
+    />
+  </svg>
  <svg *ngIf="icon === iconType.HOME" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="25" height="25">
    <path
      d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"
@@ -9,6 +9,7 @@ const CUSTOM_ICONS: IconType[] = [
  IconType.CLIPBOARD,
  IconType.BUILDING,
  IconType.LOGOUT,
+  IconType.BANKID,
 ];

@Component({
@@ -1,4 +1,4 @@
-<div class="msfa" *ngIf="isLoggedIn$ | async">
+<div class="msfa">
  <msfa-skip-to-content mainContentId="msfa-main-content"></msfa-skip-to-content>

  <header class="msfa__header">
@@ -19,7 +19,6 @@ import { filter } from 'rxjs/operators';
 })
 export class LayoutComponent extends UnsubscribeDirective {
  @Input() showBreadCrumbs = true;
-  isLoggedIn$: Observable<boolean> = this.authenticationService.isLoggedIn$;
  selectedOrganization$: Observable<Organization> = this.userService.selectedOrganization$;
  user$: Observable<Employee> = this.userService.user$.pipe(filter(user => !!user));
  roles$: Observable<Role[]> = this.userService.userRoles$.pipe(filter(roles => !!roles));