ui: improve login and register

Author: gustavotoyota

new-deepnotes/apps/web/src/App.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { computed, onMounted } from "vue";
 import { RouterView, useRoute } from "vue-router";
 
+import AuthLayout from "@/layouts/AuthLayout.vue";
 import DefaultLayout from "@/layouts/DefaultLayout.vue";
 
 import { useSession } from "./features/auth/useSession";
@@ -14,21 +15,26 @@ const { bootstrap, user, bootstrapped } = useSession();
 useRealtimeUserChannel(user);
 const route = useRoute();
 
+const layout = computed(() => {
+  if (route.meta.layout === "auth") return AuthLayout;
+  return DefaultLayout;
+});
+
 onMounted(() => {
   void bootstrap();
 });
 </script>
 
 <template>
-  <DefaultLayout data-testid="app-shell">
+  <component :is="layout" data-testid="app-shell">
     <div
       v-if="!bootstrapped"
       class="text-muted-foreground flex min-h-[40vh] items-center justify-center text-sm"
     >
       Loading session…
     </div>
     <RouterView v-else :key="route.path" />
-  </DefaultLayout>
+  </component>
   <div
     v-if="realtimeToastMessage"
     class="bg-card fixed bottom-4 left-1/2 z-50 max-w-md -translate-x-1/2 rounded-md border px-4 py-2 text-sm shadow-lg"

new-deepnotes/apps/web/src/features/auth/LoginView.vue

@@ -83,9 +83,8 @@ async function onSubmit() {
 </script>
 
 <template>
-  <div class="flex flex-1 flex-col items-center justify-center px-4 py-12">
-    <div class="w-full max-w-sm">
-      <Card>
+  <div class="w-full max-w-sm">
+    <Card>
         <CardHeader class="pb-4">
           <CardTitle class="text-lg">Sign in</CardTitle>
           <CardDescription>
@@ -257,5 +256,4 @@ async function onSubmit() {
         </CardFooter>
       </Card>
     </div>
-  </div>
 </template>

new-deepnotes/apps/web/src/features/auth/RegisterView.vue

@@ -77,9 +77,8 @@ async function onSubmit() {
 </script>
 
 <template>
-  <div class="flex flex-1 flex-col items-center justify-center px-4 py-12">
-    <div class="w-full max-w-sm">
-      <Card>
+  <div class="w-full max-w-sm">
+    <Card>
         <CardHeader class="pb-4">
           <CardTitle class="text-lg">Register</CardTitle>
           <CardDescription>
@@ -232,5 +231,4 @@ async function onSubmit() {
         </CardFooter>
       </Card>
     </div>
-  </div>
 </template>

new-deepnotes/apps/web/src/features/auth/auth-routes.ts

@@ -5,12 +5,12 @@ export const authRoutes: RouteRecordRaw[] = [
     path: "/login",
     name: "login",
     component: () => import("./LoginView.vue"),
-    meta: { public: true },
+    meta: { public: true, layout: "auth" },
   },
   {
     path: "/register",
     name: "register",
     component: () => import("./RegisterView.vue"),
-    meta: { public: true },
+    meta: { public: true, layout: "auth" },
   },
 ];

new-deepnotes/apps/web/src/layouts/AuthLayout.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div
+    class="bg-background text-foreground flex min-h-svh items-center justify-center px-4 py-12"
+  >
+    <slot />
+  </div>
+</template>