feat(login): style login component

Author: dvcol

.stylelintrc.js

@@ -0,0 +1,12 @@
+export default {
+  extends: ["@dvcol/stylelint-plugin-presets/config/vue"],
+  rules: {
+    "@dvcol/progress": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        ignorePseudoClasses: ['deep'],
+      }
+    ]
+  }
+}

.stylelintrc.json

@@ -23,6 +23,7 @@ const { isAuthenticated } = useAuthSettingsStoreRefs();
 </template>
 
 <style lang="scss" scoped>
+@use 'src/styles/mixin' as mixin;
 @use '~/styles/z-index' as layers;
 
 $header-height: 2.75rem;
@@ -35,13 +36,9 @@ header {
   flex-direction: column;
   justify-content: center;
   height: $header-height;
-  background: var(--bg-blur-black);
-  backdrop-filter: blur(var(--bg-blur));
-  transition: background 0.5s;
-  will-change: background;
 
-  &:hover {
-    background: var(--bg-blur-black-hover);
+  > :first-child {
+    @include mixin.hover-background;
   }
 }
 

src/components/AppComponent.vue

@@ -1,31 +1,42 @@
 <script lang="ts" setup>
-import { NButton, NFlex } from 'naive-ui';
+import { NButton, NCard, NCheckbox, NFlex, NH4, NText } from 'naive-ui';
 
-import { onMounted, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 
 import { useRoute, useRouter } from 'vue-router';
 
 import { TraktService } from '~/services/trakt.service';
 import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 import { useI18n } from '~/utils';
 
-const i18n = useI18n('global');
+const i18n = useI18n('login');
 
 const route = useRoute();
 const router = useRouter();
 
 const { isAuthenticated } = useAuthSettingsStoreRefs();
 
+const onRedirect = (authenticated = isAuthenticated.value) => {
+  if (!authenticated) return;
+  return router.push((route.query.redirect as string) ?? '/');
+};
+
 onMounted(() => {
+  onRedirect();
   watch(isAuthenticated, authenticated => {
-    const { redirect } = route.query;
-    if (authenticated && redirect) router.push(route.query.redirect as string);
+    onRedirect(authenticated);
   });
 });
 
-const onRedirect = async () => {
+const signUp = ref(false);
+const useSession = ref(false);
+
+const onSignIn = async () => {
   try {
-    await TraktService.approve();
+    await TraktService.approve({
+      signup: signUp.value,
+      prompt: !useSession.value,
+    });
   } catch (error) {
     console.error('Error:', error);
   }
@@ -34,15 +45,85 @@ const onRedirect = async () => {
 
 <template>
   <NFlex vertical justify="space-around" align="center">
-    <img alt="Vue logo" class="logo" src="/assets/logo.svg" width="125" height="125" />
-    <span>This is a login component</span>
-    <NButton @click="onRedirect">Redirect Url</NButton>
+    <NCard class="card" :title="i18n('title')" hoverable>
+      <template #cover>
+        <div class="spacer" />
+        <img
+          alt="Vue logo"
+          class="logo"
+          src="/assets/logo.svg"
+          width="125"
+          height="125"
+        />
+      </template>
+
+      <NFlex vertical>
+        <NH4 class="title" prefix="bar">{{ i18n('sub_title') }}</NH4>
+
+        <NButton class="button" @click="onSignIn">{{ i18n('sign_in') }}</NButton>
+
+        <NFlex class="checkboxes" vertical>
+          <NCheckbox v-model:checked="signUp">
+            {{ i18n('checkbox__sign_up_for') }}
+            <NText type="info">{{ i18n('checkbox__new_account') }}</NText>
+            !
+          </NCheckbox>
+          <NCheckbox v-model:checked="useSession">
+            {{ i18n('checkbox__use') }}
+            <NText type="info">{{ i18n('checkbox__active_user') }}</NText>
+            {{ i18n('checkbox__session') }}
+          </NCheckbox>
+        </NFlex>
+      </NFlex>
+    </NCard>
   </NFlex>
 </template>
 
 <style lang="scss" scoped>
-.logo {
-  display: block;
-  margin: 2rem auto;
+@use 'src/styles/mixin' as mixin;
+
+.card {
+  @include mixin.hover-background;
+
+  padding: 0 1.5rem;
+
+  .spacer {
+    height: 60px;
+  }
+
+  .logo {
+    position: absolute;
+    top: -50px;
+    left: 0;
+  }
+
+  :deep(.n-card-header) {
+    font-size: 3em;
+    text-align: center;
+  }
+
+  .title {
+    margin: 0;
+    padding: 1rem;
+    background: rgb(99 226 184 / 5%);
+    transition: background 0.5s;
+    will-change: background;
+  }
+
+  .button {
+    margin: 2rem;
+  }
+
+  .checkboxes {
+    align-self: center;
+    width: fit-content;
+    margin-bottom: 1.5rem;
+  }
+
+  &:hover {
+    .title {
+      background: rgb(99 226 184 / 9%);
+    }
+  }
 }
 </style>

src/components/views/login/LoginComponent.vue

@@ -4,7 +4,7 @@
     "description": "Extension name."
   },
   "global__app_title": {
-    "message": "Side Trakt (companion app for Traskt.tv)",
+    "message": "Side Trakt (companion app for Trakt.tv)",
     "description": "Extension title."
   },
   "global__app_title_popup": {

src/i18n/en/global.json

@@ -0,0 +1,34 @@
+{
+  "login__title": {
+    "message": "Trakt",
+    "description": "Login title"
+  },
+  "login__sub_title": {
+    "message": "Please sign in to access your data.",
+    "description": "Login sub title"
+  },
+  "login__sign_in": {
+    "message": "Click to Sign In",
+    "description": "Login button"
+  },
+  "login__checkbox__sign_up_for": {
+    "message": "Sign up for a",
+    "description": "Checkbox sign up message (uncolored)"
+  },
+  "login__checkbox__new_account": {
+    "message": "new account",
+    "description": "Checkbox sign up message (colored)"
+  },
+  "login__checkbox__use": {
+    "message": "Use",
+    "description": "Checkbox message (uncolored)"
+  },
+  "login__checkbox__active_user": {
+    "message": "active user",
+    "description": "Checkbox message (colored)"
+  },
+  "login__checkbox__session": {
+    "message": "session to login.",
+    "description": "Checkbox message (uncolored)"
+  }
+}

src/i18n/en/login/login.json

@@ -0,0 +1,10 @@
+@mixin hover-background($from: var(--bg-blur-black), $to: var(--bg-blur-black-hover), $blur: var(--bg-blur)) {
+  background: $from;
+  backdrop-filter: blur($blur);
+  transition: background 0.5s;
+  will-change: background;
+
+  &:hover {
+    background: $to
+  }
+}