From 7d641da1d32726a7d74f8f201d3c02d5dad72895 Mon Sep 17 00:00:00 2001
From: Pier Dolique <perdgit.uieog@slmail.me>
Date: Wed, 11 Sep 2024 23:23:55 +0300
Subject: [PATCH] style: Restyle login page

Fixes #116
---
 app/pages/login.vue | 154 +++++++++++++++++++++++++++++++++++++-------
 app/utils/dom.ts    |   7 ++
 2 files changed, 136 insertions(+), 25 deletions(-)
 create mode 100644 app/utils/dom.ts

diff --git a/app/pages/login.vue b/app/pages/login.vue
index 5cf7583..11a756a 100644
--- a/app/pages/login.vue
+++ b/app/pages/login.vue
@@ -1,22 +1,43 @@
 <template>
   <div :class="$style.component">
-    <PerdButton @click="signUp">
-      Sign up anonymously
-    </PerdButton>
-
-    <PerdLink
-      to="/api/oauth/twitch"
-      external
-    >
-      Sign in with Twitch
-    </PerdLink>
+    <div :class="$style.header">
+      <div :class="$style.logo">
+        🐕💨
+      </div>
+
+      <div :class="$style.title">
+        Welcome to Perd*!
+      </div>
+
+      <div :class="$style.note">
+        *technical name
+      </div>
+    </div>
+
+    <div :class="$style.buttons">
+      <IconButton
+        icon-name="tabler:brand-among-us"
+        :class="$style.button"
+        class="amogus"
+        :loading="isAuthenticating"
+        @click="signUp"
+      />
+
+      <IconButton
+        :class="$style.button"
+        class="twitch"
+        icon-name="tabler:brand-twitch"
+        :loading="isAuthenticating"
+        @click="redirectToTwitch"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
   import { startPagePath } from '~~/constants';
-  import PerdButton from '~/components/PerdButton.vue';
-  import PerdLink from '~/components/PerdLink.vue';
+  import { startViewTransition } from '~/utils/dom';
+  import IconButton from '~/components/IconButton.vue';
 
   definePageMeta({
     layout: false
@@ -24,24 +45,49 @@
 
   const { user } = useUserStore()
   const route = useRoute()
+  const isAuthenticating = ref(false)
 
   async function signUp() {
-    const response = await $fetch('/api/auth/create-session', {
-      method: 'POST'
+    if (isAuthenticating.value) {
+      return
+    }
+
+    startViewTransition(() => {
+      isAuthenticating.value = true
     })
 
-    if (typeof response.userId === 'string') {
-      user.value.userId = response.userId
+
+    try {
+      const responsePromise = $fetch('/api/auth/create-session', {
+        method: 'POST'
+      })
+
+      const response = await withMinimumDelay(responsePromise, 500)
+
+      if (typeof response.userId === 'string') {
+        user.value.userId = response.userId
+      }
+
+      const redirectPath =
+        typeof route.query.redirectTo === 'string'
+          ? route.query.redirectTo
+          : startPagePath
+
+      await navigateTo(redirectPath, {
+        replace: true
+      })
+    } catch (error) {
+      // TODO: Handle error properly
+      console.error(error)
+    } finally {
+      isAuthenticating.value = false
     }
+  }
 
-    const redirectPath =
-      typeof route.query.redirectTo === 'string'
-        ? route.query.redirectTo
-        : startPagePath
+  function redirectToTwitch() {
+    isAuthenticating.value = true
 
-    await navigateTo(redirectPath, {
-      replace: true
-    })
+    window.location.href = '/api/oauth/twitch'
   }
 </script>
 
@@ -50,7 +96,65 @@
     display: grid;
     justify-content: center;
     text-align: center;
-    gap: var(--spacing-16);
-    padding-top: var(--spacing-32);
+    row-gap: var(--spacing-16);
+    padding: var(--spacing-32);
+  }
+
+  .logo {
+    font-size: 4rem;
+    white-space: nowrap;
+  }
+
+  .header {
+    display: grid;
+    gap: var(--spacing-32);
+  }
+
+  .title {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+
+  .note {
+    font-size: 0.75rem;
+    margin-top: calc(-1 * var(--spacing-24));
+  }
+
+  .buttons {
+    display: flex;
+    gap: var(--spacing-8);
+    justify-content: center;
+  }
+
+  .button {
+    transition: background-color 0.2s;
+
+    &:global(.twitch):not(:disabled) {
+      background-color: #9146FF;
+      color: #FFFFFF;
+
+      &:focus-visible,
+      &:hover {
+        background-color: #772ce8;
+      }
+
+      &:active {
+        background-color: #5b21b6;
+      }
+    }
+
+    &:global(.amogus):not(:disabled) {
+      background-color: #4CAF50;
+      color: #FFFFFF;
+
+      &:focus-visible,
+      &:hover {
+        background-color: #45a049;
+      }
+
+      &:active {
+        background-color: #388e3c;
+      }
+    }
   }
 </style>
diff --git a/app/utils/dom.ts b/app/utils/dom.ts
new file mode 100644
index 0000000..954e6ed
--- /dev/null
+++ b/app/utils/dom.ts
@@ -0,0 +1,7 @@
+export function startViewTransition(callback: () => void) {
+  if (document.startViewTransition === undefined) {
+    callback()
+  } else {
+    document.startViewTransition(callback)
+  }
+}