Start adding registraion UI

Co-authored-by: Jess Martin <jessmartin@gmail.com>

src/components/Header.svelte

@@ -0,0 +1,3 @@
+<header>
+  <a href="/connect">Connect</a>
+</header>

src/components/auth/Connect.svelte

@@ -0,0 +1,4 @@
+
+<div>Connect</div>
+
+<a href="/register">Register</a>

src/components/auth/Register.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  // Check if username is valid
+
+  // Check if username is available
+
+  const checkUsername = (event: Event) => {
+    const { value: username } = event.target as HTMLInputElement
+
+    console.log(username)
+
+  }
+
+  // Register the user
+  // Bootstrap the filesystem if successful
+  // Report an error
+</script>
+
+<input type="checkbox" id="my-modal-5" checked class="modal-toggle" />
+<div class="modal">
+  <div class="modal-box w-11/12 max-w-5xl">
+    <div>
+      <h3>Choose a username</h3>
+      <input
+        type="text"
+        placeholder="Type here"
+        class="input input-bordered w-full max-w-xs"
+        on:input={checkUsername}
+      />
+      <div>
+        <a class="btn btn-secondary" href="/connect">Back</a>
+        <button class="btn btn-primary">Register</button>
+      </div>
+    </div>
+  </div>
+</div>

src/routes/__layout.svelte

@@ -2,6 +2,7 @@
   import '../global.css'
   import { theme } from '../stores'
   import { storeTheme } from '$lib/theme'
+  import Header from '$components/Header.svelte'
 
   theme.subscribe(val => {
     storeTheme(val)
@@ -10,6 +11,8 @@
 
 
 <div data-theme={$theme}>
+  <Header></Header>
+
   <slot />
 </div>
 

src/routes/connect.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import Connect from '$components/auth/Connect.svelte'
+</script>
+<Connect></Connect>

src/routes/register.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import Register from '$components/auth/Register.svelte'
+
+</script>
+<Register></Register>