fix(ui/ux): auth pages

desk/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-	<router-view />
+	<router-view class="antialiased" />
 	<Toasts />
 	<KeymapDialog />
 </template>

desk/src/components/global/LoginBox.vue

@@ -1,16 +1,16 @@
 <template>
-	<div class="flex h-screen w-screen items-center justify-center">
-		<div class="rounded-xl shadow-xl">
+	<div
+		class="flex h-screen w-screen flex-col items-center justify-center bg-gray-50"
+	>
+		<div class="mb-8">
 			<img
 				v-if="configStore.brandLogo"
 				:src="configStore.brandLogo"
-				class="m-auto h-6"
+				class="m-auto h-8"
 			/>
-			<div v-else class="flex">
-				<div class="mx-auto h-6 w-auto">
-					<CustomIcons name="frappedesk" class="h-6" />
-				</div>
-			</div>
+			<Logo v-else class="mx-auto h-8" />
+		</div>
+		<div class="rounded-xl bg-white shadow-xl">
 			<div class="w-96 py-8 px-10">
 				<div class="mb-6 text-center text-lg">
 					{{ title }}
@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 import { useConfigStore } from "@/stores/config";
-import CustomIcons from "@/components/desk/global/CustomIcons.vue";
+import Logo from "~icons/logos/helpdesk";
 
 defineProps({
 	title: {

desk/src/pages/auth/Login.vue

@@ -9,7 +9,7 @@
 				label="Email"
 				:type="email !== 'Administrator' ? 'email' : 'text'"
 				v-model="email"
-				placeholder="johndeo@gmail.com"
+				placeholder="johndoe@gmail.com"
 			/>
 			<Input
 				v-if="!forgot"

desk/src/pages/auth/Signup.vue

@@ -15,18 +15,15 @@
 					label="First Name"
 					type="text"
 					placeholder="John"
-					class="mb-4"
 					required
 				/>
 				<Input
 					v-model="lastName"
 					label="Last Name"
 					type="text"
 					placeholder="Doe"
-					class="mb-4"
 					required
 				/>
-				<ErrorMessage class="mt-4" error="" />
 				<div>
 					<Button
 						appearance="primary"

desk/src/router.js

@@ -8,12 +8,14 @@ export const VERIFY = "Verify Account";
 export const AGENT_PORTAL_LANDING = "DeskTickets";
 export const CUSTOMER_PORTAL_LANDING = "PortalTickets";
 export const CUSTOMER_PORTAL_NEW_TICKET = "DefaultNewTicket";
-export const AUTH_BYPASS_ROUTES = [LOGIN, SIGNUP, VERIFY];
+export const AUTH_ROUTES = [LOGIN, SIGNUP, VERIFY];
 export const KNOWLEDGE_BASE_PUBLIC = "Knowledge Base";
+export const WEBSITE_ROOT = "Website Root";
 
 const routes = [
 	{
 		path: "",
+		name: WEBSITE_ROOT,
 		component: () => import("@/pages/WebsiteRoot.vue"),
 	},
 	{
@@ -380,9 +382,17 @@ router.beforeEach(async (to) => {
 });
 
 router.beforeEach(async (to) => {
-	if (AUTH_BYPASS_ROUTES.includes(to.name)) return;
-
+	const isAuthRoute = AUTH_ROUTES.includes(to.name);
 	const authStore = useAuthStore();
 
-	await authStore.init().catch(() => router.replace({ name: LOGIN }));
+	try {
+		await authStore.init();
+		if (isAuthRoute) {
+			router.replace({ name: WEBSITE_ROOT });
+		}
+	} catch {
+		if (!isAuthRoute) {
+			router.replace({ name: LOGIN });
+		}
+	}
 });

desk/vite.config.js

@@ -24,6 +24,11 @@ export default defineConfig({
 
 					return r.toMinifiedString();
 				}),
+				logos: FileSystemIconLoader("./src/assets/logos", async (svg) => {
+					const r = new SVG(svg);
+					await cleanupSVG(r);
+					return r.toMinifiedString();
+				}),
 			},
 		}),
 	],