botris.social/femto-webapp
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

pancy fants

Browse source
This commit is contained in:
john 2025-05-06 12:53:32 +02:00
parent a4fd3a3556
commit b6633d6f25
15 changed files with 339 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

162
src/pages/SignupPage.tsx
View file

@ -1,85 +1,111 @@
import { useParams } from 'react-router'
import { useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import SingleColumnLayout from '../layouts/SingleColumnLayout.tsx'
import TextInput from '../components/TextInput.tsx'
import PrimaryButton from '../components/PrimaryButton.tsx'
import PrimaryLinkButton from '../components/PrimaryLinkButton.tsx'
const SignupCodeKey = 'signupCode'
export default function SignupPage() {
const { code: signupCode } = useParams()
const { code } = useParams()
const [signupCode, setSignupCode] = useState<string | null>(null)
const [isSubmitting, setIsSubmitting] = useState(false)
const [username, setUsername] = useState('')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const dialogRef = useRef<HTMLDialogElement | null>(null)
useEffect(() => {
if (signupCode) return
let theSignupCode: string | null
if (code) {
theSignupCode = code
setSignupCode(theSignupCode)
localStorage.setItem(SignupCodeKey, theSignupCode)
} else {
theSignupCode = localStorage.getItem(SignupCodeKey)
}
if (!theSignupCode) {
dialogRef.current?.showModal()
}
}, [code, signupCode])
const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
setIsSubmitting(true)
}
if (!signupCode) {
return <RejectionMessage />
try {
// todo
} finally {
setIsSubmitting(false)
}
}
return (
<main className="w-full max-w-3xl mx-auto p-4">
<div className="mt-12">
<form className="flex flex-col gap-4 max-w-md" onSubmit={onSubmit}>
<div className="flex flex-col gap-2">
<label htmlFor="username" className="text-sm text-gray-600">
Username
</label>
<input
id="username"
type="text"
className="p-2 border rounded bg-white/50 focus:outline-none focus:border-gray-400"
required
/>
</div>
<SingleColumnLayout>
<main className="w-full mx-auto p-4">
<div className="mt-12">
<form className="flex flex-col gap-4 max-w-md" onSubmit={onSubmit}>
<div className="flex flex-col gap-2">
<label htmlFor="username" className="text-sm text-gray-600">
username
</label>
<TextInput id="username" value={username} onInput={setUsername} required />
</div>
<div className="flex flex-col gap-2">
<label htmlFor="email" className="text-sm text-gray-600">
Email (optional)
</label>
<input
id="email"
type="email"
className="p-2 border rounded bg-white/50 focus:outline-none focus:border-gray-400"
/>
</div>
<div className="flex flex-col gap-2">
<label htmlFor="email" className="text-sm text-gray-600">
email (optional)
</label>
<TextInput id="email" value={email} onInput={setEmail} required />
</div>
<div className="flex flex-col gap-2">
<label htmlFor="password" className="text-sm text-gray-600">
Password
</label>
<input
id="password"
type="password"
className="p-2 border rounded bg-white/50 focus:outline-none focus:border-gray-400"
required
/>
</div>
<div className="flex flex-col gap-2">
<label htmlFor="password" className="text-sm text-gray-600">
password
</label>
<TextInput
id="password"
type="password"
value={password}
onInput={setPassword}
required
/>
</div>
<button
type="submit"
disabled={isSubmitting}
className="mt-4 p-2 bg-gray-800 text-white rounded hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
>
{isSubmitting ? 'Creating account...' : 'Create account'}
</button>
</form>
</div>
</main>
)
}
function RejectionMessage() {
return (
<main className="w-full max-w-3xl mx-auto p-4">
<div className="mt-12 text-gray-600 flex flex-col gap-2">
<p>An invitation is required to create an account.</p>
<p>
I'm surprised you even found your way here without one and honestly I'd prefer it if you
would leave
</p>
<p>
If you <span className="italic">do</span> want to create an account, you should know who
to contact
</p>
</div>
</main>
<PrimaryButton className="mt-4" disabled={isSubmitting} type="submit">
{isSubmitting ? 'wait...' : 'give me an account pls'}
</PrimaryButton>
</form>
</div>
</main>
<dialog
id="go-away-dialog"
ref={dialogRef}
className="p-6 rounded-lg shadow-lg m-auto outline-none"
>
<div className="text-gray-600 flex flex-col gap-2">
<h1 className={`font-bold text-lg`}>STOP !!!</h1>
<p>You need an invitation to sign up</p>
<p>
I'm surprised you even found your way here without one and honestly I'd prefer it if you
would leave
</p>
<p>
If you <span className="italic">do</span> want to create an account, you should know who
to contact
</p>
<PrimaryLinkButton className={`mt-4`} href="https://en.wikipedia.org/wiki/Special:Random">
I'm sorry I'll go somewhere else :(
</PrimaryLinkButton>
</div>
</dialog>
</SingleColumnLayout>
)
}