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

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

@@ -1,16 +0,0 @@
-import { SecurityLayoutConfig } from './security-layout.config';
-import { LoginPageConfigModel } from './login-page-config.model';
-
-/**
- * Configuration for the pages related to the security.
- */
-export class SecurityLayoutConfigModel implements SecurityLayoutConfig {
-    /**
-     * Configuration of the login page.
-     */
-    loginPage: LoginPageConfigModel;
-
-    constructor(init?: SecurityLayoutConfig) {
-        this.loginPage = new LoginPageConfigModel(init?.loginPage);
-    }
-}

package/layout/src/models/security-layout.config.ts

@@ -1,11 +0,0 @@
-import { LoginPageConfig } from './login-page.config';
-
-/**
- * Configuration for the pages related to the security.
- */
-export interface SecurityLayoutConfig {
-    /**
-     * Configuration of the login page.
-     */
-    loginPage?: LoginPageConfig;
-}

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

@@ -1,69 +0,0 @@
-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/src/models/upd-layout.config.ts

@@ -1,47 +0,0 @@
-import { SecurityLayoutConfig } from './security-layout.config';
-
-/**
- * Layout configuration.
- */
-export interface 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?: SecurityLayoutConfig;
-}

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

@@ -1,21 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

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

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

@@ -1,23 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,103 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

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

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

@@ -1,23 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

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

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

@@ -1,35 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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}`;
-    }
-}

package/layout/src/partials/footer/public-api.ts

@@ -1,2 +0,0 @@
-export * from './footer-copyright.directive';
-export * from './footer.component';