feat(web): improve auth UI

TP-O · Jun 6, 2023 · 53451dc · 53451dc
1 parent 62b495b
commit 53451dc
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 93 deletions.
diff --git a/web/public/assets/img/warwick.jpg b/web/public/assets/img/warwick.jpg
diff --git a/web/src/components/auth/OAuth.vue b/web/src/components/auth/OAuth.vue
@@ -13,19 +13,15 @@ async function signInWithGoogle() {
 </script>
 
 <template>
-  <div>
-    <div mb-4>Sign in with</div>
+  <div flex="~ col justify-around" gap-4>
+    <q-btn rounded @click="signInWithGoogle">
+      <div i-devicon-google mr-2 />
+      <div>Join with Google</div>
+    </q-btn>
 
-    <div flex="~ justify-around">
-      <q-btn capitalize @click="signInWithGoogle">
-        <div i-devicon-google mr-2 />
-        Google
-      </q-btn>
-
-      <q-btn capitalize @click="signInWithGoogle">
-        <div i-devicon-facebook mr-2 />
-        Facebook
-      </q-btn>
-    </div>
+    <q-btn rounded @click="signInWithGoogle">
+      <div i-devicon-facebook mr-2 />
+      <div>Join with Facebook</div>
+    </q-btn>
   </div>
 </template>
diff --git a/web/src/layouts/guest.vue b/web/src/layouts/guest.vue
@@ -35,7 +35,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <main h-screen px-4 py-10 text="center gray-700 dark:gray-200">
+  <main text="center gray-700 dark:gray-200">
     <RouterView />
   </main>
 </template>
diff --git a/web/src/pages/auth/sign-in.vue b/web/src/pages/auth/sign-in.vue
@@ -35,47 +35,64 @@ const onSubmit = handleSubmit(async (values: zod.infer<typeof schema>) => {
 </script>
 
 <template>
-  <div flex="~ justify-center items-center" h-full>
-    <div md="w-2xl">
-      <div mb-8>
-        <div text="2xl" font-bold>Join to player with your friends</div>
-      </div>
+  <div h-screen w-screen flex overflow-hidden>
+    <div flex="~ col justify-center" w-full gap-8 px-8 md="px-24" lg="w-xl">
+      <div>
+        <div mb-8>
+          <div text="5xl creepy" font-bold>Let's play</div>
+        </div>
 
-      <form flex="~ col justify-between" gap-4 px-4 @submit="onSubmit">
-        <Field v-slot="{ errorMessage }" name="email">
-          <q-input
-            v-model="useFieldModel('email').value"
-            outlined
-            type="text"
-            label="Email"
-            :error="!!errorMessage"
-            :error-message="errorMessage"
-          />
-        </Field>
+        <form flex="~ col justify-between" gap-2 @submit="onSubmit">
+          <Field v-slot="{ errorMessage }" name="email">
+            <q-input
+              v-model="useFieldModel('email').value"
+              outlined
+              dense
+              rounded
+              type="text"
+              label="Email"
+              :error="!!errorMessage"
+              :error-message="errorMessage"
+            />
+          </Field>
 
-        <Field v-slot="{ errorMessage }" name="password">
-          <q-input
-            v-model="useFieldModel('password').value"
-            outlined
-            type="password"
-            label="Password"
-            :error="!!errorMessage"
-            :error-message="errorMessage"
-          />
-        </Field>
+          <Field v-slot="{ errorMessage }" name="password">
+            <q-input
+              v-model="useFieldModel('password').value"
+              outlined
+              dense
+              rounded
+              type="password"
+              label="Password"
+              :error="!!errorMessage"
+              :error-message="errorMessage"
+            />
+          </Field>
 
-        <div flex="~ justify-between items-center">
-          <router-link to="sign-up" color="blue" font-bold>
-            Create account
-          </router-link>
-          <q-btn color="blue" label="Go!" type="submit" px-8 py-2 capitalize />
-        </div>
-      </form>
+          <div flex="~ justify-end" mb-3>
+            <router-link to="sign-up" color="blue" font-bold>
+              Create account
+            </router-link>
+          </div>
 
-      <q-separator my-6 />
+          <q-btn
+            color="blue"
+            label="Go!"
+            type="submit"
+            rounded
+            px-8
+            py-2
+            capitalize
+          />
+        </form>
+      </div>
+
+      <q-separator />
 
       <OAuth />
     </div>
+
+    <div lg="block" hidden grow-1 bg-sign-in />
   </div>
 </template>
 

diff --git a/web/src/pages/auth/sign-up.vue b/web/src/pages/auth/sign-up.vue
@@ -44,58 +44,77 @@ const onSubmit = handleSubmit(async (values: zod.infer<typeof schema>) => {
 </script>
 
 <template>
-  <div flex="~ justify-center items-center" h-full>
-    <div md="w-2xl">
-      <div mb-8>
-        <div text="2xl" font-bold>Create new account</div>
-      </div>
+  <div h-screen w-screen flex overflow-hidden>
+    <div flex="~ col justify-center" w-full gap-8 px-8 md="px-24" lg="w-xl">
+      <div>
+        <div mb-8>
+          <div text="5xl creepy" font-bold>New account</div>
+        </div>
 
-      <form flex="~ col justify-between" gap-4 px-4 @submit="onSubmit">
-        <Field v-slot="{ errorMessage }" name="email">
-          <q-input
-            v-model="useFieldModel('email').value"
-            outlined
-            type="text"
-            label="Email"
-            :error="!!errorMessage"
-            :error-message="errorMessage"
-          />
-        </Field>
+        <form flex="~ col justify-between" gap-2 @submit="onSubmit">
+          <Field v-slot="{ errorMessage }" name="email">
+            <q-input
+              v-model="useFieldModel('email').value"
+              outlined
+              dense
+              rounded
+              type="text"
+              label="Email"
+              :error="!!errorMessage"
+              :error-message="errorMessage"
+            />
+          </Field>
 
-        <Field v-slot="{ errorMessage }" name="password">
-          <q-input
-            v-model="useFieldModel('password').value"
-            outlined
-            type="password"
-            label="Password"
-            :error="!!errorMessage"
-            :error-message="errorMessage"
-          />
-        </Field>
+          <Field v-slot="{ errorMessage }" name="password">
+            <q-input
+              v-model="useFieldModel('password').value"
+              outlined
+              dense
+              rounded
+              type="password"
+              label="Password"
+              :error="!!errorMessage"
+              :error-message="errorMessage"
+            />
+          </Field>
 
-        <Field v-slot="{ errorMessage }" name="confirmPassword">
-          <q-input
-            v-model="useFieldModel('confirmPassword').value"
-            outlined
-            type="password"
-            label="Confirm password"
-            :error="!!errorMessage"
-            :error-message="errorMessage"
-          />
-        </Field>
+          <Field v-slot="{ errorMessage }" name="confirmPassword">
+            <q-input
+              v-model="useFieldModel('confirmPassword').value"
+              outlined
+              dense
+              rounded
+              type="password"
+              label="Confirm password"
+              :error="!!errorMessage"
+              :error-message="errorMessage"
+            />
+          </Field>
 
-        <div flex="~ justify-between items-center">
-          <router-link to="sign-in" color="blue" font-bold>
-            Sign in instead
-          </router-link>
-          <q-btn color="blue" label="Go!" type="submit" px-8 py-2 capitalize />
-        </div>
-      </form>
+          <div flex="~ justify-end" mb-3>
+            <router-link to="sign-in" color="blue" font-bold>
+              Sign in instead
+            </router-link>
+          </div>
 
-      <q-separator my-6 />
+          <q-btn
+            color="blue"
+            label="Go!"
+            type="submit"
+            rounded
+            px-8
+            py-2
+            capitalize
+          />
+        </form>
+      </div>
+
+      <q-separator />
 
       <OAuth />
     </div>
+
+    <div lg="block" hidden grow-1 bg-sign-in />
   </div>
 </template>
 

diff --git a/web/src/styles/main.css b/web/src/styles/main.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Creepster&display=swap');
+
 html,
 body,
 #app {
@@ -30,6 +32,23 @@ html.dark {
   max-height: 100px;
 }
 
+.q-btn__content {
+  text-transform: none;
+}
+
+/* Prevent changing input bg color by autofill */
+input:-webkit-autofill {
+  -webkit-animation-name: none !important;
+  -webkit-animation-fill-mode: none !important;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  transition: background-color 9999s ease-in-out 0s;
+}
+
 /* width */
 ::-webkit-scrollbar {
   width: 5px;

diff --git a/web/uno.config.ts b/web/uno.config.ts
@@ -21,7 +21,7 @@ export default defineConfig({
     ],
   ],
   presets: [
-    presetUno(),
+    presetUno({}),
     presetAttributify(),
     presetIcons({
       scale: 1.2,
@@ -43,4 +43,22 @@ export default defineConfig({
       error: '#C10015',
     },
   },
+  rules: [
+    [
+      'text-creepy',
+      {
+        'font-family': "'Creepster', sans-serif",
+        'letter-spacing': '0.1rem',
+      },
+    ],
+    [
+      'bg-sign-in',
+      {
+        'background-image': 'url("/public/assets/img/warwick.jpg")',
+        'background-repeat': 'no-repeat',
+        'background-position': 'center',
+        'background-size': 'cover',
+      },
+    ],
+  ],
 })