1 files changed, 139 insertions, 0 deletions
diff --git a/src/views/LogIn.vue b/src/views/LogIn.vue
new file mode 100644
index 0000000..fb9bdcd
--- /dev/null
+++ b/src/views/LogIn.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref, toRaw } from "vue"
+import { RouterLink, useRouter } from 'vue-router'
+import axios from "axios"
+import { useToast } from 'vue-toast-notification'
+
+const toast = useToast({
+  position: 'top-right'
+})
+
+const router = useRouter()
+
+const isLoading = ref(false)
+const email = ref("")
+const password = ref("")
+
+const login = async (e) => {
+  e.preventDefault()
+  isLoading.value = true
+
+  try {
+    const res = await axios.post('/auth/signin', {
+      "accountname": toRaw(email.value),
+      "password": toRaw(password.value),
+      "method": "email"
+    })
+
+    localStorage.setItem("authToken", res.data.auth_token)
+    localStorage.setItem("refToken", res.data.refresh_token)
+    toast.default(`Welcome, ${res.data.data.Username}`)
+    router.push({ path: "/" })
+  } catch (err) {
+    const statusCode = err.request.status
+
+    switch(statusCode) {
+      case 401:
+        toast.error('Password is incorrect')
+        break;
+      case 404:
+        toast.error('User does not exist')
+        break;
+      default:
+        toast.error('An unhandled exception occoured. Please check logs')
+    }
+  }
+
+  isLoading.value = false
+}
+</script>
+
+<template>
+  <div id="login-form" class="mx-auto mt-5">
+    <ul class="nav nav-pills nav-justified mb-3" id="ex1" role="tablist">
+      <li class="nav-item" role="presentation">
+        <RouterLink
+          class="nav-link active"
+          id="tab-login"
+          data-mdb-toggle="pill"
+          to="/login"
+          role="tab"
+          aria-controls="pills-login"
+          aria-selected="true"
+          >Login</RouterLink
+        >
+      </li>
+      <li class="nav-item" role="presentation">
+        <RouterLink
+          class="nav-link"
+          id="tab-register"
+          data-mdb-toggle="pill"
+          to="/register"
+          role="tab"
+          aria-controls="pills-register"
+          aria-selected="false"
+          >Register</RouterLink
+        >
+      </li>
+    </ul>
+
+    <div>
+      <form v-on:submit="login">
+        <div class="form-floating mb-4">
+          <input
+            id="login-email-input"
+            type="text"
+            class="form-control"
+            placeholder=""
+            v-model="email"
+          />
+          <label for="login-email-input">E-Mail</label>
+        </div>
+
+        <div class="form-floating mb-4">
+          <input
+            id="login-password-input"
+            type="password"
+            class="form-control"
+            placeholder=""
+            v-model="password"
+          />
+          <label for="login-password-input">Password</label>
+        </div>
+
+        <!--
+        <div class="row mb-4">
+          <div class="col-md-6 d-flex justify-content-center">
+            <div class="form-check mb-3 mb-md-0">
+              <input class="form-check-input" type="checkbox" value="" id="loginCheck" checked />
+              <label class="form-check-label" for="loginCheck"> Remember me </label>
+            </div>
+          </div>
+
+          <div class="col-md-6 d-flex justify-content-center">
+            <a href="#!">Forgot password?</a>
+          </div>
+        </div>
+        -->
+
+        <button type="submit" class="btn btn-primary btn-block mb-4" :class="{ disabled: isLoading }">
+          Sign In
+          <div v-if="isLoading" class="spinner-border spinner-border-sm ms-1" role="status">
+            <span class="sr-only"></span>
+          </div>
+        </button>
+
+        <div class="text-center">
+          <p>Not a member? <RouterLink to="/register">Register</RouterLink></p>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style>
+#login-form {
+  max-width: 30rem;
+  width: 100%;
+}
+</style>