126 lines
3.8 KiB
Python
126 lines
3.8 KiB
Python
from fasthtml.components import *
|
|
|
|
|
|
class RegisterPage:
|
|
def __init__(self, error_message: str = None):
|
|
self.error_message = error_message
|
|
|
|
def register_page(self, error_message: str):
|
|
self.error_message = error_message
|
|
return self.__ft__()
|
|
|
|
def __ft__(self):
|
|
"""
|
|
Create the registration page.
|
|
|
|
Args:
|
|
error_message: Optional error message to display
|
|
|
|
Returns:
|
|
Components representing the registration page
|
|
"""
|
|
# Create alert for error message
|
|
error_alert = None
|
|
if self.error_message:
|
|
error_alert = Div(
|
|
P(self.error_message, cls="text-sm"),
|
|
cls="bg-soft bg-error border border-red-400 text-red-700 px-4 py-3 rounded mb-4"
|
|
)
|
|
|
|
return Div(
|
|
# Page title
|
|
H1("Create an Account", cls="text-3xl font-bold text-center mb-6"),
|
|
|
|
# Registration Form
|
|
Div(
|
|
# Error alert
|
|
error_alert if error_alert else "",
|
|
|
|
Form(
|
|
# Username field
|
|
Div(
|
|
Label("Username", For="username", cls="block text-sm font-medium text-gray-700 mb-1"),
|
|
Input(
|
|
type="text",
|
|
id="username",
|
|
name="username",
|
|
placeholder="Choose a username",
|
|
required=True,
|
|
minlength=3,
|
|
maxlength=30,
|
|
pattern="[a-zA-Z0-9_-]+",
|
|
cls="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2"
|
|
),
|
|
P("Only letters, numbers, underscores, and hyphens", cls="text-xs text-gray-500 mt-1"),
|
|
cls="mb-4"
|
|
),
|
|
|
|
# Email field
|
|
Div(
|
|
Label("Email", For="email", cls="block text-sm font-medium text-gray-700 mb-1"),
|
|
Input(
|
|
type="email",
|
|
id="email",
|
|
name="email",
|
|
placeholder="you@example.com",
|
|
required=True,
|
|
cls="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2"
|
|
),
|
|
cls="mb-4"
|
|
),
|
|
|
|
# Password field
|
|
Div(
|
|
Label("Password", For="password", cls="block text-sm font-medium text-gray-700 mb-1"),
|
|
Input(
|
|
type="password",
|
|
id="password",
|
|
name="password",
|
|
placeholder="Create a password",
|
|
required=True,
|
|
minlength=8,
|
|
cls="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2"
|
|
),
|
|
P("At least 8 characters with uppercase, lowercase, and number", cls="text-xs text-gray-500 mt-1"),
|
|
cls="mb-4"
|
|
),
|
|
|
|
# Confirm password field
|
|
Div(
|
|
Label("Confirm Password", For="confirm_password", cls="block text-sm font-medium text-gray-700 mb-1"),
|
|
Input(
|
|
type="password",
|
|
id="confirm_password",
|
|
name="confirm_password",
|
|
placeholder="Confirm your password",
|
|
required=True,
|
|
cls="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2"
|
|
),
|
|
cls="mb-6"
|
|
),
|
|
|
|
# Submit button
|
|
Button(
|
|
"Create Account",
|
|
type="submit",
|
|
cls="btn w-full font-bold py-2 px-4 rounded"
|
|
),
|
|
|
|
# Registration link
|
|
Div(
|
|
P(
|
|
"Already have an account? ",
|
|
A("Sign in here", href="/login", cls="text-blue-600 hover:underline"),
|
|
cls="text-sm text-gray-600 text-center"
|
|
)
|
|
),
|
|
|
|
action="register-p",
|
|
method="post",
|
|
cls="mb-6"
|
|
),
|
|
|
|
cls="p-8 rounded-lg shadow-2xl max-w-md mx-auto"
|
|
)
|
|
)
|