hooked up all items on the list settings section

app/components/forms/auth/new-password-form.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  token: string,
+  email: string
+}>();
+
+const {resetPassword} = useAuth();
+const password = ref("");
+const passwordConfirmation = ref("");
+const tokenExpired = ref(false);
+
+const handlePasswordReset = () => {
+  try {
+    resetPassword(password.value, passwordConfirmation.value, props.token, props.email);
+  } catch (error: unknown) {
+    if (error instanceof Error && error.message === "TOKEN_EXPIRED")
+      tokenExpired.value = true;
+  }
+}
+</script>
+
+<template>
+  <p v-show="tokenExpired" class="error">Your password reset token has expired. Please submit a new request.</p>
+  <form class="password-form" @submit.prevent="handlePasswordReset">
+    <div class="form-group">
+      <label for="password">Password</label>
+      <input id="password" v-model="password" type="password"/>
+    </div>
+
+    <div class="form-group">
+      <label for="new-password">Confirm Password</label>
+      <input id="confirm-password" v-model="passwordConfirmation" type="password"/>
+    </div>
+
+    <button type="submit">Submit</button>
+  </form>
+</template>
+
+<style scoped>
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.error {
+  color: red;
+  padding: 2em;
+}
+</style>

app/components/forms/auth/registration-form.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+
+const emits = defineEmits(['registered']);
+const {register} = useAuth();
+
+const username = ref("");
+const email = ref("");
+
+const handleRegistration = () => {
+  register(email.value, username.value);
+}
+
+</script>
+
+<template>
+  <form class="password-form" @submit.prevent="handleRegistration">
+    <div class="form-group">
+      <label for="username">Username</label>
+      <input id="username" v-model="username" type="text"/>
+    </div>
+
+    <div class="form-group">
+      <label for="email">Email</label>
+      <input id="email" v-model="email" type="email"/>
+    </div>
+
+    <button type="submit">Submit</button>
+  </form>
+</template>
+
+<style scoped>
+.password-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 50rem;
+  margin: 0 auto;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>

app/components/forms/create-list-form.vue

@@ -21,7 +21,7 @@ const createList = () => {
 <template>
   <form @submit.prevent="createList">
     <label for="list_name">Add MovieList</label>
-    <div>
+    <div class="form-group">
       <input v-model="listName"
              name="list_name"
              placeholder="MovieList Name"
@@ -31,6 +31,13 @@ const createList = () => {
   </form>
 </template>
 <style scoped>
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
 button {
   background-color: #4caf50;
   color: white;
@@ -46,4 +53,8 @@ input {
   border-radius: 4px 0 0 4px;
 }
 
+label {
+  font-weight: bold;
+}
+
 </style>