angular 21 (#25)

.github/workflows/prod.yml

@@ -22,10 +22,10 @@ jobs:
       - name: 🚚 Get latest code
         uses: actions/checkout@v4
 
-      - name: Use Node.js 22
+      - name: Use Node.js 24
         uses: actions/setup-node@v4
         with:
-          node-version: '22'
+          node-version: '24'
 
       - name: 🔨 Build Project
         run: |

README.md

@@ -98,7 +98,7 @@ Berry offers everything you need to create dashboards. We have included the foll
 
 ## Technology Stack
 
-- Angular 20
+- Angular 21
 - Bootstrap 5
 - TypeScript
 - JWT (i.e. Pro version)

angular.json

@@ -21,7 +21,7 @@
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": "",
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
@@ -38,8 +38,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "1.5mb",
+                  "maximumError": "1.5mb"
                 }
               ],
               "fileReplacements": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "berry-free-angular-admin-template",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "author": "CodedThemes",
   "license": "MIT",
   "private": false,
@@ -16,40 +16,39 @@
     "prettier": "prettier --write ./src"
   },
   "dependencies": {
-    "@angular/animations": "20.0.5",
-    "@angular/cdk": "20.0.4",
-    "@angular/common": "20.0.5",
-    "@angular/compiler": "20.0.5",
-    "@angular/core": "20.0.5",
-    "@angular/forms": "20.0.5",
-    "@angular/platform-browser": "20.0.5",
-    "@angular/platform-browser-dynamic": "20.0.5",
-    "@angular/router": "20.0.5",
-    "@ng-bootstrap/ng-bootstrap": "19.0.0",
+    "@angular/cdk": "21.0.3",
+    "@angular/common": "21.0.5",
+    "@angular/compiler": "21.0.5",
+    "@angular/core": "21.0.5",
+    "@angular/forms": "21.0.5",
+    "@angular/platform-browser": "21.0.5",
+    "@angular/platform-browser-dynamic": "21.0.5",
+    "@angular/router": "21.0.5",
+    "@ng-bootstrap/ng-bootstrap": "19.0.1",
     "@popperjs/core": "2.11.8",
-    "apexcharts": "4.7.0",
-    "bootstrap": "5.3.7",
-    "ng-apexcharts": "1.16.0",
+    "@standard-schema/spec": "^1.0.0",
+    "apexcharts": "5.3.6",
+    "bootstrap": "5.3.8",
+    "ng-apexcharts": "2.0.4",
     "ngx-scrollbar": "18.0.0",
     "rxjs": "~7.8.2",
-    "tslib": "2.8.1",
-    "zone.js": "~0.15.1"
+    "tslib": "2.8.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "20.0.4",
-    "@angular-eslint/builder": "20.1.1",
-    "@angular-eslint/eslint-plugin": "20.1.1",
-    "@angular-eslint/eslint-plugin-template": "20.1.1",
-    "@angular-eslint/schematics": "20.1.1",
-    "@angular-eslint/template-parser": "20.1.1",
-    "@angular/cli": "20.0.4",
-    "@angular/compiler-cli": "20.0.5",
-    "@eslint/eslintrc": "3.3.1",
-    "@eslint/js": "9.29.0",
-    "@typescript-eslint/eslint-plugin": "8.35.0",
-    "@typescript-eslint/parser": "8.35.0",
-    "eslint": "9.29.0",
-    "prettier": "3.6.1",
-    "typescript": "5.8.3"
+    "@angular-devkit/build-angular": "21.0.3",
+    "@angular-eslint/builder": "21.1.0",
+    "@angular-eslint/eslint-plugin": "21.1.0",
+    "@angular-eslint/eslint-plugin-template": "21.1.0",
+    "@angular-eslint/schematics": "21.1.0",
+    "@angular-eslint/template-parser": "21.1.0",
+    "@angular/cli": "21.0.3",
+    "@angular/compiler-cli": "21.0.5",
+    "@eslint/eslintrc": "3.3.3",
+    "@eslint/js": "9.39.1",
+    "@typescript-eslint/eslint-plugin": "8.49.0",
+    "@typescript-eslint/parser": "8.49.0",
+    "eslint": "9.39.1",
+    "prettier": "3.7.4",
+    "typescript": "5.9.3"
   }
 }

src/app/demo/pages/authentication/login/login.component.html

@@ -3,51 +3,86 @@
     <div class="auth-form">
       <div class="card my-5">
         <div class="card-body">
-          <a href="#" class="d-flex justify-content-center">
-            <img src="assets/images/logo-dark.svg" alt="logo" />
-          </a>
-          <div class="row">
-            <div class="d-flex justify-content-center">
-              <div class="auth-header">
-                <h2 class="text-secondary mt-5"><b>Hi, Welcome Back</b></h2>
-                <p class="fs-4 mt-2">Enter your credentials to continue</p>
+          <form (ngSubmit)="onSubmit($event)">
+            <a href="#" class="d-flex justify-content-center">
+              <img src="assets/images/logo-dark.svg" alt="logo" />
+            </a>
+            <div class="row">
+              <div class="d-flex justify-content-center">
+                <div class="auth-header">
+                  <h2 class="text-secondary mt-5"><b>Hi, Welcome Back</b></h2>
+                  <p class="fs-4 mt-2">Enter your credentials to continue</p>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="d-grid">
-            <button type="button" class="btn mt-2 btn-light-primary bg-light text-muted">
-              <img src="assets/images/authentication/google-icon.svg" alt="google" />
-              Sign In With Google
-            </button>
-          </div>
-          <div class="saprator mt-3">
-            <span>or</span>
-          </div>
-          <h5 class="my-4 d-flex justify-content-center">Sign in with Email address</h5>
-          <div class="form-floating mb-3">
-            <input type="email" class="form-control" id="floatingInput" value="info@codedthemes.com" />
-            <label for="floatingInput">Email address / Username</label>
-          </div>
-          <div class="form-floating mb-3">
-            <input type="password" class="form-control" id="password" value="12345" />
-            <label for="password">Password</label>
-          </div>
-          <div class="d-flex mt-1 justify-content-between">
-            <div class="form-check">
-              <input class="form-check-input input-primary" type="checkbox" id="customCheckc1" checked="" />
-              <label class="form-check-label text-muted" for="customCheckc1">Remember me</label>
+            <div class="d-grid">
+              <button type="button" class="btn mt-2 btn-light-primary bg-light text-muted">
+                <img src="assets/images/authentication/google-icon.svg" alt="google" />
+                Sign In With Google
+              </button>
             </div>
-            <h5 class="text-secondary">
-              <a href="javascript:">Forgot Password?</a>
+            <div class="saprator mt-3">
+              <span>or</span>
+            </div>
+            <h5 class="my-4 d-flex justify-content-center">Sign in with Email address</h5>
+            <div class="form-floating mb-3">
+              <input
+                type="email"
+                class="form-control"
+                id="floatingInput"
+                [class.is-invalid]="submitted() && loginForm.email().invalid()"
+                placeholder="Email Address"
+                [field]="loginForm.email"
+              />
+              <label for="floatingInput">Email address / Username</label>
+              @if (submitted() && loginForm.email().invalid()) {
+                <div class="invalid-feedback">
+                  @for (error of loginForm.email().errors(); track error.kind) {
+                    <div>{{ error.message }}</div>
+                  }
+                </div>
+              }
+            </div>
+            <div class="form-floating mb-3">
+              <input
+                type="password"
+                id="password"
+                class="form-control"
+                [field]="loginForm.password"
+                [class.is-invalid]="submitted() && loginForm.password().errors().length > 0"
+                placeholder="Password (min. 8 characters)"
+              />
+              <label for="password">Password</label>
+              @if (submitted() && loginForm.password().errors().length > 0) {
+                <div class="invalid-feedback">
+                  @for (error of loginForm.password().errors(); track error.kind) {
+                    <div>{{ error.message }}</div>
+                  }
+                </div>
+              }
+            </div>
+            <div class="d-flex mt-1 justify-content-between">
+              <div class="form-check">
+                <input class="form-check-input input-primary" type="checkbox" id="customCheckc1" checked />
+                <label class="form-check-label text-muted" for="customCheckc1">Remember me</label>
+              </div>
+              <h5 class="text-secondary">
+                <a href="javascript:">Forgot Password?</a>
+              </h5>
+            </div>
+            @if (error()) {
+              <div class="alert alert-danger" role="alert">
+                {{ error() }}
+              </div>
+            }
+            <div class="d-grid mt-4">
+              <button type="submit" class="btn btn-secondary">Sign In</button>
+            </div>
+            <hr />
+            <h5 class="d-flex justify-content-center">
+              <a [routerLink]="['/register']">Don't have an account?</a>
             </h5>
-          </div>
-          <div class="d-grid mt-4">
-            <button type="button" class="btn btn-secondary">Sign In</button>
-          </div>
-          <hr />
-          <h5 class="d-flex justify-content-center">
-            <a [routerLink]="['/register']">Don't have an account?</a>
-          </h5>
+          </form>
         </div>
       </div>
     </div>

src/app/demo/pages/authentication/login/login.component.ts

@@ -1,11 +1,40 @@
 // angular import
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, signal } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { email, Field, form, minLength, required } from '@angular/forms/signals';
+
 @Component({
   selector: 'app-login',
-  imports: [RouterModule],
+  imports: [RouterModule, Field],
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })
-export class LoginComponent {}
+export class LoginComponent {
+  private cd = inject(ChangeDetectorRef);
+
+  submitted = signal(false);
+  error = signal('');
+
+  loginModal = signal<{ email: string; password: string }>({
+    email: 'info@coddedtheme.com',
+    password: '123456'
+  });
+
+  loginForm = form(this.loginModal, (schemaPath) => {
+    required(schemaPath.email, { message: 'Email is required' });
+    email(schemaPath.email, { message: 'Enter a valid email address' });
+    required(schemaPath.password, { message: 'Password is required' });
+    minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' });
+  });
+
+  onSubmit(event: Event) {
+    this.submitted.set(true);
+    this.error.set('');
+
+    event.preventDefault();
+    const credentials = this.loginModal();
+    console.log('login user logged in with:', credentials);
+    this.cd.detectChanges();
+  }
+}