@team-codeme/crud-forge 0.0.0-stage → 1.0.1

package/fuse-starter-pack/fuse-v21.1/src/app/domains/auth/features/forgot-password/forgot-password.html

@@ -0,0 +1,54 @@
+<div class="flex flex-auto items-center justify-center p-4 sm:p-12">
+  <mat-card class="flex w-full max-w-sm flex-col p-8 sm:p-12">
+    <!-- Logo -->
+    <img
+      class="h-14 w-auto max-w-[14rem] object-contain object-left"
+      src="/images/logo/logo.png"
+      alt="CRUDForge logo"
+    />
+
+    <!-- Title -->
+    <div class="leading-tight mt-8 text-4xl font-extrabold tracking-tight">
+      Forgot password
+    </div>
+    <div class="mt-0.5 font-medium">Fill the form to reset your password</div>
+
+    <!-- Forgot password form -->
+    <form
+      class="mt-8"
+      (submit)="forgotPassword($event)"
+    >
+      <div class="flex flex-col gap-y-4">
+        <!-- Email field -->
+        <mat-form-field class="w-full">
+          <mat-label>Email address</mat-label>
+          <input
+            id="email"
+            matInput
+            [formField]="forgotPasswordForm.email"
+          />
+          <mat-error>
+            @if (
+              forgotPasswordForm.email().touched() &&
+              forgotPasswordForm.email().invalid()
+            ) {
+              @for (error of forgotPasswordForm.email().errors(); track error) {
+                {{ error.message }}
+              }
+            }
+          </mat-error>
+        </mat-form-field>
+      </div>
+
+      <!-- Submit button -->
+      <button
+        type="submit"
+        matButton="filled"
+        class="mt-6 w-full"
+        [disabled]="forgotPasswordForm().invalid()"
+      >
+        Reset password
+      </button>
+    </form>
+  </mat-card>
+</div>

package/fuse-starter-pack/fuse-v21.1/src/app/domains/auth/features/forgot-password/forgot-password.ts

@@ -0,0 +1,51 @@
+import { Component, inject, signal } from '@angular/core';
+import {
+  email,
+  form,
+  FormField,
+  required,
+  submit,
+} from '@angular/forms/signals';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCard } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'auth-forgot-password',
+  templateUrl: './forgot-password.html',
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    MatCheckboxModule,
+    FormField,
+    MatCard,
+  ],
+})
+export default class AuthForgotPassword {
+  // Dependencies
+  private router = inject(Router);
+
+  // State
+  protected forgotPasswordFormModel = signal({
+    email: '',
+  });
+  protected forgotPasswordForm = form(this.forgotPasswordFormModel, (form) => {
+    required(form.email, { message: 'You must enter an email address' });
+    email(form.email, { message: 'You must enter a valid email address' });
+  });
+
+  forgotPassword(event: Event) {
+    event.preventDefault();
+
+    submit(this.forgotPasswordForm, async () => {
+      // Navigate to a route, demo purposes only
+      this.router.navigateByUrl('/auth/reset-password');
+    });
+  }
+}

package/fuse-starter-pack/fuse-v21.1/src/app/domains/auth/features/reset-password/reset-password.html

@@ -0,0 +1,82 @@
+<div class="flex flex-auto items-center justify-center p-4 sm:p-12">
+  <mat-card class="flex w-full max-w-sm flex-col p-8 sm:p-12">
+    <!-- Logo -->
+    <img
+      class="h-14 w-auto max-w-[14rem] object-contain object-left"
+      src="/images/logo/logo.png"
+      alt="CRUDForge logo"
+    />
+
+    <!-- Title -->
+    <div class="leading-tight mt-8 text-4xl font-extrabold tracking-tight">
+      Reset password
+    </div>
+    <div class="mt-0.5 font-medium">Create a new password for your account</div>
+
+    <!-- Reset password form -->
+    <form
+      class="mt-8"
+      (submit)="resetPassword($event)"
+    >
+      <div class="flex flex-col gap-y-4">
+        <!-- Password field -->
+        <mat-form-field class="w-full">
+          <mat-label>Password</mat-label>
+          <input
+            id="password"
+            type="password"
+            matInput
+            [formField]="resetPasswordForm.password"
+          />
+          <mat-error>
+            @if (
+              resetPasswordForm.password().touched() &&
+              resetPasswordForm.password().invalid()
+            ) {
+              @for (
+                error of resetPasswordForm.password().errors();
+                track error
+              ) {
+                {{ error.message }}
+              }
+            }
+          </mat-error>
+        </mat-form-field>
+
+        <!-- Password validation field -->
+        <mat-form-field class="w-full">
+          <mat-label>Password validation</mat-label>
+          <input
+            id="passwordValidation"
+            type="password"
+            matInput
+            [formField]="resetPasswordForm.passwordValidation"
+          />
+          <mat-error>
+            @if (
+              resetPasswordForm.passwordValidation().touched() &&
+              resetPasswordForm.passwordValidation().invalid()
+            ) {
+              @for (
+                error of resetPasswordForm.passwordValidation().errors();
+                track error
+              ) {
+                {{ error.message }}
+              }
+            }
+          </mat-error>
+        </mat-form-field>
+      </div>
+
+      <!-- Submit button -->
+      <button
+        type="submit"
+        matButton="filled"
+        class="mt-6 w-full"
+        [disabled]="resetPasswordForm().invalid()"
+      >
+        Reset password
+      </button>
+    </form>
+  </mat-card>
+</div>

package/fuse-starter-pack/fuse-v21.1/src/app/domains/auth/features/reset-password/reset-password.ts

@@ -0,0 +1,69 @@
+import { Component, inject, signal } from '@angular/core';
+import {
+  form,
+  FormField,
+  required,
+  submit,
+  validate,
+} from '@angular/forms/signals';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCard } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'auth-reset-password',
+  templateUrl: './reset-password.html',
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    MatCheckboxModule,
+    FormField,
+    MatCard,
+  ],
+})
+export default class AuthResetPassword {
+  // Dependencies
+  private router = inject(Router);
+
+  // State
+  protected resetPasswordFormModel = signal({
+    password: '',
+    passwordValidation: '',
+  });
+  protected resetPasswordForm = form(this.resetPasswordFormModel, (form) => {
+    required(form.password, { message: 'You must enter a password' });
+    required(form.passwordValidation, {
+      message: 'You must enter a password',
+    });
+    validate(form.passwordValidation, (ctx) => {
+      const password = ctx.valueOf(form.password);
+      const passwordValidation = ctx.value();
+
+      if (!password || !passwordValidation) return null;
+
+      if (password !== passwordValidation) {
+        return {
+          kind: 'mismatch',
+          message: 'The passwords do not match',
+        };
+      }
+
+      return null;
+    });
+  });
+
+  resetPassword(event: Event) {
+    event.preventDefault();
+
+    submit(this.resetPasswordForm, async () => {
+      // Navigate to a route, demo purposes only
+      this.router.navigateByUrl('/auth/sign-in');
+    });
+  }
+}

package/fuse-starter-pack/fuse-v21.1/src/app/domains/auth/features/sign-in/sign-in.html

@@ -0,0 +1,132 @@
+<div class="flex flex-auto">
+  <div
+    class="flex flex-auto items-center justify-center bg-white p-4 sm:p-12 dark:bg-neutral-950"
+  >
+    <div class="flex w-full max-w-80 flex-col sm:min-w-80">
+      <!-- Logo -->
+      <img
+        class="h-14 w-auto max-w-[14rem] object-contain object-left"
+        src="/images/logo/logo.png"
+        alt="CRUDForge logo"
+      />
+
+      <!-- Title -->
+      <div class="leading-tight mt-8 text-4xl font-extrabold tracking-tight">
+        Sign in
+      </div>
+
+      <!-- Sign in form -->
+      <form
+        class="mt-8"
+        (submit)="$event.preventDefault(); signIn($event)"
+      >
+        <div class="flex flex-col gap-y-4">
+          <!-- Email field -->
+          <mat-form-field class="w-full">
+            <mat-label>Username or email</mat-label>
+            <input
+              id="email"
+              matInput
+              [formField]="signInForm.email"
+            />
+            <mat-error>
+              @if (
+                signInForm.email().touched() && signInForm.email().invalid()
+              ) {
+                @for (error of signInForm.email().errors(); track error) {
+                  {{ error.message }}
+                }
+              }
+            </mat-error>
+          </mat-form-field>
+
+          <!-- Password field -->
+          <mat-form-field
+            appearance="fill"
+            class="w-full"
+          >
+            <mat-label>Password</mat-label>
+            <input
+              id="password"
+              matInput
+              type="password"
+              [formField]="signInForm.password"
+              #passwordField
+            />
+            <button
+              matIconButton
+              type="button"
+              (click)="
+                passwordField.type === 'password'
+                  ? (passwordField.type = 'text')
+                  : (passwordField.type = 'password')
+              "
+              matSuffix
+            >
+              @if (passwordField.type === 'password') {
+                <mat-icon
+                  class="size-5"
+                  svgIcon="eye"
+                ></mat-icon>
+              }
+              @if (passwordField.type === 'text') {
+                <mat-icon
+                  class="size-5"
+                  svgIcon="eye-off"
+                ></mat-icon>
+              }
+            </button>
+            <mat-error>
+              @if (
+                signInForm.password().touched() &&
+                signInForm.password().invalid()
+              ) {
+                @for (error of signInForm.password().errors(); track error) {
+                  {{ error.message }}
+                }
+              }
+            </mat-error>
+          </mat-form-field>
+        </div>
+
+        <!-- Actions -->
+        <div class="mt-2 flex w-full items-center justify-between">
+          <mat-checkbox class="-ml-2">Remember me</mat-checkbox>
+          <a
+            class="font-medium underline"
+            routerLink="/auth/forgot-password"
+          >
+            Forgot password?
+          </a>
+        </div>
+
+        <!-- Submit button -->
+        <button
+          type="button"
+          matButton="filled"
+          class="mt-6 w-full"
+          [disabled]="signInForm().invalid()"
+          (click)="signIn($event)"
+        >
+          Sign in
+        </button>
+      </form>
+    </div>
+  </div>
+
+  <div
+    class="relative hidden flex-auto items-center justify-center overflow-hidden border-l bg-neutral-950 p-8 sm:px-12 md:flex"
+  >
+    <div class="relative z-10 w-full max-w-2xl">
+      <div class="text-5xl font-bold text-white">Welcome to CRUDForge</div>
+      <div class="text-medium mt-6 text-xl text-neutral-400">
+        CRUDForge helps you to generate organized and well-structured Angular
+        applications featuring robust standalone forms, presentation lists, and
+        service collections.
+      </div>
+      <div class="mt-10 text-sm font-medium tracking-wide text-violet-400 uppercase">
+        Create code, generate apps, run instantly
+      </div>
+    </div>
+  </div>
+</div>

package/fuse-starter-pack/fuse-v21.1/src/app/domains/auth/features/sign-in/sign-in.ts

@@ -0,0 +1,54 @@
+import { Component, inject, signal } from '@angular/core';
+import {
+  email,
+  form,
+  FormField,
+  required,
+  submit,
+} from '@angular/forms/signals';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { Router, RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'auth-sign-in',
+  templateUrl: './sign-in.html',
+  imports: [
+    RouterLink,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    MatCheckboxModule,
+    FormField,
+  ],
+})
+export default class AuthSignIn {
+  // Dependencies
+  private router = inject(Router);
+
+  // State
+  protected signInFormModel = signal({
+    email: 'demo@crudforge.com',
+    password: 'Secure-Password-123$%^',
+  });
+  protected signInForm = form(this.signInFormModel, (form) => {
+    required(form.email, { message: 'You must enter an email address' });
+    email(form.email, { message: 'You must enter a valid email address' });
+
+    required(form.password, { message: 'You must enter a password' });
+  });
+
+  signIn(event?: Event) {
+    event?.preventDefault();
+    event?.stopPropagation();
+
+    submit(this.signInForm, async () => {
+      // Navigate to the welcome route
+      await this.router.navigateByUrl('/admin/welcome');
+    });
+  }
+}

package/fuse-starter-pack/fuse-v21.1/src/app/domains/auth/features/sign-up/sign-up.html

@@ -0,0 +1,183 @@
+<div class="flex flex-auto">
+  <div
+    class="flex flex-auto items-center justify-center bg-white p-4 sm:p-12 dark:bg-neutral-950"
+  >
+    <div class="flex w-full max-w-80 flex-col sm:min-w-80">
+      <!-- Logo -->
+      <img
+        class="h-14 w-auto max-w-[14rem] object-contain object-left"
+        src="/images/logo/logo.png"
+        alt="CRUDForge logo"
+      />
+
+      <!-- Title -->
+      <div class="leading-tight mt-8 text-4xl font-extrabold tracking-tight">
+        Sign up
+      </div>
+      <div class="mt-0.5 flex items-baseline font-medium">
+        <div class="text-neutral-500">Already have an account?</div>
+        <a
+          class="ml-1 underline"
+          routerLink="/auth/sign-in"
+        >
+          Sign in
+        </a>
+      </div>
+
+      <!-- Sign up form -->
+      <form
+        class="mt-8"
+        (submit)="signUp($event)"
+      >
+        <div class="flex flex-col gap-y-4">
+          <!-- Name field -->
+          <mat-form-field class="w-full">
+            <mat-label>Name</mat-label>
+            <input
+              id="name"
+              matInput
+              [formField]="signUpForm.name"
+            />
+            <mat-error>
+              @if (signUpForm.name().touched() && signUpForm.name().invalid()) {
+                @for (error of signUpForm.name().errors(); track error) {
+                  {{ error.message }}
+                }
+              }
+            </mat-error>
+          </mat-form-field>
+
+          <!-- Company field -->
+          <mat-form-field class="w-full">
+            <mat-label>Company</mat-label>
+            <input
+              id="company"
+              matInput
+              [formField]="signUpForm.company"
+            />
+            <mat-error>
+              @if (
+                signUpForm.company().touched() && signUpForm.company().invalid()
+              ) {
+                @for (error of signUpForm.company().errors(); track error) {
+                  {{ error.message }}
+                }
+              }
+            </mat-error>
+          </mat-form-field>
+
+          <!-- Email field -->
+          <mat-form-field class="w-full">
+            <mat-label>Email address</mat-label>
+            <input
+              id="email"
+              matInput
+              [formField]="signUpForm.email"
+            />
+            <mat-error>
+              @if (
+                signUpForm.email().touched() && signUpForm.email().invalid()
+              ) {
+                @for (error of signUpForm.email().errors(); track error) {
+                  {{ error.message }}
+                }
+              }
+            </mat-error>
+          </mat-form-field>
+
+          <!-- Password field -->
+          <mat-form-field
+            appearance="fill"
+            class="w-full"
+          >
+            <mat-label>Password</mat-label>
+            <input
+              id="password"
+              matInput
+              type="password"
+              [formField]="signUpForm.password"
+              #passwordField
+            />
+            <button
+              matIconButton
+              type="button"
+              (click)="
+                passwordField.type === 'password'
+                  ? (passwordField.type = 'text')
+                  : (passwordField.type = 'password')
+              "
+              matSuffix
+            >
+              @if (passwordField.type === 'password') {
+                <mat-icon
+                  class="size-5"
+                  svgIcon="eye"
+                ></mat-icon>
+              }
+              @if (passwordField.type === 'text') {
+                <mat-icon
+                  class="size-5"
+                  svgIcon="eye-off"
+                ></mat-icon>
+              }
+            </button>
+            <mat-error>
+              @if (
+                signUpForm.password().touched() &&
+                signUpForm.password().invalid()
+              ) {
+                @for (error of signUpForm.password().errors(); track error) {
+                  {{ error.message }}
+                }
+              }
+            </mat-error>
+          </mat-form-field>
+        </div>
+
+        <!-- ToS and PP -->
+        <div class="mt-2 inline-flex w-full items-end">
+          <mat-checkbox class="-ml-2">
+            <span>I agree with</span>
+            <a
+              class="ml-1 underline"
+              [routerLink]="['./']"
+              >Terms
+            </a>
+            <span>and</span>
+            <a
+              class="ml-1 underline"
+              [routerLink]="['./']"
+              >Privacy Policy
+            </a>
+          </mat-checkbox>
+        </div>
+
+        <!-- Submit button -->
+        <button
+          type="submit"
+          matButton="filled"
+          class="mt-6 w-full"
+          [disabled]="signUpForm().invalid()"
+        >
+          Create my account
+        </button>
+      </form>
+    </div>
+  </div>
+
+  <div
+    class="relative hidden flex-auto items-center justify-center overflow-hidden border-l bg-neutral-950 p-8 sm:px-12 md:flex"
+  >
+    <div class="relative z-10 w-full max-w-2xl">
+      <div class="text-5xl font-bold text-white">Welcome to CRUDForge</div>
+      <div class="text-medium mt-6 text-xl text-neutral-400">
+        CRUDForge helps you to generate organized and well-structured Angular
+        applications featuring robust standalone forms, presentation lists, and
+        service collections.
+      </div>
+      <div class="mt-10 text-sm font-medium tracking-wide text-violet-400 uppercase">
+        Create code, generate apps, run instantly
+      </div>
+    </div>
+  </div>
+</div>

package/fuse-starter-pack/fuse-v21.1/src/app/domains/auth/features/sign-up/sign-up.ts

@@ -0,0 +1,56 @@
+import { Component, inject, signal } from '@angular/core';
+import {
+  email,
+  form,
+  FormField,
+  required,
+  submit,
+} from '@angular/forms/signals';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { Router, RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'auth-sign-up',
+  templateUrl: './sign-up.html',
+  imports: [
+    RouterLink,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    MatCheckboxModule,
+    FormField,
+  ],
+})
+export default class AuthSignUp {
+  // Dependencies
+  private router = inject(Router);
+
+  // State
+  protected signUpFormModel = signal({
+    name: '',
+    email: '',
+    password: '',
+    company: '',
+  });
+  protected signUpForm = form(this.signUpFormModel, (form) => {
+    required(form.name, { message: 'You must enter your name' });
+    required(form.email, { message: 'You must enter an email address' });
+    email(form.email, { message: 'You must enter a valid email address' });
+    required(form.password, { message: 'You must enter a password' });
+    required(form.company, { message: 'You must enter your company name' });
+  });
+
+  signUp(event: Event) {
+    event.preventDefault();
+
+    submit(this.signUpForm, async () => {
+      // Navigate to a route, demo purposes only
+      this.router.navigateByUrl('/auth/sign-in');
+    });
+  }
+}

package/fuse-starter-pack/fuse-v21.1/src/app/domains/auth/layout.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'auth-layout',
+  imports : [RouterOutlet],
+  template: `<router-outlet/>`
+})
+export default class AuthLayout {}