first commit

src/pages/LoginPage.vue

@@ -0,0 +1,177 @@
+<template>
+  <q-page class="flex column items-center justify-between">
+
+    <q-card
+      id="login_block"
+      flat
+      class="flex column items-center w80 justify-between q-py-lg login-card "
+      >
+      <login-logo
+        class="col-grow q-pa-md"
+        :style="{ alignItems: 'flex-end' }"
+    />
+
+      <div class = "q-ma-md flex column input-login">
+        <q-input
+          v-model="login"
+          dense
+          filled
+          class = "q-mb-md"
+          :label = "$t('login__email')"
+          :rules="['email']"
+        />
+
+        <q-input
+          v-model="password"
+          dense
+          filled
+          :label = "$t('login__password')"
+          class = "q-mb-md"
+          :type="isPwd ? 'password' : 'text'"
+          >
+          <template #append>
+            <q-icon
+              color="grey-5"
+              :name="isPwd ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+              class="cursor-pointer"
+              @click="isPwd = !isPwd"
+            />
+          </template>
+        </q-input>
+
+        <div class="self-end">
+          <q-btn
+            @click="forgotPwd"
+            flat
+            no-caps
+            dense
+            class="text-grey"
+            >
+              {{$t('login__forgot_password')}}
+          </q-btn>
+        </div>
+      </div>
+      <q-btn
+        @click="sendAuth"
+        color="primary"
+        :disabled="!acceptTermsOfUse"
+        >
+        {{$t('login__sign_in')}}
+      </q-btn>
+      <div class="q-pt-lg">
+        <q-btn
+          flat
+          sm
+          no-caps
+          color="primary"
+          @click="createAccount()"
+          >
+          {{$t('login__register')}}
+        </q-btn>
+      </div>
+    
+      <div
+        id="alt_login"
+        class="w80 q-flex column items-center q-pt-xl"
+        >
+        <div
+          class="orline w100 text-grey"
+          >
+          <span class="q-mx-sm">{{$t('login__or_continue_as')}}</span>
+        </div>
+        <q-btn
+          flat
+          sm
+          no-caps
+          color="primary"
+          :disabled="!acceptTermsOfUse"
+          >
+          <span class="text-blue">
+            <q-icon name="telegram" size="md" class="q-mx-none text-blue"/>
+            Alex mart
+          </span>
+        </q-btn>
+      </div>
+    </q-card>
+
+    <div id="term-of-use" class="q-py-lg text-white q-flex row">
+      <q-checkbox
+        v-model="acceptTermsOfUse"
+        checked-icon="task_alt"
+        unchecked-icon="highlight_off"
+        :color="acceptTermsOfUse ? 'brand' : 'red'"
+        dense
+        keep-color
+      />
+      <span class="q-px-xs">
+        {{$t('login__accept_terms_of_use') + ' '}}
+      </span>
+      <span class="text-cyan-12">
+        {{$t('login__terms_of_use') }}
+      </span>
+    </div>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useRouter } from 'vue-router'
+  import loginLogo from 'components/admin/login-page/loginLogo.vue'
+  // import { useI18n } from "vue-i18n"
+  const router = useRouter()
+  // const { t } = useI18n()
+
+  const login = ref<string>('')
+  const password = ref<string>('')
+  const isPwd = ref<boolean>(true)
+  const acceptTermsOfUse = ref<boolean>(true)
+
+  /* function rules () :Record<string, Array<(value: string) => boolean | string>> {
+    return {
+      email: [value => (value.length <= 25) || t('login__incorrect_email')]}
+  } */
+
+  async function sendAuth() {
+    console.log('1')
+    await router.push({ name: 'projects' })
+  }
+
+  async function forgotPwd() {
+    await router.push({ name: 'forgot_password' })
+  }
+
+  async function createAccount() {
+    await router.push({ name: 'create_account' })
+  }
+  
+</script>
+
+<style scoped>
+
+  .maxh15 {
+    max-height: calc(100Vh *0.15);
+  }
+
+  .input-login {
+    width: calc(100% * 0.8);
+    max-width: 300px;
+  }
+
+  .orline {
+    display: flex;
+    flex-direction: row;
+  }     
+
+  .orline:before,
+  .orline:after {
+      content: "";
+      flex: 1 1;
+      border-bottom: 1px solid;
+      margin: auto;
+  }
+
+  .login-card {
+    opacity: 0.9 !important;
+    border-radius: var(--top-raduis);
+  }
+</style>