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>