add register page stub

src/app.html

@@ -234,6 +234,10 @@ button.card {
   border-radius: 1em;
 }
 
+:disabled {
+  opacity: .5;
+}
+
 article h1, article h2 {
   font-weight: 500;
 }

src/routes/+page.svelte

@@ -49,7 +49,7 @@
 {:else}
 <Centered>
   <p>{appName()} is a social media platform made by people like you.<br />
-    <a href="/login">Log in</a> or (sign up) to see {activePostCount()} posts and talk with {activeUserCount()} users right now!</p>
+    <a href="/login">Log in</a> or <a href="/register">sign up</a> to see {activePostCount()} posts and talk with {activeUserCount()} users right now!</p>
 </Centered>
 {/if}
 

src/routes/login/+page.svelte

@@ -14,7 +14,7 @@
     <card>
     <form method="POST" use:enhance>
         <label>
-            <span><RiUserLine /> Username / <RiMailLine /> E-mail:</span>
+            <span><RiUserLine /> Username / <RiMailLine /> E-mail</span>
             <input type="text" name="username" />
         </label>
         <label>
@@ -28,6 +28,7 @@
         <button class="primary">Log in</button>
     </form>
     
+    <!-- todo register link -->
 </card>
 </Centered>
 

src/routes/register/+page.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { enhance } from "$app/forms";
+    import Centered from "$lib/Centered.svelte";
+    import { RiInformationLine, RiUserLine } from "svelte-remixicon";
+
+    let username = $state("");
+    // TODO add effect
+    let usernameTaken = $state(true);
+    let email = $state("");
+let disabled = $derived(username.length < 2 || username.length > 30 ||
+    usernameTaken || !/^.+@.+\.[a-z]{2,15}$/.test(email)
+);
+    
+</script>
+
+<Centered narrow>
+    <card>
+<form method="POST" use:enhance>
+    <label>
+        <span><RiUserLine /> Username</span>
+        <input type="text" name="username" bind:value={username} />
+    </label>
+    <label>
+        <span><RiUserLine /> E-mail</span>
+        <small class="faint">Must be a working e-mail address <abbr title="Will be used for password recovery and important communications"><RiInformationLine /></abbr></small>
+        <input type="text" name="username" bind:value={email} />
+    </label>
+    ...
+
+    <button class="primary" disabled={disabled}>Sign up</button>
+    </form>
+    </card>
+</Centered>
+
+
+<style>
+    label {
+        display: flex;
+        flex-direction: column;
+        margin: 1em auto;
+        max-width: 300px;
+    }
+
+    button.primary {
+        display: block;
+        width: 100%;
+        margin-top: 1em;
+    }
+    
+</style>