@updevs/components 1.0.0-alpha.8 → 1.0.0-alpha.9

package/layout/src/models/upd-layout-config.model.ts

@@ -0,0 +1,69 @@
+import { UpdLayoutConfig } from './upd-layout.config';
+import { SecurityLayoutConfigModel } from './security-layout-config.model';
+
+/**
+ * Layout configuration.
+ */
+export class UpdLayoutConfigModel implements UpdLayoutConfig {
+    /**
+     * Main menu title.
+     */
+    menuTitle?: string;
+    /**
+     * Whether the menu should start expanded.
+     */
+    shouldMenuStartExpanded?: boolean;
+    /**
+     * Main application logo.
+     */
+    mainLogo?: string;
+    /**
+     * Small application logo.
+     */
+    smallLogo?: string;
+    /**
+     * Background image for the logged out page.
+     */
+    loggedOutBackground?: string;
+    /**
+     * Whether the default notifications button should be displayed.
+     */
+    showNotificationsButton?: boolean;
+    /**
+     * Whether the report error button should be displayed when an exception is thrown by the server.
+     */
+    displayReportErrorButton?: boolean;
+    /**
+     * Whether the logged user's menu should be displayed.
+     */
+    showUserMenu?: boolean;
+    /**
+     * Whether the fluid layout (less padding) should be used.
+     */
+    useFluidLayout?: boolean;
+    /**
+     * Configuration for the pages related to the security.
+     */
+    securityLayoutConfig: SecurityLayoutConfigModel;
+
+    constructor(init?: UpdLayoutConfig) {
+        if (init?.mainLogo === undefined) {
+            // this.mainLogo = LogoConstants.defaultLogo; // TODO: add images
+        }
+
+        if (init?.smallLogo === undefined) {
+            // this.smallLogo = LogoConstants.smallLogo;
+        }
+
+        if (init?.loggedOutBackground === undefined) {
+            // this.loggedOutBackground = ImageConstants.loggedOutBackground;
+        }
+
+        this.menuTitle = init?.menuTitle || 'UpDevs';
+        this.showNotificationsButton = init?.showNotificationsButton || true;
+        this.showUserMenu = init?.showUserMenu || true;
+        this.displayReportErrorButton = init?.displayReportErrorButton || false;
+        this.useFluidLayout = init?.useFluidLayout || false;
+        this.securityLayoutConfig = new SecurityLayoutConfigModel(init?.securityLayoutConfig);
+    }
+}

package/layout/{models/upd-layout.config.d.ts → src/models/upd-layout.config.ts}

@@ -1,3 +1,5 @@
+import { SecurityLayoutConfig } from './security-layout.config';
+
 /**
  * Layout configuration.
  */
@@ -34,4 +36,12 @@ export interface UpdLayoutConfig {
      * Whether the logged user's menu should be displayed.
      */
     showUserMenu?: boolean;
+    /**
+     * Whether the fluid layout (less padding) should be used.
+     */
+    useFluidLayout?: boolean;
+    /**
+     * Configuration for the pages related to the security.
+     */
+    securityLayoutConfig?: SecurityLayoutConfig;
 }

package/layout/src/pages/auth-flow/auth-flow-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { OauthCallbackComponent } from './oauth-callback/oauth-callback.component';
+import { LoggedOutComponent } from './logged-out/logged-out.component';
+import { LoginComponent } from './login/login.component';
+
+/**
+ * Auth flow routes.
+ */
+export const routes: Routes = [
+    { path: 'oauth/callback', component: OauthCallbackComponent },
+    { path: 'logged-out', component: LoggedOutComponent },
+    { path: 'login', component: LoginComponent }
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes, { useHash: true })],
+    exports: [RouterModule]
+})
+export class AuthFlowRoutingModule {}

package/layout/src/pages/auth-flow/auth-flow.module.ts

@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { UpdButtonModule } from '@updevs/components/button';
+import { UpdLinkModule } from '@updevs/components/link';
+import { UpdIconsModule } from '@updevs/icons';
+import { UpdCardModule } from '@updevs/components/card';
+import { UpdFormModule } from '@updevs/components/form';
+import { TranslocoDirective } from '@jsverse/transloco';
+
+import { LoginComponent } from './login/login.component';
+import { OauthCallbackComponent } from './oauth-callback/oauth-callback.component';
+import { LoggedOutComponent } from './logged-out/logged-out.component';
+import { AuthFlowRoutingModule } from './auth-flow-routing.module';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        AuthFlowRoutingModule,
+        UpdButtonModule,
+        UpdIconsModule,
+        FormsModule,
+        TranslocoDirective,
+        UpdLinkModule,
+        UpdCardModule,
+        UpdFormModule
+    ],
+    declarations: [
+        LoginComponent,
+        OauthCallbackComponent,
+        LoggedOutComponent
+    ],
+    exports: [
+        LoginComponent,
+        OauthCallbackComponent,
+        LoggedOutComponent
+    ]
+})
+export class AuthFlowModule {
+}

package/layout/src/pages/auth-flow/logged-out/logged-out.component.html

@@ -0,0 +1 @@
+<p>logged-out works!</p>

package/layout/src/pages/auth-flow/logged-out/logged-out.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoggedOutComponent } from './logged-out.component';
+
+describe('LoggedOutComponent', () => {
+  let component: LoggedOutComponent;
+  let fixture: ComponentFixture<LoggedOutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoggedOutComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoggedOutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/layout/src/pages/auth-flow/logged-out/logged-out.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'upd-logged-out',
+  templateUrl: './logged-out.component.html',
+  styleUrls: ['./logged-out.component.scss']
+})
+export class LoggedOutComponent {
+
+}

package/layout/src/pages/auth-flow/login/login.component.html

@@ -0,0 +1,103 @@
+<ng-container *transloco="let t; prefix: 'UpDevs.Login'">
+    <div class="page page-center">
+        @switch (config.layout) {
+            @case ('centered-box') {
+                <div class="container container-tight py-4">
+                    <ng-container [ngTemplateOutlet]="loginCardTpl"></ng-container>
+                </div>
+            }
+            @case ('box-with-picture') {
+                <div class="container container-normal py-4">
+                    <div class="row align-items-center g-4">
+                        <div class="col-lg">
+                            <div class="container-tight">
+                                <ng-container [ngTemplateOutlet]="loginCardTpl"></ng-container>
+                            </div>
+                        </div>
+                        <div class="col-lg d-none d-lg-block">
+                            <img height="300" class="d-block mx-auto upd-right-login-image" />
+                        </div>
+                    </div>
+                </div>
+            }
+            @case ('cover') {
+                <div class="row g-0 flex-fill">
+                    <div class="col-12 col-lg-6 col-xl-4 border-top-wide d-flex flex-column justify-content-center" [ngClass]="border">
+                        <div class="container container-tight my-5 px-lg-5">
+                            <ng-container [ngTemplateOutlet]="headerTpl"></ng-container>
+
+                            <h2 class="h3 text-center mb-3">
+                                {{ t('Title') }}
+                            </h2>
+
+                            <ng-container [ngTemplateOutlet]="loginFormTpl"></ng-container>
+                            <ng-container [ngTemplateOutlet]="socialLoginTpl"></ng-container>
+                            <ng-container [ngTemplateOutlet]="noAccountTpl"></ng-container>
+                        </div>
+                    </div>
+                    <div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block">
+                        <div class="bg-cover h-100 min-vh-100 upd-right-login-cover-image"></div>
+                    </div>
+                </div>
+            }
+        }
+    </div>
+
+    <ng-template #loginCardTpl>
+        <ng-container [ngTemplateOutlet]="headerTpl"></ng-container>
+        <upd-card [removeBorder]="true">
+            <div class="p-4">
+                <h2 class="h2 text-center mb-4">
+                    {{ t('Title') }}
+                </h2>
+                <ng-container [ngTemplateOutlet]="loginFormTpl"></ng-container>
+            </div>
+            <ng-container [ngTemplateOutlet]="socialLoginTpl"></ng-container>
+        </upd-card>
+        <ng-container [ngTemplateOutlet]="noAccountTpl"></ng-container>
+    </ng-template>
+
+    <ng-template #loginFormTpl>
+        <upd-form [rows]="formRows" [hasActionsSection]="false" [(formGroup)]="formGroup"></upd-form>
+        <div class="form-footer">
+            <upd-button [colorStyle]="config.signInButtonColor" (clicked)="login()" [isLoading]="isSigningIn()" customClasses="w-100">
+                {{ t('SignIn') }}
+            </upd-button>
+            <div class="d-flex mt-2">
+                <upd-link class="ms-auto" [customClasses]="linkClasses">{{ t('RecoverPassword') }}</upd-link>
+            </div>
+        </div>
+    </ng-template>
+
+    <ng-template #socialLoginTpl>
+        @if (config.socialLoginButtons.length > 0) {
+            <div class="hr-text">
+                {{ t('Or') }}
+            </div>
+            <div class="card-body">
+                <div class="row">
+                    @for (btn of config.socialLoginButtons; track btn) {
+                        <div class="col">
+                            <upd-button [model]="btn"></upd-button>
+                        </div>
+                    }
+                </div>
+            </div>
+        }
+    </ng-template>
+
+    <ng-template #headerTpl>
+        <div class="text-center mb-4">
+            <a href="." class="navbar-brand navbar-brand-autodark">
+                <img height="36" class="navbar-brand-image upd-brand-logo" />
+            </a>
+        </div>
+    </ng-template>
+
+    <ng-template #noAccountTpl>
+        <div class="text-center text-muted mt-3">
+            {{ t('NoAccountYet') }}
+            <upd-link [customClasses]="linkClasses">{{ t('SignUp') }}</upd-link>
+        </div>
+    </ng-template>
+</ng-container>

package/layout/src/pages/auth-flow/login/login.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/layout/src/pages/auth-flow/login/login.component.ts

@@ -0,0 +1,97 @@
+import { Component, inject, OnDestroy, OnInit, model, signal } from '@angular/core';
+import { FormGroup, Validators } from '@angular/forms';
+import { LayoutService } from '@updevs/sdk/layout';
+import { AuthService } from '@updevs/sdk/security';
+import { FormRowModel, DynamicFieldType } from '@updevs/components/form';
+import { finalize } from 'rxjs';
+
+import { UpdLayoutConfigService } from '../../../services/upd-layout-config.service';
+
+@Component({
+    selector: 'upd-login',
+    templateUrl: './login.component.html',
+    styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit, OnDestroy {
+    formGroup = model(new FormGroup({}));
+    formRows: FormRowModel[] = [];
+    isSigningIn = signal(false);
+    readonly layoutConfigService = inject(UpdLayoutConfigService);
+    readonly config = this.layoutConfigService.config.securityLayoutConfig.loginPage;
+    get border(): string {
+        return `border-${this.config.borderColor}`;
+    }
+    get linkClasses(): string[] {
+        return [`link-${this.config.linksColor}`];
+    }
+
+    private get boxBgColor(): string {
+        return this.config.bgColor || (!!this.config.bgStyle ? `bg-${this.config.bgStyle}` : '') || 'bg-white';
+    }
+
+    private readonly bodyClasses = ['border-top-wide', this.border, 'd-flex', 'flex-column'];
+    private readonly authService = inject(AuthService);
+    private readonly layoutService = inject(LayoutService);
+
+    ngOnInit(): void {
+        this.layoutService.addBodyClasses(this.boxBgColor);
+
+        if (this.config.layout !== 'cover') {
+            this.layoutService.addBodyClasses(...this.bodyClasses);
+        }
+
+        this.formRows = [
+            {
+                fields: [
+                    {
+                        name: 'username',
+                        type: DynamicFieldType.Input,
+                        colSize: { default: 12 },
+                        label: { text: 'UpDevs.Login.Email', isTranslated: false },
+                        validators: [Validators.required, Validators.minLength(3)],
+                        initValue: 'stein@live.it'
+                    }
+                ]
+            },
+            {
+                fields: [
+                    {
+                        name: 'password',
+                        type: DynamicFieldType.Input,
+                        inputType: 'password',
+                        colSize: { default: 12 },
+                        label: { text: 'UpDevs.Login.Password', isTranslated: false },
+                        validators: [Validators.required, Validators.minLength(3)],
+                        initValue: 'updevs123'
+                    }
+                ]
+            },
+            {
+                fields: [
+                    {
+                        name: 'rememberMe',
+                        type: DynamicFieldType.Checkbox,
+                        colSize: { default: 12 },
+                        label: { text: 'UpDevs.Login.RememberMe', isTranslated: false },
+                        initValue: false
+                    }
+                ]
+            }
+        ];
+    }
+
+    ngOnDestroy(): void {
+        this.layoutService.removeBodyClasses(this.boxBgColor);
+
+        if (this.config.layout !== 'cover') {
+            this.layoutService.removeBodyClasses(...this.bodyClasses);
+        }
+    }
+
+    login(): void {
+        this.isSigningIn.set(true);
+        this.authService.login((this.formGroup().value as any).username, (this.formGroup().value as any).password)
+            .pipe(finalize(() => this.isSigningIn.set(false)))
+            .subscribe();
+    }
+}

package/layout/src/pages/auth-flow/oauth-callback/oauth-callback.component.html

@@ -0,0 +1 @@
+<p>oauth-callback works!</p>

package/layout/src/pages/auth-flow/oauth-callback/oauth-callback.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OauthCallbackComponent } from './oauth-callback.component';
+
+describe('OauthCallbackComponent', () => {
+  let component: OauthCallbackComponent;
+  let fixture: ComponentFixture<OauthCallbackComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ OauthCallbackComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(OauthCallbackComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/layout/src/pages/auth-flow/oauth-callback/oauth-callback.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'upd-oauth-callback',
+  templateUrl: './oauth-callback.component.html',
+  styleUrls: ['./oauth-callback.component.scss']
+})
+export class OauthCallbackComponent {
+
+}

package/layout/src/partials/footer/footer-copyright.directive.spec.ts

@@ -0,0 +1,8 @@
+import { FooterCopyrightDirective } from './footer-copyright.directive';
+
+describe('FooterCopyrightDirective', () => {
+  it('should create an instance', () => {
+    const directive = new FooterCopyrightDirective();
+    expect(directive).toBeTruthy();
+  });
+});

package/layout/src/partials/footer/footer-copyright.directive.ts

@@ -0,0 +1,6 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+    selector: '[updFooterCopyright]'
+})
+export class FooterCopyrightDirective {}

package/layout/src/partials/footer/footer.component.html

@@ -0,0 +1,35 @@
+<div class="container-xl">
+    <div class="row text-center align-items-center flex-row-reverse">
+        <div class="col-lg-auto ms-lg-auto">
+            @if (links.length > 0) {
+                <ul class="list-inline list-inline-dots mb-0">
+                    @for (link of links; track link) {
+                        <li class="list-inline-item">
+                            <a href="{{link.url}}" target="{{link.target}}" class="link-secondary">
+                                <span [innerHTML]="link.text"></span>
+                            </a>
+                        </li>
+                    }
+                </ul>
+            }
+        </div>
+        <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+            @if (!!footerCopyrightTemplate) {
+                <ng-container [ngTemplateOutlet]="footerCopyrightTemplate"></ng-container>
+            } @else {
+                <ul class="list-inline list-inline-dots mb-0">
+                    <li class="list-inline-item">
+                        <ng-container *transloco="let t; prefix: 'UpDevs.Footer'">
+                            {{ t('Prefix') }} {{ t('Symbol') }} {{ currentYear }} {{ t('Suffix') }}
+                        </ng-container>
+                    </li>
+                    @if (!!version) {
+                        <li class="list-inline-item">
+                            {{ version }}
+                        </li>
+                    }
+                </ul>
+            }
+        </div>
+    </div>
+</div>

package/layout/src/partials/footer/footer.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+    let component: FooterComponent;
+    let fixture: ComponentFixture<FooterComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [ FooterComponent ]
+        })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(FooterComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/layout/src/partials/footer/footer.component.ts

@@ -0,0 +1,64 @@
+import {
+    Component,
+    ContentChild,
+    TemplateRef,
+    HostBinding,
+    OnInit,
+    OnChanges,
+    SimpleChanges,
+    ViewEncapsulation
+} from '@angular/core';
+import { LinkModel } from '@updevs/sdk/core';
+import { BaseComponent } from '@updevs/sdk/layout';
+
+import { FooterCopyrightDirective } from './footer-copyright.directive';
+
+@Component({
+    selector: 'upd-footer',
+    templateUrl: './footer.component.html',
+    styleUrls: ['./footer.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FooterComponent extends BaseComponent implements OnInit, OnChanges {
+    @HostBinding('class') wrapperClasses = '';
+    @ContentChild(FooterCopyrightDirective, { read: TemplateRef, static: true }) footerCopyrightTemplate?: TemplateRef<any>;
+
+    /**
+     * Whether the footer will always be shown.
+     */
+    isSticky = false;
+    /**
+     * Whether the footer is transparent or not.
+     */
+    isTransparent = true;
+    /**
+     * Links.
+     */
+    links: LinkModel[] = [];
+    /**
+     * Current year.
+     */
+    currentYear = new Date().getFullYear();
+    /**
+     * Version of the application.
+     */
+    version?: string;
+
+    private baseWrapperClasses = 'footer d-print-none';
+
+    ngOnInit(): void {
+        this.updateWrapperClasses();
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (!!changes['isSticky'].currentValue || !!changes['isTransparent'].currentValue) {
+            this.updateWrapperClasses();
+        }
+    }
+
+    private updateWrapperClasses(): void {
+        const stickyBottomCls = this.isSticky ? ' sticky-bottom' : '';
+        const transparentCls = this.isTransparent ? ' footer-transparent' : '';
+        this.wrapperClasses = `${this.baseWrapperClasses}${stickyBottomCls}${transparentCls}`;
+    }
+}