From 3b6c48a776cbabf87cb894c1de8b92942dc11def Mon Sep 17 00:00:00 2001
From: Rafi <rafiwx@gmail.com>
Date: Thu, 2 Mar 2023 23:10:56 +0800
Subject: [PATCH] account

---
 nuxt.config.ts               |   3 +-
 pages/account/onboarding.vue |  66 +++++++++++++++
 pages/account/signin.vue     |  98 ++++++++++++++++++++++
 pages/account/signup.vue     | 158 +++++++++++++++++++++++++++++++++++
 plugins/auth.js              |  18 ++--
 5 files changed, 334 insertions(+), 9 deletions(-)
 create mode 100644 pages/account/onboarding.vue
 create mode 100644 pages/account/signin.vue
 create mode 100644 pages/account/signup.vue

diff --git a/nuxt.config.ts b/nuxt.config.ts
index a7ca469..05a8ca8 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -53,7 +53,8 @@ export default defineNuxtConfig({
         devProxy: {
             "/api": {
                 target: "http://localhost:8000/api",
-                prependPath: true
+                prependPath: true,
+                changeOrigin: true
             }
 
         }
diff --git a/pages/account/onboarding.vue b/pages/account/onboarding.vue
new file mode 100644
index 0000000..687faba
--- /dev/null
+++ b/pages/account/onboarding.vue
@@ -0,0 +1,66 @@
+<script setup>
+definePageMeta({
+  layout: 'vuetify-app',
+  middleware: ['auth']
+})
+const email = ref('')
+const sending = ref(false)
+const resendEmail = async () => {
+  sending.value = true
+  const { data, error } = await useFetch('/api/account/resend-verification-email/', {
+    method: 'POST'
+  })
+  if (error.value) {
+    console.log(error.value)
+  }
+  sending.value = false
+}
+</script>
+
+<template>
+  <v-card
+      class="h-100vh"
+  >
+    <v-container>
+      <v-row>
+        <v-col
+            sm="9"
+            offset-sm="1"
+            md="8"
+            offset-md="2"
+        >
+          <v-card
+              class="mt-20vh"
+              elevation="0"
+          >
+            <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>
+                Please check your inbox and click the link to verify your email address.
+              </p>
+              <v-btn
+                  variant="text"
+                  class="mt-5"
+                  color="primary"
+                  :loading="sending"
+                  @click="resendEmail"
+              >
+                Resend email
+              </v-btn>
+            </div>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
+
+<style scoped>
+.h-100vh {
+  height: 100vh;
+}
+.mt-20vh {
+  margin-top: 20vh;
+}
+</style>
\ No newline at end of file
diff --git a/pages/account/signin.vue b/pages/account/signin.vue
new file mode 100644
index 0000000..fd78573
--- /dev/null
+++ b/pages/account/signin.vue
@@ -0,0 +1,98 @@
+<template>
+  <v-card
+      style="height: 100vh"
+  >
+    <v-container>
+      <v-row>
+        <v-col
+            sm="9"
+            offset-sm="1"
+            md="6"
+            offset-md="3"
+        >
+          <v-card
+              class="mt-15"
+              elevation="0"
+          >
+            <div class="text-center text-h4">Sign in</div>
+            <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>
+
+              </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>
+            </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 { data, error } = await useFetch('/api/account/login/', {
+      method: 'POST',
+      credentials: 'omit',
+      body: JSON.stringify(formData.value)
+    })
+    if (error.value) {
+      if (error.value.status === 400) {
+        if (error.value.data.non_field_errors) {
+          errorMsg.value = error.value.data.non_field_errors[0]
+        }
+      } else {
+        errorMsg.value = 'Something went wrong. Please try again.'
+      }
+    } else {
+    }
+    submitting.value = false
+  }
+}
+
+</script>
\ No newline at end of file
diff --git a/pages/account/signup.vue b/pages/account/signup.vue
new file mode 100644
index 0000000..5001885
--- /dev/null
+++ b/pages/account/signup.vue
@@ -0,0 +1,158 @@
+<script setup>
+definePageMeta({
+  layout: 'vuetify-app'
+})
+
+const formData = ref({
+  username: '',
+  email: '',
+  password1: '',
+  password2: '',
+})
+
+const fieldErrors = ref({
+  username: '',
+  email: '',
+  password1: '',
+  password2: '',
+})
+
+const formRules = ref({
+  username: [
+    v => !!v || 'Please enter your username',
+    v => v.length >= 4 || 'Username must be at least 4 characters'
+  ],
+  email: [
+    v => !!v || 'Please enter your e-mail address',
+    v => /.+@.+\..+/.test(v) || 'E-mail address must be valid'
+  ],
+  password1: [
+    v => !!v || 'Please enter your password',
+    v => v.length >= 8 || 'Password must be at least 8 characters'
+  ],
+  password2: [
+    v => !!v || 'Please confirm your password',
+    v => v.length >= 8 || 'Password must be at least 8 characters',
+    v => v === formData.value.password1 || 'Confirm password must match password'
+  ]
+})
+
+const submitting = ref(false)
+const errorMsg = ref(null)
+const signUpForm = ref(null)
+
+const submit = async () => {
+  errorMsg.value = null
+  const { valid } = await signUpForm.value.validate()
+  if (valid) {
+    submitting.value = true
+
+    const { data, error } = await useFetch('/api/account/registration/', {
+      method: 'POST',
+      body: JSON.stringify(formData.value)
+    })
+
+    if (error.value) {
+      if (error.value.status === 400) {
+        for (const key in formData.value) {
+          if (error.value.data[key]) {
+            fieldErrors.value[key] = error.value.data[key][0]
+          }
+        }
+        if (error.value.data.non_field_errors) {
+          errorMsg.value = error.value.data.non_field_errors[0]
+        }
+      } else {
+        errorMsg.value = 'Something went wrong. Please try again.'
+      }
+    } else {
+      navigateTo('/account/onboarding')
+    }
+
+    submitting.value = false
+  }
+}
+
+const handleFieldUpdate = (field) => {
+  // fieldErrors.value[field] = ''
+}
+</script>
+
+<template>
+  <v-card
+      style="height: 100vh"
+  >
+    <v-container>
+      <v-row>
+        <v-col
+            sm="9"
+            offset-sm="1"
+            md="6"
+            offset-md="3"
+        >
+          <v-card
+              class="mt-15"
+              elevation="0"
+          >
+            <div class="text-center text-h4">Create your account</div>
+            <v-card-text>
+              <v-form ref="signUpForm" class="mt-5">
+                <v-text-field
+                    v-model="formData.username"
+                    :rules="formRules.username"
+                    :error-messages="fieldErrors.username"
+                    label="User name"
+                    variant="underlined"
+                    @update:modelValue="handleFieldUpdate('username')"
+                    clearable
+                ></v-text-field>
+
+                <v-text-field
+                    v-model="formData.email"
+                    :rules="formRules.email"
+                    :error-messages="fieldErrors.email"
+                    label="Email"
+                    variant="underlined"
+                    @@update:modelValue="handleFieldUpdate('email')"
+                    clearable
+                ></v-text-field>
+
+                <v-text-field
+                    v-model="formData.password1"
+                    :rules="formRules.password1"
+                    :error-messages="fieldErrors.password1"
+                    label="Password"
+                    variant="underlined"
+                    @update:modelValue="handleFieldUpdate('password1')"
+                    clearable
+                ></v-text-field>
+
+                <v-text-field
+                    v-model="formData.password2"
+                    :rules="formRules.password2"
+                    :error-messages="fieldErrors.password2"
+                    label="Confirm password"
+                    variant="underlined"
+                    @update:modelValue="handleFieldUpdate('password2')"
+                    clearable
+                ></v-text-field>
+
+              </v-form>
+
+              <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>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
\ No newline at end of file
diff --git a/plugins/auth.js b/plugins/auth.js
index 0761434..afb227f 100644
--- a/plugins/auth.js
+++ b/plugins/auth.js
@@ -1,7 +1,7 @@
 
 const AUTH_ROUTE = {
     home: '/',
-    login: '/login'
+    login: '/account/signin',
 }
 
 const COOKIE_OPTIONS = {
@@ -13,13 +13,13 @@ const COOKIE_OPTIONS = {
 
 const ENDPOINTS = {
     login: {
-        url: '/api/auth/signin'
+        url: '/api/account/login/'
     },
     refresh: {
         url: '/api/auth/token/refresh'
     },
     user: {
-        url: '/api/auth/session'
+        url: '/api/account/user/'
     }
 }
 
@@ -68,7 +68,9 @@ export default defineNuxtPlugin(() => {
         }
 
         async fetchUser () {
-            const { data, error } = await useAuthFetch(ENDPOINTS.user.url)
+            const { data, error } = await useFetch(ENDPOINTS.user.url, {
+                // withCredentials: true
+            })
             if (!error.value) {
                 this.user = data.value
                 this.loginIn.value = true
@@ -117,10 +119,10 @@ export default defineNuxtPlugin(() => {
 
     addRouteMiddleware('auth', async (to, from) => {
         if (!auth.loginIn.value) {
-            const token = await auth.retrieveToken()
-            if (!token) {
-                return await auth.redirectToLogin()
-            }
+            // const token = await auth.retrieveToken()
+            // if (!token) {
+            //     return await auth.redirectToLogin()
+            // }
             const error = await auth.fetchUser()
             if (error) {
                 return await auth.redirectToLogin()