arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Erik Tiekstra
2021-11-17 12:06:37 +01:00
parent fac16f0bfc
commit 5aec476719
22 changed files with 302 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
libs/styles/src/mixins/_buttons.scss
View File

@@ -16,31 +16,49 @@
outline: var(--digi-button--outline);
border-color: var(--digi-button--border-color);
@if $type == 'secondary' {
background-color: var(--digi-button--background--secondary);
color: var(--digi-button--color--secondary);
} @else if $type == 'tertiary' {
background-color: transparent;
color: var(--digi-button--color--tertiary);
border-width: 0;
} @else {
background-color: var(--digi-button--background);
color: var(--digi-button--color);
}
&:hover,
&:focus {
outline: var(--digi-button--outline--focus);
border-color: var(--digi-button--border-color--hover);
}
@if $type == 'secondary' {
background-color: var(--digi-button--background--secondary--hover);
color: var(--digi-button--color--secondary);
} @else if $type == 'tertiary' {
color: var(--digi-button--color--tertiary--hover);
} @else {
&--primary {
background-color: var(--digi-button--background);
color: var(--digi-button--color);
&:hover,
&:focus {
background-color: var(--digi-button--background--hover);
color: var(--digi-button--color--hover);
}
}
&--secondary {
background-color: var(--digi-button--background--secondary);
color: var(--digi-button--color--secondary);
&:hover,
&:focus {
background-color: var(--digi-button--background--secondary--hover);
color: var(--digi-button--color--secondary);
}
}
&--tertiary {
background-color: transparent;
color: var(--digi-button--color--tertiary);
border-width: 0;
&:hover,
&:focus {
color: var(--digi-button--color--tertiary--hover);
}
}
&--s {
padding: var(--digi-button--padding--s);
font-size: var(--digi-button--font-size--s);
}
&--l {
padding: var(--digi-button--padding--l);
font-size: var(--digi-button--font-size--l);
}
}

19
libs/ui/src/link-button/link-button.component.html
View File

@@ -1,3 +1,18 @@
<a [ngClass]="linkButtonClass" [routerLink]="uiRouterLink" [queryParams]="uiQueryParams">
<ng-content></ng-content>
<a
*ngIf="uiRouterLink; else externalLinkRef"
[ngClass]="linkButtonClass"
[routerLink]="uiRouterLink"
[queryParams]="uiQueryParams"
>
<ng-container *ngTemplateOutlet="contentRef"></ng-container>
</a>
<ng-template #externalLinkRef>
<a *ngIf="uiHref" [ngClass]="linkButtonClass" [attr.href]="uiHref">
<ng-container *ngTemplateOutlet="contentRef"></ng-container>
</a>
</ng-template>
<ng-template #contentRef>
<ng-content></ng-content>
</ng-template>

12
libs/ui/src/link-button/link-button.component.scss
View File

@@ -1,13 +1,9 @@
@import 'mixins/buttons';
.ui-link-button {
&--primary {
@include msfa__button;
}
&--secondary {
@include msfa__button('secondary');
}
&--tertiary {
@include msfa__button('tertiary');
@include msfa__button;
&--full-width {
width: 100%;
}
}

15
libs/ui/src/link-button/link-button.component.ts
View File

@@ -11,14 +11,21 @@ import { UiLinkButtonType } from './link-button-type.enum';
export class LinkButtonComponent {
private readonly _defaultClass = 'ui-link-button';
@Input() uiType: UiLinkButtonType = UiLinkButtonType.PRIMARY;
@Input() uiSize: 's' | 'm' = 'm';
@Input() uiSize: 's' | 'm' | 'l' = 'm';
@Input() uiFullWidth = false;
@Input() uiRouterLink: string | string[];
@Input() uiHref: string;
@Input() uiQueryParams: Params = null;
get linkButtonClass(): string {
if (this.uiType) {
return `${this._defaultClass} ${this._defaultClass}--${this.uiType as string}`;
let currentClass = `${this._defaultClass} ${this._defaultClass}--${this.uiSize}`;
if (this.uiFullWidth) {
currentClass = `${currentClass} ${this._defaultClass}--full-width`;
}
return this._defaultClass;
if (this.uiType) {
currentClass = `${currentClass} ${this._defaultClass}--${this.uiType as string}`;
}
return currentClass;
}
}