astra-frontend/src/pages/login/TheLogin.vue

<template lang="pug">
  .flex.h-full.w-full.relative.overflow-hidden
    .left-col.flex.flex-col.items-center.justify-center
      .logo-wrapper.absolute.left-12.top-12
        img(:src="logoMark")
      .login-panel.flex.flex-col.justify-center.gap-y-10
        .flex.flex-col.gap-y-2
          .flex.not-italic.font-bold.text-5xl.letter-spacing Добро пожаловать!
          .flex.not-italic.font-medium.text-base(
            :style="{color: this.underTextColor}"
          ) Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
        .flex.flex-col.gap-y-5
          .flex.flex-col.gap-y-px
            base-input.input(
              :rule="[wrongData => !!wrongData]",
              v-model="user.username",
              placeholder="+7 (915) 224–21–31",
              label="Номер телефона",
              outlined,
              no-error-icon
            )
            .red-color.text-smm.font-semibold(v-if="wrongData") Этого телефона нет в системе
          .flex.flex-col.gap-y-px
            base-input.input(
              :rule="[wrongData => !!wrongData]",
              v-model="user.password",
              :type="changeType",
              placeholder="Введите ваш пароль",
              label="Пароль",
              outlined,
              no-error-icon
            )
              .flex.items-center.cursor-pointer(@click="changeView", v-if="!wrongData && user.password")
                img(:src="eye_close", v-if="!isView")
                img(:src="eye_open", v-else)
            .red-color.text-smm.font-semibold(v-if="wrongData") Неверный пароль
          .flex.items-center.gap-x-8px.-ml-2
            q-checkbox(@click="persist", v-model="person", type="checkbox")
            .flex.non-italic.font-medium.base Запомнить меня
        q-btn(
          :disable="disabledButton",
          @click="login",
          label="Войти в аккаунт",
          color="primary",
          no-caps,
        )
      .absolute.left-12.bottom-12.text-smm.font-medium 2023 © Астра
    .right-col.flex.items-center.justify-center.relative
</template>

<script>
import { fetchWrapper } from "@/shared/fetchWrapper";
import BaseInput from "@/components/base/BaseInput";
import logoMark from "@/assets/images/logoMark.svg";
import eye_open from "@/assets/icons/eye_open.svg";
import eye_close from "@/assets/icons/eye_close.svg";

export default {
  name: "TheLogin",
  components: { BaseInput },
  data() {
    return {
      underTextColor: "var(--font-grey-color)",
      isView: false,
      logoMark,
      eye_close,
      eye_open,
      authorized: true,
      user: { username: "", password: "" },
      userData: {},
      person: false,
    };
  },
  computed: {
    wrongData() {
      return !this.authorized && !this.user.username && !this.user.password;
    },
    changeType() {
      return !this.isView ? "password" : "text";
    },
    disabledButton() {
      return this.user.username && this.user.password ? false : true;
    },
    showBorder() {
      return !this.authorized && !this.user.username && !this.user.password
        ? true
        : false;
    },
  },
  methods: {
    changeView() {
      this.isView = !this.isView;
    },
    persist() {
      if (!this.person) return;
      localStorage.username = this.user.username;
      localStorage.password = this.user.password;
    },
    async auth() {
      let res = await fetchWrapper.get("auth/users/me/");
      res = await res;
      let data = await fetchWrapper.get(`accounts/users/${res.id}/detail`);
      data = await data;
      this.userData = data;
      localStorage.setItem("userData", JSON.stringify(this.userData));
    },
    login() {
      fetchWrapper
        .post("auth/jwt/create/", {
          username: this.user.username,
          password: this.user.password,
        })
        .then((token) => {
          if (token.access) {
            localStorage.setItem("tokenAccess", token.access);
            this.auth().then(() => this.$router.push("/"));
          } else {
            this.authorized = false;
            this.user.username = "";
            this.user.password = "";
            this.$router.push("/login");
          }
        });
    },
  },
  mounted() {
    if (localStorage.username) this.user.username = localStorage.username;
    if (localStorage.password) this.user.password = localStorage.password;
  },
};
</script>

<style lang="sass" scoped>
.left-col
  background-color: var(--default-white)
  color: var(--font-dark-blue-color)
  height: 100%
  width: calc(1920px - 1108px)

.logo-wrapper
  width: 90px
  height: 75px

.login-panel
  width: 444px
  height: 422px

.letter-spacing
  letter-spacing: 0.02em

.right-col
  background-color: var(--font-dark-blue-color)
  width: calc(100vw - 812px)
  background-image: url("@/assets/images/loginBG.svg")
  background-size: cover
  background-repeat: no-repeat
  background-position: center

.red-color
  color: var(--border-red-color)

.q-btn
  height: 48px

.input :deep(.label)
  opacity: 1
  color: var(--font-dark-blue-color)
  line-height: 135%

.input :deep(.q-field__control)
  color: var(--font-dark-blue-color)
  &:hover:before
    border: 1px solid var(--font-dark-blue-color)
  &:after
    border-width: 1px !important
</style>