init

javascript-version/pages/login.vue

@@ -0,0 +1,155 @@
+<script setup>
+import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
+import logo from '@images/logo.svg?raw'
+import authV1BottomShape from '@images/svg/auth-v1-bottom-shape.svg?url'
+import authV1TopShape from '@images/svg/auth-v1-top-shape.svg?url'
+
+const form = ref({
+  email: '',
+  password: '',
+  remember: false,
+})
+
+const isPasswordVisible = ref(false)
+
+definePageMeta({ layout: 'blank' })
+</script>
+
+<template>
+  <div class="auth-wrapper d-flex align-center justify-center pa-4">
+    <div class="position-relative my-sm-16">
+      <!-- 👉 Top shape -->
+      <VImg
+        :src="authV1TopShape"
+        class="text-primary auth-v1-top-shape d-none d-sm-block"
+      />
+
+      <!-- 👉 Bottom shape -->
+      <VImg
+        :src="authV1BottomShape"
+        class="text-primary auth-v1-bottom-shape d-none d-sm-block"
+      />
+
+      <!-- 👉 Auth Card -->
+      <VCard
+        class="auth-card"
+        max-width="460"
+        :class="$vuetify.display.smAndUp ? 'pa-6' : 'pa-0'"
+      >
+        <VCardItem class="justify-center">
+          <NuxtLink
+            to="/"
+            class="app-logo"
+          >
+            <!-- eslint-disable vue/no-v-html -->
+            <div
+              class="d-flex"
+              v-html="logo"
+            />
+            <h1 class="app-logo-title">
+              sneat
+            </h1>
+          </NuxtLink>
+        </VCardItem>
+
+        <VCardText>
+          <h4 class="text-h4 mb-1">
+            Welcome to Sneat! 👋🏻
+          </h4>
+          <p class="mb-0">
+            Please sign-in to your account and start the adventure
+          </p>
+        </VCardText>
+
+        <VCardText>
+          <VForm @submit.prevent="$router.push('/')">
+            <VRow>
+              <!-- email -->
+              <VCol cols="12">
+                <VTextField
+                  v-model="form.email"
+                  autofocus
+                  label="Email or Username"
+                  type="email"
+                  placeholder="johndoe@email.com"
+                />
+              </VCol>
+
+              <!-- password -->
+              <VCol cols="12">
+                <VTextField
+                  v-model="form.password"
+                  label="Password"
+                  placeholder="············"
+                  :type="isPasswordVisible ? 'text' : 'password'"
+                  :append-inner-icon="isPasswordVisible ? 'bx-hide' : 'bx-show'"
+                  @click:append-inner="isPasswordVisible = !isPasswordVisible"
+                />
+
+                <!-- remember me checkbox -->
+                <div class="d-flex align-center justify-space-between flex-wrap my-6">
+                  <VCheckbox
+                    v-model="form.remember"
+                    label="Remember me"
+                  />
+
+                  <a
+                    class="text-primary"
+                    href="javascript:void(0)"
+                  >
+                    Forgot Password?
+                  </a>
+                </div>
+
+                <!-- login button -->
+                <VBtn
+                  block
+                  type="submit"
+                >
+                  Login
+                </VBtn>
+              </VCol>
+
+              <!-- create account -->
+              <VCol
+                cols="12"
+                class="text-body-1 text-center"
+              >
+                <span class="d-inline-block">
+                  New on our platform?
+                </span>
+                <NuxtLink
+                  class="text-primary ms-1 d-inline-block text-body-1"
+                  to="/register"
+                >
+                  Create an account
+                </NuxtLink>
+              </VCol>
+
+              <VCol
+                cols="12"
+                class="d-flex align-center"
+              >
+                <VDivider />
+                <span class="mx-4 text-high-emphasis">or</span>
+                <VDivider />
+              </VCol>
+
+              <!-- auth providers -->
+              <VCol
+                cols="12"
+                class="text-center"
+              >
+                <AuthProvider />
+              </VCol>
+            </VRow>
+          </VForm>
+        </VCardText>
+      </VCard>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use "@core/scss/template/pages/page-auth.scss";
+</style>