sposchedule

1
<script setup lang="ts">
2
  import { computed, reactive, ref, watch } from 'vue';
3
  import InputText from 'primevue/inputtext';
4
  import Password from 'primevue/password';
5
  import Button from 'primevue/button';
6
  import { useAuthStore } from '@/stores/auth';
7
  import { storeToRefs } from 'pinia';
8
  import router from '@/router';
9
  import LoadingBar from '../components/LoadingBar.vue';
10
  import { useDebounceFn } from '@vueuse/core';
11
  import Checkbox from 'primevue/checkbox';
12

13
  const authStore = useAuthStore();
14
  const { isAuth } = storeToRefs(authStore);
15
  const { login } = authStore;
16

17
  const credentials = reactive({
18
    email: '',
19
    password: '',
20
    remember: false,
21
  });
22

23
  watch(credentials, () => {
24
    if (error.value) {
25
      error.value = null;
26
    }
27
  });
28

29
  const error = ref();
30

31
  const isError = computed(() => Boolean(error.value));
32

33
  async function auth() {
34
    try {
35
      await login(credentials);
36
    } catch (e) {
37
      error.value = e?.response.data;
38

39
      return;
40
    }
41
    if (isAuth) router.push('/admin/schedules/changes');
42
  }
43

44
  const debouncedAuth = useDebounceFn(auth, 300);
45
</script>
46

47
<template>
48
  <LoadingBar />
49
  <div class="">
50
    <form
51
      class="flex flex-col justify-center items-center h-screen gap-4"
52
      @submit.prevent="debouncedAuth()"
53
    >
54
      <div
55
        class="flex flex-col gap-4 rounded-lg px-4 py-8 bg-surface-100 dark:bg-surface-900 max-w-72"
56
      >
57
        <h1 class="text-center dark:text-surface-100 text-2xl mb-4">
58
          Авторизация
59
        </h1>
60
        <InputText
61
          v-model="credentials.email"
62
          autofocus
63
          :invalid="isError"
64
          placeholder="Электронная почта"
65
        />
66
        <Password
67
          v-model="credentials.password"
68
          :invalid="isError"
69
          fluid
70
          placeholder="Пароль"
71
          :feedback="false"
72
          toggle-mask
73
        />
74
        <div class="flex gap-2 items-center">
75
          <Checkbox
76
            v-model="credentials.remember"
77
            input-id="remember"
78
            :binary="true"
79
          />
80
          <label class="dark:text-surface-400 text-slate-800" for="remember">
81
            Запомнить меня
82
          </label>
83
        </div>
84
        <Button
85
          :disabled="!credentials.email || !credentials.password"
86
          type="submit"
87
          label="Войти"
88
        />
89
        <span v-if="isError" class="text-red-400 w-full">{{
90
          error?.message
91
        }}</span>
92
      </div>
93
    </form>
94
  </div>
95
</template>
96