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();
+ }),
  },
  }),
  ],