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

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/modules/extras/settings/features/security.ts

@@ -0,0 +1,211 @@
+import { Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { form, FormField, required, validate } from '@angular/forms/signals';
+import { MatButton } from '@angular/material/button';
+import { MatDivider } from '@angular/material/divider';
+import { MatIcon } from '@angular/material/icon';
+import {
+  MatError,
+  MatFormField,
+  MatHint,
+  MatInput,
+  MatLabel,
+  MatPrefix,
+} from '@angular/material/input';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+
+@Component({
+  selector: 'security-settings',
+  imports: [
+    FormsModule,
+    MatButton,
+    MatFormField,
+    MatIcon,
+    MatInput,
+    MatLabel,
+    MatPrefix,
+    MatSlideToggle,
+    MatDivider,
+    FormField,
+    MatHint,
+    MatError,
+  ],
+  template: `
+    <form
+      class="grid grid-cols-1 gap-6 md:grid-cols-4 md:gap-8"
+      (submit)="save($event)"
+    >
+      <!-- Password section -->
+      <div class="col-span-full">
+        <div class="text-lg font-medium">Change your password</div>
+        <div class="text-neutral-500">
+          You can only change your password twice within 24 hours.
+        </div>
+      </div>
+
+      <!-- Current password -->
+      <mat-form-field class="col-span-full md:col-span-3">
+        <mat-label>Current password</mat-label>
+        <input
+          type="password"
+          matInput
+          [formField]="securitySettingsForm.currentPassword"
+        />
+        <mat-icon
+          svgIcon="lock-keyhole"
+          matPrefix
+        ></mat-icon>
+        <mat-error>
+          @for (
+            error of securitySettingsForm.currentPassword().errors();
+            track error
+          ) {
+            {{ error.message }}
+          }
+        </mat-error>
+      </mat-form-field>
+
+      <!-- New password -->
+      <mat-form-field class="col-span-full md:col-span-3">
+        <mat-label>New password</mat-label>
+        <input
+          type="password"
+          matInput
+          [formField]="securitySettingsForm.newPassword"
+        />
+        <mat-icon
+          svgIcon="lock-keyhole"
+          matPrefix
+        ></mat-icon>
+        <mat-hint>
+          Minimum 8 characters. Must include numbers, letters and special
+          characters.
+        </mat-hint>
+      </mat-form-field>
+
+      <!-- Confirm new password -->
+      <mat-form-field class="col-span-full md:col-span-3">
+        <mat-label>Confirm new password</mat-label>
+        <input
+          type="password"
+          matInput
+          [formField]="securitySettingsForm.confirmNewPassword"
+        />
+        <mat-icon
+          svgIcon="lock-keyhole"
+          matPrefix
+        ></mat-icon>
+        <mat-error>
+          @for (
+            error of securitySettingsForm.confirmNewPassword().errors();
+            track error
+          ) {
+            {{ error.message }}
+          }
+        </mat-error>
+      </mat-form-field>
+
+      <!-- Divider -->
+      <mat-divider class="col-span-full my-4" />
+
+      <!-- Security preferences section -->
+      <div class="col-span-full">
+        <div class="text-lg font-medium">Security preferences</div>
+        <div class="text-neutral-500">
+          Keep your account more secure with following preferences.
+        </div>
+      </div>
+
+      <!-- Two-step auth -->
+      <mat-slide-toggle
+        class="col-span-full"
+        [formField]="securitySettingsForm.twoStep"
+      >
+        <div class="ml-2 flex flex-col">
+          <div class="font-medium">Enable two-step authentication</div>
+          <div class="text-sm text-neutral-500">
+            Protects you against password theft by requesting an authentication
+            code via SMS on every login.
+          </div>
+        </div>
+      </mat-slide-toggle>
+
+      <!-- Ask to change password -->
+      <mat-slide-toggle
+        class="col-span-full"
+        [formField]="securitySettingsForm.askPasswordChange"
+      >
+        <div class="ml-2 flex flex-col">
+          <div class="font-medium">
+            Ask to change password on every 6 months
+          </div>
+          <div class="text-sm text-neutral-500">
+            A simple but an effective way to be protected against data leaks and
+            password theft.
+          </div>
+        </div>
+      </mat-slide-toggle>
+
+      <!-- Divider -->
+      <mat-divider class="col-span-full my-4" />
+
+      <!-- Actions -->
+      <div class="col-span-full flex items-center justify-end gap-x-4">
+        <button
+          type="button"
+          matButton="outlined"
+        >
+          Cancel
+        </button>
+        <button matButton="filled">Save</button>
+      </div>
+    </form>
+  `,
+})
+export default class SecuritySettings {
+  // State
+  protected securitySettingsModel = signal({
+    currentPassword: '',
+    newPassword: '',
+    confirmNewPassword: '',
+    twoStep: true,
+    askPasswordChange: false,
+  });
+  protected securitySettingsForm = form(
+    this.securitySettingsModel,
+    (schema) => {
+      // Require current password when new password and confirm password are set
+      required(schema.currentPassword, {
+        when: ({ valueOf }) =>
+          valueOf(schema.newPassword) !== '' &&
+          valueOf(schema.confirmNewPassword) !== '',
+        message: 'Current password is required to change password.',
+      });
+
+      // Require confirm new password when new password is set
+      required(schema.confirmNewPassword, {
+        when: ({ valueOf }) => valueOf(schema.newPassword) !== '',
+        message: 'Please confirm your new password.',
+      });
+
+      // Match new password and confirm new password
+      validate(schema.confirmNewPassword, ({ value, valueOf }) => {
+        const confirmPassword = value();
+        const password = valueOf(schema.newPassword);
+
+        if (confirmPassword !== password) {
+          return {
+            kind: 'passwordMismatch',
+            message: 'New password and confirmation do not match.',
+          };
+        }
+
+        return null;
+      });
+    }
+  );
+
+  save(event: Event) {
+    event.preventDefault();
+  }
+}

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/modules/extras/settings/features/team.ts

@@ -0,0 +1,188 @@
+import { TitleCasePipe } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { MatOption } from '@angular/material/core';
+import { MatDivider } from '@angular/material/divider';
+import { MatIcon } from '@angular/material/icon';
+import { MatFormField, MatInput } from '@angular/material/input';
+import { MatSelect, MatSelectTrigger } from '@angular/material/select';
+
+@Component({
+  selector: 'team-settings',
+  imports: [
+    FormsModule,
+    MatFormField,
+    MatIcon,
+    MatIconButton,
+    MatInput,
+    MatButton,
+    MatDivider,
+    MatOption,
+    MatSelect,
+    MatSelectTrigger,
+    TitleCasePipe,
+  ],
+  template: `
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-4 md:gap-8">
+      <div class="col-span-full flex items-center gap-x-3">
+        <mat-form-field class="flex-auto">
+          <input
+            matInput
+            placeholder="Enter email address"
+          />
+        </mat-form-field>
+        <button matButton="outlined">Invite</button>
+      </div>
+
+      <!-- Divider -->
+      <mat-divider class="col-span-full" />
+
+      <!-- Team members -->
+      @for (member of members; track member.id) {
+        <div class="col-span-full flex flex-col sm:flex-row sm:items-center">
+          <div class="flex items-center">
+            <div
+              class="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full"
+            >
+              @if (member.photo) {
+                <img
+                  class="size-full object-cover"
+                  [src]="member.photo"
+                  alt="Member photo"
+                />
+              }
+              @if (!member.photo) {
+                <div
+                  class="flex size-full items-center justify-center rounded-full bg-gray-200 text-lg text-gray-600 uppercase dark:bg-gray-700 dark:text-gray-200"
+                >
+                  {{ member.name.charAt(0) }}
+                </div>
+              }
+            </div>
+            <div class="ml-4">
+              <div class="font-medium">{{ member.name }}</div>
+              <div class="text-neutral-500">{{ member.email }}</div>
+            </div>
+          </div>
+          <div class="mt-4 flex items-center sm:mt-0 sm:ml-auto">
+            <div class="order-2 ml-4 sm:order-1 sm:ml-0">
+              <mat-form-field class="fuse-mat-dense w-32">
+                <mat-select
+                  [panelClass]="'w-72 min-w-72 max-w-72 h-auto max-h-none'"
+                  [value]="member.role"
+                  [disableOptionCentering]="true"
+                  #roleSelect="matSelect"
+                >
+                  <mat-select-trigger>
+                    <span>Role:</span>
+                    <span class="ml-1 font-medium">{{
+                      roleSelect.value | titlecase
+                    }}</span>
+                  </mat-select-trigger>
+                  @for (role of roles; track role.value) {
+                    <mat-option
+                      class="h-auto py-4 leading-none"
+                      [value]="role.value"
+                    >
+                      <div class="font-medium">
+                        {{ role.label }}
+                      </div>
+                      <div
+                        class="leading-normal mt-1.5 text-sm whitespace-normal text-neutral-500"
+                      >
+                        {{ role.description }}
+                      </div>
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+            </div>
+            <div class="order-1 sm:order-2 sm:ml-3">
+              <button mat-icon-button>
+                <mat-icon
+                  class="text-neutral-500"
+                  svgIcon="trash"
+                ></mat-icon>
+              </button>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+})
+export default class TeamSettings {
+  // State
+  protected roles = [
+    {
+      label: 'Read',
+      value: 'read',
+      description:
+        'Can read and clone this repository. Can also open and comment on issues and pull requests.',
+    },
+    {
+      label: 'Write',
+      value: 'write',
+      description:
+        'Can read, clone, and push to this repository. Can also manage issues and pull requests.',
+    },
+    {
+      label: 'Admin',
+      value: 'admin',
+      description:
+        'Can read, clone, and push to this repository. Can also manage issues, pull requests, and repository settings, including adding collaborators.',
+    },
+  ];
+  protected members = [
+    {
+      id: '1',
+      photo: null,
+      name: 'Dejesus Michael',
+      email: 'dejesusmichael@mail.org',
+      role: 'admin',
+    },
+    {
+      id: '2',
+      photo: null,
+      name: 'Mclaughlin Steele',
+      email: 'mclaughlinsteele@mail.me',
+      role: 'admin',
+    },
+    {
+      id: '3',
+      photo: null,
+      name: 'Laverne Dodson',
+      email: 'lavernedodson@mail.ca',
+      role: 'write',
+    },
+    {
+      id: '4',
+      photo: null,
+      name: 'Trudy Berg',
+      email: 'trudyberg@mail.us',
+      role: 'read',
+    },
+    {
+      id: '5',
+      photo: null,
+      name: 'Lamb Underwood',
+      email: 'lambunderwood@mail.me',
+      role: 'read',
+    },
+    {
+      id: '6',
+      photo: null,
+      name: 'Mcleod Wagner',
+      email: 'mcleodwagner@mail.biz',
+      role: 'read',
+    },
+    {
+      id: '7',
+      photo: null,
+      name: 'Shannon Kennedy',
+      email: 'shannonkennedy@mail.ca',
+      role: 'read',
+    },
+  ];
+}

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/modules/extras/settings/layout.ts

@@ -0,0 +1,109 @@
+import { Component, inject } from '@angular/core';
+import { MatFormField } from '@angular/material/input';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { MatTabLink, MatTabNav, MatTabNavPanel } from '@angular/material/tabs';
+import {
+  Router,
+  RouterLink,
+  RouterLinkActive,
+  RouterOutlet,
+} from '@angular/router';
+
+@Component({
+  selector: 'settings-layout',
+  imports: [
+    RouterOutlet,
+    MatTabNav,
+    MatTabLink,
+    MatTabNavPanel,
+    RouterLink,
+    RouterLinkActive,
+    MatFormField,
+    MatSelect,
+    MatOption,
+  ],
+  template: `
+    <div
+      class="@container mx-auto flex w-full max-w-5xl flex-auto flex-col gap-4 p-6 sm:gap-6 lg:p-10 lg:pt-8"
+    >
+      <!-- Header -->
+      <div class="flex items-center justify-between gap-x-3">
+        <div class="text-xl font-semibold tracking-tighter sm:text-2xl">
+          Settings
+        </div>
+      </div>
+
+      <!-- Tabs -->
+      <nav
+        class="mb-2 hidden sm:flex"
+        mat-tab-nav-bar
+        [mat-stretch-tabs]="false"
+        [tabPanel]="tabPanel"
+        ngSkipHydration
+      >
+        @for (link of links; track link.id) {
+          <a
+            mat-tab-link
+            routerLinkActive
+            [routerLink]="link.route"
+            [active]="rla.isActive"
+            #rla="routerLinkActive"
+          >
+            {{ link.label }}
+          </a>
+        }
+      </nav>
+
+      <!-- Mobile navigation -->
+      <mat-form-field class="mb-2 w-full sm:hidden">
+        <mat-select
+          [value]="router.url"
+          (selectionChange)="router.navigateByUrl($event.value)"
+          #select
+        >
+          @for (link of links; track link.id) {
+            <mat-option [value]="link.route">{{ link.label }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+
+      <!-- Tab panel -->
+      <mat-tab-nav-panel #tabPanel>
+        <router-outlet />
+      </mat-tab-nav-panel>
+    </div>
+  `,
+})
+export default class SettingsLayout {
+  // Dependencies
+  protected router = inject(Router);
+
+  // State
+  protected links = [
+    {
+      id: 'account',
+      label: 'Account',
+      route: '/admin/settings/account',
+    },
+    {
+      id: 'security',
+      label: 'Security',
+      route: '/admin/settings/security',
+    },
+    {
+      id: 'plan-and-billing',
+      label: 'Plan and Billing',
+      route: '/admin/settings/plan-and-billing',
+    },
+    {
+      id: 'notifications',
+      label: 'Notifications',
+      route: '/admin/settings/notifications',
+    },
+    {
+      id: 'team',
+      label: 'Team',
+      route: '/admin/settings/team',
+    },
+  ];
+}

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/modules/extras/settings/routes.ts

@@ -0,0 +1,37 @@
+import { Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('./layout'),
+    children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'account',
+      },
+      {
+        path: 'account',
+        loadComponent: () => import('./features/account'),
+      },
+      {
+        path: 'security',
+        loadComponent: () => import('./features/security'),
+      },
+      {
+        path: 'plan-and-billing',
+        loadComponent: () => import('./features/plan-and-billing'),
+      },
+      {
+        path: 'notifications',
+        loadComponent: () => import('./features/notifications'),
+      },
+      {
+        path: 'team',
+        loadComponent: () => import('./features/team'),
+      },
+    ],
+  },
+];
+
+export default routes;

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/modules/extras/welcome/welcome.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-welcome',
+  standalone: true,
+  template: `
+    <div class="flex flex-col flex-auto items-center justify-center p-6 sm:p-10">
+      <img
+        src="/images/logo/logo.png"
+        class="mb-8 h-20 w-auto max-w-[18rem] object-contain sm:h-24 sm:max-w-[22rem]"
+        alt="CRUDForge logo"
+      />
+      <div class="text-4xl font-extrabold tracking-tight text-center sm:text-5xl">
+        Welcome to CRUDForge!
+      </div>
+      <div class="mt-4 text-lg text-center text-secondary">
+        Select a module from the sidebar navigation to get started.
+      </div>
+    </div>
+  `
+})
+export default class WelcomeComponent {}

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/routes.ts

@@ -0,0 +1,95 @@
+import { Routes } from '@angular/router';
+import { AdminLayout } from './layout/layout';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AdminLayout,
+    children: [
+      // Redirect empty path to '/auth/sign-in'
+      { path: '', pathMatch: 'full', redirectTo: '/auth/sign-in' },
+
+      // -----------------------------------------------------------------------
+      // Dashboards
+      // -----------------------------------------------------------------------
+      {
+        path: 'dashboards',
+        loadChildren: () => import('./modules/dashboards/routes'),
+      },
+
+      // -----------------------------------------------------------------------
+      // General
+      // -----------------------------------------------------------------------
+      {
+        path: 'academy',
+        loadChildren: () => import('./modules/apps/academy/routes'),
+      },
+      {
+        path: 'contacts',
+        loadChildren: () => import('./modules/apps/contacts/routes'),
+      },
+      {
+        path: 'file-manager',
+        loadChildren: () => import('./modules/apps/file-manager/routes'),
+      },
+      {
+        path: 'help-center',
+        loadChildren: () => import('./modules/apps/help-center/routes'),
+      },
+      {
+        path: 'notes',
+        loadChildren: () => import('./modules/apps/notes/routes'),
+      },
+      {
+        path: 'tasks',
+        loadChildren: () => import('./modules/apps/tasks/routes'),
+      },
+
+      // -----------------------------------------------------------------------
+      // Extras
+      // -----------------------------------------------------------------------
+      {
+        path: 'welcome',
+        loadComponent: () => import('./modules/extras/welcome/welcome.component'),
+      },
+      {
+        path: 'settings',
+        loadChildren: () => import('./modules/extras/settings/routes'),
+      },
+      {
+        path: 'notifications',
+        loadChildren: () => import('./modules/extras/notifications/routes'),
+      },
+      {
+        path: 'error',
+        loadChildren: () => import('./modules/extras/error/routes'),
+      },
+
+      // -----------------------------------------------------------------------
+      // Documentation
+      // -----------------------------------------------------------------------
+      {
+        path: 'documentation',
+        loadChildren: () => import('./modules/documentation/routes'),
+      },
+
+      // 404
+      {
+        path: '404',
+        pathMatch: 'full',
+        loadComponent: () =>
+          import('./modules/extras/error/features/error-page'),
+        data: { errorCode: 404, title: 'Page not found' }
+      },
+
+      // Catch all
+      { 
+        path: '**', 
+        loadComponent: () => import('./modules/extras/error/features/error-page'),
+        data: { errorCode: 404, title: 'Page not found' } 
+      },
+    ],
+  },
+];
+
+export default routes;