initial commit

components/register.templ

@@ -0,0 +1,105 @@
+package components
+
+import (
+	"context"
+)
+
+templ Register(ctx context.Context, errorMessage string) {
+	@LayoutWithContext("Register", ctx) {
+		<div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+			<div class="max-w-md w-full space-y-8">
+				<div>
+					<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
+						Create a new user account
+					</h2>
+					<p class="mt-2 text-center text-sm text-gray-600">
+						Complete the form below to create a new user
+					</p>
+				</div>
+				
+				if errorMessage != "" {
+					<div class="mt-4">
+						<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
+							<span class="block sm:inline">{ errorMessage }</span>
+						</div>
+					</div>
+				}
+				
+				<form class="mt-8 space-y-6" hx-post="/register" hx-target="body"
+					x-data="{ 
+						email: '', 
+						password: '',
+						confirmPassword: '',
+						loading: false,
+						validate() {
+							return this.email && 
+								this.password && 
+								this.confirmPassword && 
+								this.password === this.confirmPassword;
+						}
+					}"
+					@htmx:before-request="loading = true"
+					@htmx:after-request="loading = false">
+					<input type="hidden" name="remember" value="true" />
+					<div class="rounded-md shadow-sm -space-y-px">
+						<div>
+							<label for="email" class="sr-only">Email address</label>
+							<input 
+								id="email" 
+								name="email" 
+								type="email" 
+								required 
+								x-model="email"
+								class="form-input rounded-t-md" 
+								placeholder="Email address"/>
+						</div>
+						<div>
+							<label for="password" class="sr-only">Password</label>
+							<input 
+								id="password" 
+								name="password" 
+								type="password" 
+								required 
+								x-model="password"
+								class="form-input" 
+								placeholder="Password"/>
+						</div>
+						<div>
+							<label for="confirm-password" class="sr-only">Confirm Password</label>
+							<input 
+								id="confirm-password" 
+								name="confirm_password" 
+								type="password" 
+								required 
+								x-model="confirmPassword"
+								class="form-input rounded-b-md" 
+								placeholder="Confirm Password"/>
+						</div>
+					</div>
+
+					<div>
+						<button 
+							type="submit" 
+							class="btn-primary w-full flex justify-center"
+							x-bind:disabled="!validate() || loading">
+							<span x-show="!loading">Create User</span>
+							<span x-show="loading" class="flex items-center">
+								<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+									<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+									<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+								</svg>
+								Processing...
+							</span>
+						</button>
+					</div>
+				</form>
+				<div class="text-center">
+					<p class="text-sm text-gray-600">
+						Already have an account?
+						<a href="/login" class="font-medium text-blue-600 hover:text-blue-500">Sign in</a>
+					</p>
+				</div>
+			</div>
+		</div>
+	}
+}