docs: include authentication example to examples page (#256)

* docs: include authentication example to examples page * docs: it refactors the autentication example * docs: it fixes route meta import
goetzrobin · Jun 4, 2024 · 46c88ac · 46c88ac
1 parent 515b477
commit 46c88ac
Show file tree

Hide file tree

Showing 4 changed files with 147 additions and 0 deletions.
diff --git a/apps/app/src/app/pages/(examples)/examples.page.ts b/apps/app/src/app/pages/(examples)/examples.page.ts
@@ -31,6 +31,7 @@ export const routeMeta: RouteMeta = {
 			<ul class="flex space-x-2">
 				<li><a class="!font-medium" spartanNavLink="/examples/notes">Notes</a></li>
 				<li><a class="!font-medium" spartanNavLink="/examples/typography">Typography</a></li>
+				<li><a class="!font-medium" spartanNavLink="/examples/authentication">Authentication</a></li>
 			</ul>
 		</nav>
 		<div class="overflow-hidden border rounded-lg border-border">

diff --git a/apps/app/src/app/pages/(examples)/examples/authentication/(authentication).page.ts b/apps/app/src/app/pages/(examples)/examples/authentication/(authentication).page.ts
@@ -0,0 +1,64 @@
+import { RouteMeta } from '@analogjs/router';
+import { Component } from '@angular/core';
+import { metaWith } from '@spartan-ng/app/app/shared/meta/meta.util';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { HlmCardDirective } from '@spartan-ng/ui-card-helm';
+import { AuthenticationFormComponent } from './components/form.component';
+
+export const routeMeta: RouteMeta = {
+	meta: metaWith('spartan/examples - Authentication', 'An authenticaton example using spartan UI primitive'),
+	title: 'spartan/examples - Authentication',
+};
+
+@Component({
+	selector: 'spartan-authentication',
+	standalone: true,
+	imports: [AuthenticationFormComponent, HlmButtonDirective, HlmCardDirective],
+	host: {
+		class: 'block',
+	},
+	template: `
+		<div hmlcard class="bg-background overflow-hidden shadow-md md:shadow-xl">
+			<div class="container relative h-[600px] md:h-[800px] flex flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
+				<a
+					hlmBtn
+					variant="ghost"
+					class="absolute right-4 top-4 md:top-8 md:right-8"
+					href="/examples/authentication">
+					Login
+				</a>
+				<div class="bg-muted relative hidden h-full flex-col border-r p-10 text-white lg:flex dark:border-r-zinc-800">
+					<div class="absolute inset-0 bg-zinc-900"></div>
+					<div class="relative z-20 flex items-center text-lg font-medium">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="mr-2 h-6 w-6"
+						>
+							<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"></path>
+						</svg>
+						Acme Inc
+					</div>
+					<div class="relative z-20 mt-auto">
+						<blockquote class="space-y-2">
+							<p class="text-lg">
+								“This library has saved me countless hours of work and helped me deliver stunning designs to my clients
+								faster than ever before.”
+							</p>
+							<footer class="text-sm">Sofia Davis</footer>
+						</blockquote>
+					</div>
+				</div>
+				<div class="lg:p-8">
+					<auth-example-form />
+				</div>
+			</div>
+		</div>
+	`,
+})
+export default class TypographyPageComponent { }
diff --git a/apps/app/src/app/pages/(examples)/examples/authentication/components/form.component.ts b/apps/app/src/app/pages/(examples)/examples/authentication/components/form.component.ts
@@ -0,0 +1,81 @@
+import { Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { provideIcons } from '@ng-icons/core';
+import { lucideGithub, lucideLoader2 } from '@ng-icons/lucide';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
+import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
+import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
+import { HlmSpinnerComponent } from '@spartan-ng/ui-spinner-helm';
+
+@Component({
+	selector: 'auth-example-form',
+	standalone: true,
+	imports: [HlmButtonDirective, HlmIconComponent, HlmInputDirective, HlmSpinnerComponent, FormsModule, HlmLabelDirective],
+	host: {
+		class: 'block',
+	},
+	providers: [provideIcons({ lucideGithub, lucideLoader2 })],
+	template: `
+		<div class="mx-auto w-full justify-center space-y-6 sm:w-[350px]">
+			<div class="space-y-2 text-center">
+				<h1 class="text-2xl font-semibold tracking-tight">Create an account</h1>
+				<p class="text-muted-foreground text-sm">Enter your email below to create your account</p>
+			</div>
+			<div class="grid gap-6">
+				<form (ngSubmit)="send()">
+					<label hlmLabel class="sr-only" for="email">
+						Email
+					</label>
+					<input
+						hlmInput
+						class="w-full"
+						placeholder="Email"
+						type="email"
+						id="email"
+						placeholder="[email protected]"
+						autocomplete="off" />
+					<button
+						hlmBtn
+						[disabled]="isLoading()"
+						class="w-full mt-2"
+						type="submit">
+						@if (isLoading()) {
+							<hlm-icon name="lucideLoader2" size="sm" class="mr-2 animate-spin" />
+						}
+						Sign In with Email
+					</button>
+				</form>
+				<div class="relative">
+					<div class="absolute inset-0 flex items-center"><span class="w-full border-t"></span></div>
+					<div class="relative flex justify-center text-xs uppercase">
+						<span class="bg-background text-muted-foreground px-2">Or continue with</span>
+					</div>
+				</div>
+				<button hlmBtn variant="outline" [disabled]="isLoading()">
+					@if (isLoading()) {
+						<hlm-icon name="lucideLoader2" size="sm" class="mr-2 animate-spin" />
+					} @else {
+						<hlm-icon class="mr-2" size="sm" name="lucideGithub" />
+					}
+					GitHub
+				</button>
+			</div>
+			<p class="text-muted-foreground sm:px-8 text-center text-sm">
+				By clicking continue, you agree to our
+				<a class="hover:text-primary cursor-pointer underline underline-offset-4">Terms of Service</a>
+				and
+				<a class="hover:text-primary cursor-pointer underline underline-offset-4">Privacy Policy</a>
+				.
+			</p>
+		</div>
+	`,
+})
+export class AuthenticationFormComponent {
+	isLoading = signal(false);
+
+	send() {
+		this.isLoading.set(true);
+		setTimeout(() => this.isLoading.set(false), 3000);
+	}
+}
diff --git a/apps/app/vite.config.ts b/apps/app/vite.config.ts
@@ -107,6 +107,7 @@ export default defineConfig(({ mode }) => {
 
 						'/examples/notes',
 						'/examples/typography',
+						'/examples/authentication',
 					],
 					sitemap: {
 						host: 'https://www.spartan.ng',