From 00fcc17b5df9454100e48f5661db758cf2c7ba2a Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sat, 17 Jun 2023 02:41:41 +0800
Subject: [PATCH] Added auth to frontend

---
 frontend/composables/axios.ts  |  8 +++
 frontend/composables/post.ts   |  2 +-
 frontend/composables/user.ts   | 41 ++++++++++++++++
 frontend/middleware/auth.ts    | 12 +++++
 frontend/pages/index.vue       | 53 ++++++++++++--------
 frontend/pages/login/index.vue | 89 ++++++++++++++++++++++++++++++++++
 6 files changed, 184 insertions(+), 21 deletions(-)
 create mode 100644 frontend/composables/axios.ts
 create mode 100644 frontend/composables/user.ts
 create mode 100644 frontend/middleware/auth.ts
 create mode 100644 frontend/pages/login/index.vue

diff --git a/frontend/composables/axios.ts b/frontend/composables/axios.ts
new file mode 100644
index 0000000..68603b0
--- /dev/null
+++ b/frontend/composables/axios.ts
@@ -0,0 +1,8 @@
+import axios from 'axios'
+
+const request = axios.create({
+	baseURL: 'http://localhost:8000',
+	withCredentials: true,
+})
+
+export { request }
diff --git a/frontend/composables/post.ts b/frontend/composables/post.ts
index c585dc8..6d7572a 100644
--- a/frontend/composables/post.ts
+++ b/frontend/composables/post.ts
@@ -4,7 +4,7 @@ const PostValidator = z.object({
 	sequence: z.number(),
 	id: z.string(),
 	title: z.string(),
-	description: z.string().nullish(),
+	description: z.string(),
 	created_at: z.string(),
 	updated_at: z.string(),
 })
diff --git a/frontend/composables/user.ts b/frontend/composables/user.ts
new file mode 100644
index 0000000..92cccb0
--- /dev/null
+++ b/frontend/composables/user.ts
@@ -0,0 +1,41 @@
+import { z } from 'zod'
+
+const userSchema = z.object({
+	email: z.string().email(),
+	password: z.string().min(6),
+})
+
+const userLogin = async (email: String, password: String) => {
+	await getUser()
+	if (useUser().value) return
+
+	const user = userSchema.safeParse({ email, password })
+
+	if (!user.success) return user.error.format()
+
+	await request.get('/sanctum/csrf-cookie')
+	await request.post('/login', user.data)
+
+	await getUser()
+}
+
+const getUser = async () => {
+	await request
+		.get('/api/user')
+		.then(({ data }) => {
+			const parsed = loggedInUserSchema.safeParse(data)
+			if (!parsed.success) return
+			useUser().value = parsed.data.name
+		})
+		.catch((error) => {
+			console.log(error)
+		})
+}
+
+const loggedInUserSchema = z.object({
+	name: z.string(),
+})
+
+const useUser = () => useState<String>('user', () => '')
+
+export { userLogin, useUser, getUser }
diff --git a/frontend/middleware/auth.ts b/frontend/middleware/auth.ts
new file mode 100644
index 0000000..0521165
--- /dev/null
+++ b/frontend/middleware/auth.ts
@@ -0,0 +1,12 @@
+export default defineNuxtRouteMiddleware(async (to, from) => {
+	const user = useUser()
+	await getUser()
+
+	if (!user.value && to.path !== '/login' && to.path.startsWith('/')) {
+		return navigateTo('/login')
+	}
+
+	if (user.value && to.path === '/login') {
+		return navigateTo('/')
+	}
+})
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 17eb28a..8614f05 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+	middleware: ['auth'],
+})
+
 import { z } from 'zod'
 type Posts = z.infer<typeof PostsValidator>
 
@@ -6,36 +10,45 @@ const posts = ref<Posts>([])
 const lastPost = ref<Number>(0)
 
 const responseValidator = z.object({
-  status: z.number(),
-  data: z.unknown().array(),
+	status: z.number(),
+	data: z.unknown().array(),
 })
 
 const getPosts = async () => {
-  const data = await $fetch('http://dev.local:8000/api/posts', {
-    method: 'GET',
-    params: { lastPost: lastPost.value },
-  })
+	const data = await request.get('http://localhost:8000/api/posts', {
+		params: { lastPost: lastPost.value },
+	})
+
+	console.log(data)
+
+	const response = responseValidator.safeParse(data.data)
+	// console.log(parsePosts(response.data))
 
-  const response = responseValidator.parse(data)
+	if (!response.success) return
 
-  posts.value = [...posts.value, ...parsePosts(response.data)]
-  lastPost.value = posts.value[posts.value.length - 1].sequence
+	posts.value = [...posts.value, ...parsePosts(response.data.data)]
+	lastPost.value = posts.value[posts.value.length - 1].sequence
 }
 
 onMounted(() => {
-  getPosts()
+	getPosts()
 })
 </script>
 
 <template>
-  <div>
-    <div class="flex w-full items-center justify-center">
-      <div class="flex w-1/2 flex-col gap-4 px-4 pb-10 pt-2 2xl:w-1/3">
-        <div v-if="posts" v-for="post in posts">
-          <PostCard :title="post.title" :description="post.description" />
-        </div>
-        <button @click="getPosts()">More {{ lastPost }}</button>
-      </div>
-    </div>
-  </div>
+	<div>
+		<!-- {{ posts }} -->
+		<div class="flex w-full items-center justify-center">
+			<div class="flex w-1/2 flex-col gap-4 px-4 pb-10 pt-2 2xl:w-1/3">
+				<div
+					v-if="posts"
+					v-for="post in posts">
+					<PostCard
+						:title="post.title"
+						:description="post.description" />
+				</div>
+				<button @click="getPosts()">More {{ lastPost }}</button>
+			</div>
+		</div>
+	</div>
 </template>
diff --git a/frontend/pages/login/index.vue b/frontend/pages/login/index.vue
new file mode 100644
index 0000000..566c2c8
--- /dev/null
+++ b/frontend/pages/login/index.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+definePageMeta({
+	middleware: ['auth'],
+})
+
+const user = useUser()
+
+const userCredential = reactive({
+	email: '',
+	password: '',
+})
+
+const isSigningIn = ref<Boolean>(false)
+
+const errors = reactive({
+	email: '',
+	password: '',
+	user: '',
+})
+
+const login = async () => {
+	isSigningIn.value = true
+	const error = await userLogin(userCredential.email, userCredential.password)
+
+	if (error) {
+		errors.email = error.email ? error.email._errors.join(',') : ''
+		errors.password = error.password ? error.password._errors.join(',') : ''
+		// errors.user = error.user ? error.user._errors.join(',') : ''
+	}
+
+	setTimeout(() => (isSigningIn.value = false), 500)
+}
+
+const logoutAxios = async () => {
+	await request.post('/logout')
+	user.value = ''
+}
+
+watch(
+	() => user.value,
+	() => {
+		if (user.value) useRouter().push('/')
+	}
+)
+</script>
+
+<template>
+	<div>
+		<div
+			class="absolute flex w-96 flex-col items-center justify-center gap-2 rounded-xl border border-lightgray bg-secondary p-6">
+			<label class="mt-2 w-full"> Email </label>
+			<input
+				type="text"
+				v-model="userCredential.email"
+				class="w-full rounded-md border border-lightgray p-2" />
+			<span
+				v-if="errors.email"
+				class="w-full text-red-400">
+				{{ errors.email }}
+			</span>
+
+			<label class="mt-2 w-full"> Password </label>
+			<input
+				type="password"
+				v-model="userCredential.password"
+				class="w-full rounded-md border border-lightgray p-2" />
+			<span
+				v-if="errors.password"
+				class="w-full text-red-400">
+				{{ errors.password }}
+			</span>
+
+			<div
+				v-if="errors.user"
+				class="mt-4 text-red-400">
+				{{ errors.user }}
+			</div>
+
+			<button
+				@click="login()"
+				class="mt-6 flex gap-2 rounded-full border border-lightgray bg-blue-500 px-6 py-2">
+				<Icon
+					v-if="isSigningIn"
+					name="loading" />
+				<div> Sign In </div>
+			</button>
+		</div>
+	</div>
+</template>