dockerize, composte, and various improvements

pages/login.vue

@@ -1,5 +1,40 @@
+<script lang="ts" setup>
+import { useDmStore } from '~/stores/dmStore';
+import { useServerStore } from '~/stores/serverStore';
+import { useUserStore } from '~/stores/userStore';
+import { IChannel, IServer, SafeUser } from '~/types';
+import { ref } from 'vue';
+
+definePageMeta({
+	layout: 'clean'
+});
+
+const username = ref('');
+const password = ref('');
+
+async function login() {
+	if (!username.value || !password.value) return;
+	const loginData = await $fetch('/api/login', {
+		method: 'post', body: {
+			username: username.value,
+			password: password.value
+		},
+	}) as { token: string; user: SafeUser; };
+
+	const token = useCookie('sessionToken');
+	token.value = loginData.token;
+
+	useUserStore().setUser(loginData.user);
+
+	useServerStore().setServers(loginData.user.servers || [] as IServer[]);
+	useDmStore().setDms(loginData.user.channels || [] as IChannel[]);
+
+	return navigateTo('/');
+}
+</script>
+
 <template>
-  <div class="w-screen h-screen flex justify-center items-center bg-[var(--primary-bg)]">
+  <div class="w-screen h-screen flex justify-center items-center bg-[var(--primary-bg)] text-[#fefefe]">
     <div class="bg-[var(--secondary-bg)] rounded-xl shadow-2xl flex flex-row overflow-hidden">
       <img
         src="/nahil-naseer-xljtGZ2-P3Y-unsplash.jpg"
@@ -41,47 +76,4 @@
       </div>
     </div>
   </div>
-</template>
-
-<script lang="ts">
-import { useDmStore } from '~/stores/dmStore';
-import { useServerStore } from '~/stores/serverStore';
-import { useUserStore } from '~/stores/userStore';
-import { IChannel, IServer, SafeUser } from '~/types';
-
-definePageMeta({
-	layout: 'clean'
-});
-
-export default {
-	data() {
-		return {
-			username: '',
-			password: ''
-		};
-	},
-	methods: {
-		async login() {
-			if (!this.username || !this.password) return;
-			const loginData = await $fetch('/api/login', {
-				method: 'post', body: {
-					username: this.username,
-					password: this.password
-				},
-			}) as { token: string; user: SafeUser; };
-
-			const userId = useCookie('userId');
-			userId.value = loginData.user.id;
-			const token = useCookie('sessionToken');
-			token.value = loginData.token;
-
-			useUserStore().setUser(loginData.user);
-
-			useServerStore().setServers(loginData.user.servers || [] as IServer[]);
-			useDmStore().setDms(loginData.user.channels || [] as IChannel[]);
-
-			return navigateTo('/');
-		}
-	}
-};
-</script>
+</template>