spiderly 0.0.8 → 19.0.1

package/eslint.config.js

@@ -0,0 +1,32 @@
+// @ts-check
+const tseslint = require("typescript-eslint");
+const rootConfig = require("../../eslint.config.js");
+
+module.exports = tseslint.config(
+  ...rootConfig,
+  {
+    files: ["**/*.ts"],
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "lib",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "lib",
+          style: "kebab-case",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    rules: {},
+  }
+);

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/spiderly",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    { "input": "src/lib", "glob": "**/*.scss", "output": "styles" }
+  ]
+}

package/package.json

@@ -1,65 +1,55 @@
-{
-  "name": "spiderly",
-  "version": "0.0.8",
-  "author": "Filip Trivan",
-  "license": "MIT",
-  "description": "Spiderly Angular Library to use in combination with Spiderly.",
-  "bugs": {
-    "url": "https://github.com/filiptrivan/spiderly/issues",
-    "email": "filiptrivan5@gmail.com"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/filiptrivan/spiderly.git"
-  },
-  "homepage": "https://www.spiderly.dev",
-  "keywords": [
-    "spiderly",
-    "spiderly framework",
-    "spiderly angular",
-    "angular spiderly",
-    "angular spiderly framework",
-    "spiderly framework angular"
-  ],
-  "private": false,
-  "peerDependencies": {
-    "@abacritt/angularx-social-login": "2.2.0",
-    "@angular/animations": "17.3.12",
-    "@angular/cdk": "17.3.10",
-    "@angular/common": "17.3.12",
-    "@angular/compiler": "17.3.12",
-    "@angular/core": "17.3.12",
-    "@angular/forms": "17.3.12",
-    "@angular/platform-browser": "17.3.12",
-    "@angular/platform-browser-dynamic": "17.3.12",
-    "@angular/router": "17.3.12",
-    "@jsverse/transloco": "7.5.0",
-    "file-saver": "2.0.5",
-    "json-parser": "3.1.2",
-    "ngx-spinner": "17.0.0",
-    "primeflex": "3.3.1",
-    "primeicons": "7.0.0",
-    "primeng": "17.18.9",
-    "quill": "2.0.2",
-    "rxjs": "7.8.1",
-    "webpack-dev-server": "4.15.1",
-    "zone.js": "0.14.10"
-  },
-  "dependencies": {
-    "tslib": "2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/spiderly.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/spiderly.mjs",
-      "esm": "./esm2022/spiderly.mjs",
-      "default": "./fesm2022/spiderly.mjs"
-    }
-  }
-}
+{
+    "name":  "spiderly",
+    "version":  "19.0.1",
+    "author":  "Filip Trivan",
+    "license":  "MIT",
+    "description":  "Spiderly Angular Library to use in combination with Spiderly.",
+    "bugs":  {
+        "url":  "https://github.com/filiptrivan/spiderly/issues",
+        "email":  "filiptrivan5@gmail.com"
+    },
+    "repository":  {
+        "type":  "git",
+        "url":  "https://github.com/filiptrivan/spiderly.git"
+    },
+    "homepage":  "https://www.spiderly.dev",
+    "keywords":  [
+        "spiderly",
+        "spiderly framework",
+        "spiderly angular",
+        "angular spiderly",
+        "angular spiderly framework",
+        "spiderly framework angular",
+        "spiderly code generator",
+        "spiderly .net code generator",
+        ".net (c#) web app boilerplate code generator",
+        ".net (c#) + angular web app boilerplate code generator"
+    ],
+    "private":  false,
+    "peerDependencies":  {
+        "@abacritt/angularx-social-login":  "2.2.0",
+        "@angular/animations": "19.2.13",
+        "@angular/common": "19.2.13",
+        "@angular/compiler": "19.2.13",
+        "@angular/core": "19.2.13",
+        "@angular/forms": "19.2.13",
+        "@angular/platform-browser": "19.2.13",
+        "@angular/platform-browser-dynamic": "19.2.13",
+        "@angular/router": "19.2.13",
+        "@jsverse/transloco":  "7.5.0",
+        "file-saver":  "2.0.5",
+        "json-parser":  "3.1.2",
+        "ngx-spinner":  "19.0.0",
+        "primeflex":  "3.3.1",
+        "primeicons":  "7.0.0",
+        "primeng": "19.1.3",
+        "quill":  "2.0.2",
+        "rxjs":  "7.8.1",
+        "webpack-dev-server":  "4.15.1",
+        "zone.js": "0.15.1"
+    },
+    "dependencies":  {
+        "tslib":  "2.3.0"
+    },
+    "sideEffects":  false
+}

package/src/lib/components/auth/login/login.component.html

@@ -0,0 +1,25 @@
+<ng-container *transloco="let t">
+    @if (loginFormGroup != null) {
+        @if (showEmailSentDialog == false) {
+            <auth (onCompanyNameChange)="companyNameChange($event)">
+                <form [formGroup]="formGroup" style="margin-bottom: 16px;"> <!-- FT: We are not loading anything from the server here so we don't need defer block -->
+                    <div class="col-12" style="padding-left: 0; padding-right: 0; margin-bottom: 32px;">
+                        <spiderly-textbox [control]="control('email', loginFormGroup)"></spiderly-textbox>
+                    </div>
+                    
+                    <div style="display: flex; flex-direction: column; gap: 16px;">
+                        <spiderly-button [label]="t('Login')" (onClick)="sendLoginVerificationEmail()" [outlined]="true" [style]="{width: '100%'}"></spiderly-button>
+                        <!-- TODO FT: Add possibility to change this name from the specific project -->
+                        <spiderly-button *ngIf="usersCanRegister" [label]="t('NewToJoinNow', {companyName: companyName})" routerLink="/registration" [style]="{width: '100%'}"></spiderly-button>
+                    </div>
+                </form>
+            </auth>
+        }
+        @else {
+            <login-verification [email]="loginFormGroup.controls.email.getRawValue()"></login-verification>
+        }
+    }
+    @else {
+        <!-- TODO FT: Add skeleton -->
+    }
+</ng-container>

package/src/lib/components/auth/login/login.component.ts

@@ -0,0 +1,77 @@
+import { ActivatedRoute, Router } from '@angular/router';
+import { ChangeDetectorRef, Component, KeyValueDiffers, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+import { BaseFormCopy } from '../../base-form/base-form copy';
+import { Login } from '../../../entities/security-entities';
+import { SpiderlyFormGroup } from '../../spiderly-form-control/spiderly-form-control';
+import { SpiderlyMessageService } from '../../../services/spiderly-message.service';
+import { BaseFormService } from '../../../services/base-form.service';
+import { AuthBaseService } from '../../../services/auth-base.service';
+import { ConfigBaseService } from '../../../services/config-base.service';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { AuthComponent } from '../partials/auth.component';
+import { PrimengModule } from '../../../modules/primeng.module';
+import { SpiderlyControlsModule } from '../../../controls/spiderly-controls.module';
+import { LoginVerificationComponent } from '../partials/login-verification.component';
+
+@Component({
+    selector: 'app-login',
+    templateUrl: './login.component.html',
+    imports: [
+      CommonModule,
+      ReactiveFormsModule,
+      AuthComponent,
+      PrimengModule,
+      SpiderlyControlsModule,
+      LoginVerificationComponent,
+      TranslocoDirective,
+    ]
+})
+export class LoginComponent extends BaseFormCopy implements OnInit {
+    loginFormGroup = new SpiderlyFormGroup<Login>({});
+
+    companyName: string;
+    showEmailSentDialog: boolean = false;
+    usersCanRegister: boolean = this.config.usersCanRegister;
+
+    constructor(
+      protected override differs: KeyValueDiffers,
+      protected override http: HttpClient,
+      protected override messageService: SpiderlyMessageService, 
+      protected override changeDetectorRef: ChangeDetectorRef,
+      protected override router: Router, 
+      protected override route: ActivatedRoute,
+      protected override translocoService: TranslocoService,
+      protected override baseFormService: BaseFormService,
+      private authService: AuthBaseService, 
+      private config: ConfigBaseService
+    ) { 
+      super(differs, http, messageService, changeDetectorRef, router, route, translocoService, baseFormService);
+    }
+
+    override ngOnInit(){
+        this.initLoginFormGroup(new Login({}));
+    }
+    
+    initLoginFormGroup(model: Login){
+      this.initFormGroup(this.loginFormGroup, this.formGroup, model, model.typeName, []);
+    }
+
+    companyNameChange(companyName: string){
+      this.companyName = companyName;
+    }
+
+    sendLoginVerificationEmail() {
+        let isFormGroupValid: boolean = this.baseFormService.checkFormGroupValidity(this.loginFormGroup);
+        
+        if (isFormGroupValid == false) 
+          return;
+
+        this.authService.sendLoginVerificationEmail(this.loginFormGroup.getRawValue()).subscribe(()=>{
+            this.showEmailSentDialog = true;
+        });
+    }
+
+}

package/src/lib/components/auth/partials/auth.component.html

@@ -0,0 +1,29 @@
+<ng-container *transloco="let t">
+    <div class="flex min-h-screen overflow-hidden" style="padding: 20px;">
+        <div class="flex flex-column w-full">
+            <div class="w-full sm:w-30rem" style="margin: auto; border-radius:50px; padding:0.3rem; background: linear-gradient(180deg, var(--p-primary-color) 10%, rgba(33, 150, 243, 0) 30%);">
+                <div class="surface-card py-6 px-5 sm:px-6" style="border-radius:45px;">
+                    <div class="text-center" style="margin-bottom: 38px;">
+                        <img *ngIf="image != null" [src]="image" alt="{{companyName}} Logo" title="{{companyName}} Logo" height="60">
+                        <i *ngIf="image == null" class="pi pi-spin pi-spinner primary-color" style="font-size: 2rem"></i>
+                    </div>
+
+                    <ng-content></ng-content>
+    
+                    <div *ngIf="hasGoogleAuth && showGoogleAuth">
+                        <div style="display: flex; align-items: center; gap: 7px; justify-content: center; margin-bottom: 16px;">
+                            <div class="separator"></div>
+                            <div>{{t('or')}}</div>
+                            <div class="separator"></div>
+                        </div>
+                        <div>
+                            <!-- https://code-maze.com/how-to-sign-in-with-google-angular-aspnet-webapi/ -->
+                            <google-button (loginWithGoogle)="onGoogleSignIn($event)"></google-button> 
+                        </div>
+                    </div>
+    
+                </div>
+            </div>
+        </div>
+    </div>
+</ng-container>

package/src/lib/components/auth/partials/auth.component.ts

@@ -0,0 +1,60 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { Subscription } from "rxjs";
+import { TranslocoDirective } from "@jsverse/transloco";
+import { GoogleButtonComponent } from "../../spiderly-buttons/google-button/google-button.component";
+import { ConfigBaseService } from "../../../services/config-base.service";
+import { AuthBaseService } from "../../../services/auth-base.service";
+
+@Component({
+    selector: 'auth',
+    templateUrl: './auth.component.html',
+    styles: [],
+    imports: [
+        CommonModule,
+        GoogleButtonComponent,
+        TranslocoDirective,
+    ]
+})
+export class AuthComponent {
+  private initCompanyAuthDialogDetailsSubscription: Subscription | null = null;
+
+  @Output() onCompanyNameChange: EventEmitter<string> = new EventEmitter();
+  @Input() showGoogleAuth: boolean = true;
+
+  hasGoogleAuth: boolean = this.config.googleAuth;
+  companyName: string;
+  image: string;
+  
+  constructor(
+    private config: ConfigBaseService,
+    private authService: AuthBaseService,
+  ) {
+
+  }
+
+  ngOnInit(){
+    this.initCompanyDetails();
+  }
+
+  initCompanyDetails() {
+    this.initCompanyAuthDialogDetailsSubscription = this.authService.initCompanyAuthDialogDetails().subscribe(initCompanyAuthDialogDetails => {
+      if (initCompanyAuthDialogDetails != null) {
+        this.image = initCompanyAuthDialogDetails.image;
+        this.companyName = initCompanyAuthDialogDetails.companyName;
+        this.onCompanyNameChange.next(this.companyName);
+      }
+    })
+  }
+
+  onGoogleSignIn(googleWrapper: any){
+    googleWrapper.click();
+  }
+
+  ngOnDestroy(): void {
+    if (this.initCompanyAuthDialogDetailsSubscription) {
+      this.initCompanyAuthDialogDetailsSubscription.unsubscribe();
+    }
+  }
+}
+

package/src/lib/components/auth/partials/login-verification.component.html

@@ -0,0 +1,2 @@
+<verification-wrapper [email]="email" (onResendVerificationToken)="resendVerificationToken()" (onCodeSubmit)="onCodeSubmit($event)"></verification-wrapper>
+

package/src/lib/components/auth/partials/login-verification.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { VerificationWrapperComponent } from './verification-wrapper.component';
+import { TranslocoService } from '@jsverse/transloco';
+import { SpiderlyMessageService } from '../../../services/spiderly-message.service';
+import { AuthBaseService } from '../../../services/auth-base.service';
+
+@Component({
+    selector: 'login-verification',
+    templateUrl: './login-verification.component.html',
+    imports: [
+        VerificationWrapperComponent
+    ]
+})
+export class LoginVerificationComponent implements OnInit {
+    @Input() email: string;
+    @Input() userId: number;
+
+    constructor(
+      private authService: AuthBaseService, 
+      private messageService: SpiderlyMessageService,
+      private translocoService: TranslocoService,
+    ) { 
+    }
+
+    ngOnInit(){
+    }
+    
+    resendVerificationToken(){
+        this.authService.sendLoginVerificationEmail({email: this.email}).subscribe(() => {
+            this.messageService.successMessage(this.translocoService.translate('SuccessfullySentVerificationCode'));
+        });
+    }
+
+    onCodeSubmit(event: string){
+        this.authService.login({email: this.email, verificationCode: event}).subscribe(() => {
+            this.messageService.successMessage(this.translocoService.translate('YouHaveSuccessfullyVerifiedYourAccount'));
+            this.authService.navigateToDashboard();
+        });
+    }
+}
+

package/src/lib/components/auth/partials/registration-verification.component.html

@@ -0,0 +1 @@
+<verification-wrapper [email]="email" (onResendVerificationToken)="resendVerificationToken()" (onCodeSubmit)="onCodeSubmit($event)"></verification-wrapper>

package/src/lib/components/auth/partials/registration-verification.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { VerificationWrapperComponent } from './verification-wrapper.component';
+import { TranslocoService } from '@jsverse/transloco';
+import { SpiderlyMessageService } from '../../../services/spiderly-message.service';
+import { AuthBaseService } from '../../../services/auth-base.service';
+
+@Component({
+    selector: 'registration-verification',
+    templateUrl: './registration-verification.component.html',
+    imports: [
+        VerificationWrapperComponent
+    ]
+})
+export class RegistrationVerificationComponent implements OnInit {
+    @Input() email: string;
+
+    constructor(
+      private authService: AuthBaseService, 
+      private messageService: SpiderlyMessageService, 
+      private translocoService: TranslocoService,
+    ) { 
+    }
+
+    ngOnInit(){
+    }
+
+    resendVerificationToken(){
+        this.authService.sendRegistrationVerificationEmail({email: this.email}).subscribe(() => {
+            this.messageService.successMessage(this.translocoService.translate('SuccessfullySentVerificationCode'));
+        });
+    }
+
+    onCodeSubmit(event: string){
+        this.authService.register({email: this.email, verificationCode: event}).subscribe(() => {
+            this.messageService.successMessage(this.translocoService.translate('YouHaveSuccessfullyVerifiedYourAccount'));
+            this.authService.navigateToDashboard();
+        });
+    }
+
+}
+

package/src/lib/components/auth/partials/verification-wrapper.component.html

@@ -0,0 +1,39 @@
+<ng-container *transloco="let t">
+    <div class="min-h-screen" style="display: flex; justify-content: center; align-items: center;">
+        <div class="dialog" style="padding: 0px;">
+            @if (verificationTokenRequestFormGroup != null) {
+                <spiderly-panel>
+                    <panel-header [title]="t('AccountVerificationHeader')" [showBigTitle]="true" icon="pi pi-envelope"></panel-header>
+                    
+                    <panel-body>
+                        <form class="grid">
+                            <div class="col-12">
+                                <div class="header">{{t('AccountVerificationTitle')}}</div>
+                            </div>
+                            <div class="col-12">
+                                {{t('AccountVerificationDescription', {email: email})}}
+                            </div>
+                            <div class="col-12">
+                                <spiderly-textbox [control]="control('verificationCode', verificationTokenRequestFormGroup)"></spiderly-textbox>
+                            </div>
+                            <div class="col-12">
+                                <spiderly-button (onClick)="codeSubmit()" [label]="t('Submit')" icon="pi pi-verified"></spiderly-button>
+                            </div>
+                        </form>
+                    </panel-body>
+                    
+                    <panel-footer>
+                        <a pButton class="p-button-link" [label]="t('GoToGmail')" icon="pi pi-external-link" href="https://mail.google.com/mail/u/" target="_blank" rel="noopener noreferrer"></a>
+                        <a pButton class="p-button-link" [label]="t('GoToYahoo')" icon="pi pi-external-link" href="https://mail.yahoo.com/d/folders/1/" target="_blank" rel="noopener noreferrer"></a>
+                    </panel-footer>
+                    <panel-footer>
+                        <div>{{t('ResendVerificationCodeFirstPart')}} <a class="link" (click)="resendVerificationToken()">{{t('ResendVerificationCodeLinkSecondPart')}}</a></div>
+                    </panel-footer>
+                </spiderly-panel>
+            }
+            @else {
+                <!-- TODO FT: Add skeleton -->
+            }
+        </div>
+    </div>
+</ng-container>

package/src/lib/components/auth/partials/verification-wrapper.component.ts

@@ -0,0 +1,68 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, KeyValueDiffers, OnInit, Output } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+import { BaseFormCopy } from '../../base-form/base-form copy';
+import { BaseFormService } from '../../../services/base-form.service';
+import { SpiderlyFormGroup } from '../../spiderly-form-control/spiderly-form-control';
+import { SpiderlyControlsModule } from '../../../controls/spiderly-controls.module';
+import { VerificationTokenRequest } from '../../../entities/security-entities';
+import { PrimengModule } from '../../../modules/primeng.module';
+import { SpiderlyMessageService } from '../../../services/spiderly-message.service';
+
+@Component({
+    selector: 'verification-wrapper',
+    templateUrl: './verification-wrapper.component.html',
+    imports: [
+        CommonModule,
+        PrimengModule,
+        FormsModule,
+        ReactiveFormsModule,
+        SpiderlyControlsModule,
+        TranslocoDirective,
+    ]
+})
+export class VerificationWrapperComponent extends BaseFormCopy implements OnInit {
+    verificationTokenRequestFormGroup = new SpiderlyFormGroup<VerificationTokenRequest>({});
+
+    @Input() email: string;
+    @Output() onResendVerificationToken: EventEmitter<any> = new EventEmitter();
+    @Output() onCodeSubmit: EventEmitter<string> = new EventEmitter();
+
+    constructor(
+      protected override differs: KeyValueDiffers,
+      protected override http: HttpClient,
+      protected override messageService: SpiderlyMessageService, 
+      protected override changeDetectorRef: ChangeDetectorRef,
+      protected override router: Router, 
+      protected override route: ActivatedRoute,
+      protected override translocoService: TranslocoService,
+      protected override baseFormService: BaseFormService,
+    ) { 
+      super(differs, http, messageService, changeDetectorRef, router, route, translocoService, baseFormService);
+    }
+
+    override ngOnInit(){
+        this.initVerificationTokenRequestFormGroup(new VerificationTokenRequest({email: this.email}));
+    }
+
+    initVerificationTokenRequestFormGroup(model: VerificationTokenRequest){
+        this.initFormGroup(this.verificationTokenRequestFormGroup, this.formGroup, model, model.typeName, []);
+    }
+
+    codeSubmit(){
+        let isValid: boolean = this.baseFormService.checkFormGroupValidity(this.verificationTokenRequestFormGroup);
+    
+        if(isValid){
+            this.onCodeSubmit.next(this.verificationTokenRequestFormGroup.controls.verificationCode.getRawValue());
+        }
+    }
+
+    resendVerificationToken(){
+        this.onResendVerificationToken.next(null);
+    }
+
+}
+

package/src/lib/components/auth/registration/registration.component.html

@@ -0,0 +1,31 @@
+<ng-container *transloco="let t">
+    @if (registrationFormGroup != null) {
+        @if (showEmailSentDialog == false) {
+            <auth (onCompanyNameChange)="companyNameChange($event)">
+                <form [formGroup]="formGroup" style="margin-bottom: 16px;"> <!-- FT: We are not loading anything from the server here so we don't need defer block -->
+                    <div class="col-12" style="padding-left: 0; padding-right: 0;">
+                        <spiderly-textbox [control]="control('email', registrationFormGroup)"></spiderly-textbox>
+                    </div>
+                    
+                    <div class="mb-4 gap-5">
+                        <div class="text-center" style="font-size: smaller;">
+                            {{t('AgreementsOnRegister')}} <b routerLink="/user-agreement" class="primary-color cursor-pointer">{{t('UserAgreement')}}</b> {{t('and')}} <b routerLink="/privacy-policy" class="primary-color cursor-pointer">{{t('PrivacyPolicy')}}</b>.
+                        </div>
+                    </div>
+                    
+                    <div style="display: flex; flex-direction: column; gap: 16px;">
+                        <spiderly-button [label]="t('AgreeAndJoin')" (onClick)="sendRegistrationVerificationEmail()" [outlined]="true" [style]="{width: '100%'}"></spiderly-button>
+                        <!-- TODO FT: Add possibility to change this name from the specific project -->
+                        <spiderly-button [label]="t('AlreadyHasAccount', {companyName: companyName})" routerLink="/login" [style]="{width: '100%'}"></spiderly-button>
+                    </div>
+                </form>
+            </auth>
+        }
+        @else {
+            <registration-verification [email]="registrationFormGroup.controls.email.getRawValue()"></registration-verification>
+        }
+    }
+    @else {
+        <!-- TODO FT: Add skeleton -->
+    }
+</ng-container>