email verification

pages/account/onboarding.vue

@@ -3,18 +3,29 @@ definePageMeta({
   layout: 'vuetify-app',
   middleware: ['auth']
 })
-const email = ref('')
+const route = useRoute()
 const sending = ref(false)
+const resent = ref(false)
+const errorMsg = ref(null)
 const resendEmail = async () => {
+  errorMsg.value = null
   sending.value = true
-  const { data, error } = await useFetch('/api/account/resend-verification-email/', {
-    method: 'POST'
+  const { data, error } = await useFetch('/api/account/registration/resend-email/', {
+    method: 'POST',
   })
   if (error.value) {
-    console.log(error.value)
+    errorMsg.value = 'Something went wrong. Please try again later.'
+  } else {
+    resent.value = true
   }
   sending.value = false
 }
+
+onNuxtReady(() => {
+  if (route.query.resend) {
+    resendEmail()
+  }
+})
 </script>
 
 <template>
@@ -36,17 +47,21 @@ const resendEmail = async () => {
             <div class="text-center">
               <h2 class="text-h4">Verify your email</h2>
               <p class="text-body-2 mt-5">
-                We've sent a verification email to <strong>{{ email }}</strong>. <br>
+                We've sent a verification email to <strong>{{ $auth.user.email }}</strong>. <br>
                 Please check your inbox and click the link to verify your email address.
               </p>
+              <p v-if="errorMsg"
+                 class="text-red"
+              >{{ errorMsg }}</p>
               <v-btn
                   variant="text"
                   class="mt-5"
                   color="primary"
                   :loading="sending"
                   @click="resendEmail"
+                  :disabled="resent"
               >
-                Resend email
+                {{ resent ? 'Resent' : 'Resend email'}}
               </v-btn>
             </div>
           </v-card>

pages/account/signin.vue

@@ -28,19 +28,30 @@
                     :rules="formRules.password"
                     label="Password"
                     variant="underlined"
+                    @keyup.enter="submit"
                 ></v-text-field>
 
               </v-form>
 
               <div v-if="errorMsg" class="text-red">{{ errorMsg }}</div>
 
-              <v-btn
-                  block
-                  color="primary"
-                  :loading="submitting"
-                  @click="submit"
-                  class="mt-5"
-              >Submit</v-btn>
+              <div
+                class="mt-5 d-flex justify-space-between"
+              >
+                <v-btn
+                    @click="navigateTo('/account/signup')"
+                    variant="text"
+                    color="primary"
+                >Create account</v-btn>
+
+                <v-btn
+                    color="primary"
+                    :loading="submitting"
+                    @click="submit"
+                    size="large"
+                >Submit</v-btn>
+              </div>
+
             </v-card-text>
           </v-card>
         </v-col>
@@ -71,6 +82,8 @@ const errorMsg = ref(null)
 const signInForm = ref(null)
 const valid = ref(true)
 const submitting = ref(false)
+const route = useRoute()
+
 const submit = async () => {
   errorMsg.value = null
   const { valid } = await signInForm.value.validate()
@@ -89,6 +102,8 @@ const submit = async () => {
         errorMsg.value = 'Something went wrong. Please try again.'
       }
     } else {
+      $auth.setUser(data.value.user)
+      navigateTo(route.query.callback || '/')
     }
     submitting.value = false
   }

pages/account/signup.vue

@@ -3,6 +3,8 @@ definePageMeta({
   layout: 'vuetify-app'
 })
 
+const { $auth } = useNuxtApp()
+
 const formData = ref({
   username: '',
   email: '',
@@ -52,6 +54,8 @@ const submit = async () => {
       body: JSON.stringify(formData.value)
     })
 
+    console.log(error.value)
+
     if (error.value) {
       if (error.value.status === 400) {
         for (const key in formData.value) {
@@ -66,6 +70,7 @@ const submit = async () => {
         errorMsg.value = 'Something went wrong. Please try again.'
       }
     } else {
+      $auth.setUser(data.value.user)
       navigateTo('/account/onboarding')
     }
 
@@ -141,14 +146,23 @@ const handleFieldUpdate = (field) => {
 
               <div v-if="errorMsg" class="text-red">{{ errorMsg }}</div>
 
-              <v-btn
-                  block
-                  size="large"
-                  color="primary"
-                  :loading="submitting"
-                  @click="submit"
-                  class="mt-5"
-              >Submit</v-btn>
+              <div
+                  class="mt-5 d-flex justify-space-between"
+              >
+                <v-btn
+                    @click="navigateTo('/account/signin')"
+                    variant="text"
+                    color="primary"
+                >Sign in instead</v-btn>
+
+                <v-btn
+                    size="large"
+                    color="primary"
+                    :loading="submitting"
+                    @click="submit"
+                >Submit</v-btn>
+              </div>
+
             </v-card-text>
           </v-card>
         </v-col>

pages/account/verify-email.vue

@@ -0,0 +1,100 @@
+<script setup>
+definePageMeta({
+  layout: 'vuetify-app',
+  path: '/account/verify-email/:token',
+  title: 'Verify Email'
+})
+const route = useRoute()
+const verifying = ref(false)
+const status = ref('')
+
+const verifyEmail = async () => {
+  verifying.value = true
+  const { data, error } = await useFetch(`/api/account/registration/verify-email/`, {
+    method: 'POST',
+    body: JSON.stringify({
+      key: route.params.token
+    })
+  })
+  if (!error.value && data.value.detail === 'ok') {
+    status.value = 'success'
+  } else {
+    status.value = 'error'
+  }
+  verifying.value = false
+}
+
+onNuxtReady(() => {
+  verifyEmail()
+})
+</script>
+
+<template>
+  <v-container class="h-100vh">
+    <v-row
+        class="fill-height"
+        align-content="center"
+        justify="center"
+    >
+      <v-col
+          class="text-subtitle-1 text-center"
+          cols="12"
+          v-if="verifying"
+      >
+        Verifying your email
+      </v-col>
+      <v-col
+          cols="6"
+          v-if="verifying"
+      >
+        <v-progress-linear
+            color="deep-purple-accent-4"
+            indeterminate
+            rounded
+            height="6"
+        ></v-progress-linear>
+      </v-col>
+      <v-col
+          cols="12"
+          v-if="status === 'success'"
+          class="text-center"
+      >
+        <h2 class="text-h4">
+          Your email has been verified.
+        </h2>
+        <p class="text-subtitle-1">
+          You can now sign in to your account.
+        </p>
+        <v-btn
+            color="primary"
+            variant="text"
+            @click="navigateTo('/account/login')"
+        >
+          Sign in
+        </v-btn>
+      </v-col>
+      <v-col
+          cols="12"
+          v-if="status === 'error'"
+          class="text-center"
+      >
+        <h2 class="text-h4">
+          There was an error verifying your email.
+        </h2>
+        <v-btn
+            color="primary"
+            variant="text"
+            @click="navigateTo('/account/onboarding?resend=1')"
+        >
+          Resend email
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped>
+.h-100vh {
+  height: 100vh;
+}
+</style>

pages/index.vue

@@ -18,16 +18,14 @@ const abortFetch = () => {
   fetchingResponse.value = false
 }
 const fetchReply = async (message, parentMessageId) => {
-  const token = await $auth.retrieveToken()
   ctrl = new AbortController()
   try {
-    await fetchEventSource('/api/conversation', {
+    await fetchEventSource('/api/conversation/', {
       signal: ctrl.signal,
       method: 'POST',
       headers: {
         'accept': 'application/json',
         'Content-Type': 'application/json',
-        'Authorization': `Bearer ${token}`
       },
       body: JSON.stringify({
         model: currentModel.value,

pages/login.vue

@@ -1,87 +0,0 @@
-<template>
-  <v-card
-      color="red-lighten-5"
-      style="height: 100vh"
-  >
-    <v-container>
-      <v-row>
-        <v-col
-            sm="9"
-            offset-sm="1"
-            md="8"
-            offset-md="2"
-        >
-          <v-card
-              class="mt-15"
-          >
-            <v-card-title>Sign in</v-card-title>
-            <v-card-text>
-              <v-form ref="signInForm">
-                <v-text-field
-                    v-model="formData.username"
-                    :rules="formRules.username"
-                    label="User name"
-                    variant="underlined"
-                ></v-text-field>
-                <v-text-field
-                    v-model="formData.password"
-                    :rules="formRules.password"
-                    label="Password"
-                    variant="underlined"
-                ></v-text-field>
-                <div v-if="errorMsg" class="text-red">{{ errorMsg }}</div>
-                <v-card-actions>
-                  <v-spacer></v-spacer>
-                  <v-btn
-                      variant="elevated"
-                      color="primary"
-                      :loading="submitting"
-                      @click="submit"
-                  >Submit</v-btn>
-                </v-card-actions>
-              </v-form>
-            </v-card-text>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-card>
-
-</template>
-
-<script setup>
-definePageMeta({
-  layout: 'vuetify-app'
-})
-const formData = ref({
-  username: '',
-  password: ''
-})
-const formRules = ref({
-  username: [
-      v => !!v || 'Username is required'
-  ],
-  password: [
-      v => !!v || 'Password is required'
-  ]
-})
-const { $auth } = useNuxtApp()
-const errorMsg = ref(null)
-const signInForm = ref(null)
-const valid = ref(true)
-const submitting = ref(false)
-const submit = async () => {
-  errorMsg.value = null
-  const { valid } = await signInForm.value.validate()
-  if (valid) {
-    submitting.value = true
-    const error = await $auth.login(formData.value.username, formData.value.password)
-    submitting.value = false
-    if (!error) {
-      return await $auth.callback()
-    }
-    errorMsg.value = error
-  }
-}
-
-</script>