signup page

src/pages/SignupPage.tsx

@@ -0,0 +1,81 @@
+import { useSearchParams } from 'react-router'
+import { useState } from 'react'
+
+export default function SignupPage() {
+  const [searchParams] = useSearchParams()
+  const signupCode = searchParams.get('c')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  if (!signupCode) {
+    return <RejectionMessage />
+  }
+
+  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={(e) => e.preventDefault()}>
+          <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>
+
+          <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="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>
+
+          <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>
+  )
+}