✨ [WIP] Convert to Next & create the account creation

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/create-account/page.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import SexSelection from "@/components/forms/sex-selection";
+import { isAuthenticated } from "@/lib/auth";
+import Link from "next/link";
+
+export default function CreateAccount() {
+
+  if (isAuthenticated()) {
+    window.location.href = '/dashboard';
+    return null;
+  }
+
+  return (
+    <div className="h-full bg-white">
+      <main>
+        <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
+          <div className="sm:mx-auto sm:w-full sm:max-w-sm">
+            <img
+              alt="LSSD Community"
+              src="https://images-ext-1.discordapp.net/external/7luFtzoz0sP5ti_UQg3VcW2wuPAiKnwRagYp22OeVII/%3Fsize%3D256/https/cdn.discordapp.com/icons/1281596185102258246/ade033f6aa026c0100098168b0404193.png"
+              className="mx-auto h-30 w-auto rounded-full"
+            />
+            <h2 className="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900">
+              Activez votre compte
+            </h2>
+          </div>
+
+          <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+            <form action="#" method="POST" className="space-y-6">
+              <div>
+                <label htmlFor="pseudo" className="block text-sm/6 font-medium text-gray-900">
+                  Pseudonyme
+                </label>
+                <div className="mt-2">
+                  <input
+                    id="pseudo"
+                    name="pseudo"
+                    type="text"
+                    required
+                    autoComplete="current-pseudo"
+                    className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="firstname" className="block text-sm/6 font-medium text-gray-900">
+                  Prénom de votre personnage
+                </label>
+                <div className="mt-2">
+                  <input
+                    id="firstname"
+                    name="firstname"
+                    type="text"
+                    required
+                    autoComplete="current-firstname"
+                    className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="lastname" className="block text-sm/6 font-medium text-gray-900">
+                  Nom de famille de votre personnage
+                </label>
+                <div className="mt-2">
+                  <input
+                    id="lastname"
+                    name="lastname"
+                    type="text"
+                    required
+                    autoComplete="current-lastname"
+                    className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <div className="flex items-center justify-between">
+                  <label htmlFor="birthdate" className="block text-sm/6 font-medium text-gray-900">
+                    Date de naissance de votre personnage
+                  </label>
+                  <div className="text-sm">
+                    <a href="https://discord.com/channels/1281596185102258246/1370397028483338321" className="font-semibold text-indigo-600 hover:text-indigo-500">
+                      Besoin d'aide ?
+                    </a>
+                  </div>
+                </div>
+                <div className="mt-2">
+                  <input
+                    id="birthdate"
+                    name="birthdate"
+                    type="date"
+                    required
+                    autoComplete="current-birthdate"
+                    className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <div className="flex items-center justify-between">
+                  <label htmlFor="height" className="block text-sm/6 font-medium text-gray-900">
+                    Taille de votre personnage
+                  </label>
+                  <div className="text-sm">
+                    <a href="https://discord.com/channels/1281596185102258246/1370397028483338321" className="font-semibold text-indigo-600 hover:text-indigo-500">
+                      Besoin d'aide ?
+                    </a>
+                  </div>
+                </div>
+                <div className="mt-2">
+                  <input
+                    id="height"
+                    name="height"
+                    type="number"
+                    required
+                    autoComplete="current-height"
+                    className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+                  />
+                </div>
+              </div>
+
+              <SexSelection />
+
+              <div>
+                <div className="flex items-center justify-between">
+                  <label htmlFor="password" className="block text-sm/6 font-medium text-gray-900">
+                    Nouveau mot de passe
+                  </label>
+                </div>
+                <div className="mt-2">
+                  <input
+                    id="password"
+                    name="password"
+                    type="password"
+                    required
+                    autoComplete="current-password"
+                    className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <button
+                  type="submit"
+                  className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                >
+                  S'inscrire
+                </button>
+              </div>
+            </form>
+
+            <p className="mt-10 text-center text-sm/6 text-gray-500">
+              Vous avez déjà un compte ?{' '}
+              <Link href="/" className="font-semibold text-indigo-600 hover:text-indigo-500">
+                Se connecter
+              </Link>
+            </p>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}