codecheck

1
<script setup lang="ts">
2
definePageMeta({
3
  middleware: "onlyguest",
4
});
5
const username = ref("");
6
const password = ref("");
7
const error = ref<string | null>(null);
8
const btnLoading = ref(true);
9
const { progress, isLoading, start, finish, clear } = useLoadingIndicator();
10
const submitForm = async () => {
11
  btnLoading.value = false;
12
  start();
13
  const result = await useFetch("/api/auth/login", {
14
    method: "POST",
15
    body: {
16
      username: username.value,
17
      password: password.value,
18
    },
19
  });
20

21
  if (result.error.value) {
22
    error.value = result.error.value.data?.message ?? null;
23
  } else {
24
    await navigateTo("/");
25
  }
26
  btnLoading.value = true;
27
  finish();
28
};
29

30
useHead({
31
  title: "Авторизация",
32
});
33
</script>
34

35
<template>
36
  <div class="form">
37
    <div class="form__container">
38
      <!-- {{ status }} -->
39
      <form @submit.prevent="submitForm" class="form__body">
40
        <h1 class="form__title">Авторизация</h1>
41

42
        <!-- <div class="form__item">
43
          <LabelInput for="user">Логин</LabelInput>
44
          <TextInput id="user" name="username" v-model="username"></TextInput>
45
        </div>
46
        <div class="form__item">
47
          <LabelInput for="pass">Пароль</LabelInput>
48
          <TextInput
49
            id="pass"
50
            type="password"
51
            name="password"
52
            v-model="password"
53
          ></TextInput>
54
        </div>
55

56
        <FormButton
57
          :loading="btnLoading"
58
          type="submit"
59
          :background="'var(--color-primary)'"
60
          >Войти</FormButton
61
        > -->
62
        <NuxtLink class="form__moodle" to="/login/moodle/" :external="true">
63
          <!-- <svg
64
            width="100%"
65
            height="100%"
66
            viewBox="0 0 81 45"
67
            fill="none"
68
            xmlns="http://www.w3.org/2000/svg"
69
          >
70
            <g clip-path="url(#clip0_7_14)">
71
              <path
72
                d="M32.3022 0.218506H19.8213L0.20874 16.5254V27.3965L20.3562 44.9969H32.3022L6.53795 21.788L32.3022 0.218506Z"
73
                fill="#F43F5E"
74
              />
75
              <path
76
                d="M35.9576 0.218506H48.616L23.0309 21.4428L49.2401 44.9969H36.1359L10.1934 21.6154L35.9576 0.218506Z"
77
                fill="#F43F5E"
78
              />
79
              <path
80
                d="M40.5928 16.9568H61.7847C62.453 16.9568 63.0939 17.2135 63.5667 17.6705C64.0395 18.1275 64.3056 18.7475 64.3064 19.3942V25.4737C64.3064 26.1209 64.0408 26.7417 63.5679 27.1993C63.0949 27.657 62.4535 27.9142 61.7847 27.9142H40.5928V16.9568Z"
81
                fill="#3B82F6"
82
              />
83
              <path
84
                d="M56.9999 0H53.1629L40.6354 10.8314H55.481C58.6482 10.8314 61.6856 12.0491 63.9252 14.2165C66.1647 16.3839 67.4229 19.3236 67.4229 22.3888C67.4229 25.454 66.1647 28.3936 63.9252 30.5611C61.6856 32.7285 58.6482 33.9461 55.481 33.9461H41.5899L53.5073 45.0008H57.6698C70.3241 45.0008 80.5827 35.0726 80.5827 22.8257C80.5827 10.2195 70.0231 0 56.9999 0Z"
85
                fill="#3B82F6"
86
              />
87
            </g>
88
            <defs>
89
              <clipPath id="clip0_7_14">
90
                <rect
91
                  width="80.3739"
92
                  height="45"
93
                  fill="white"
94
                  transform="translate(0.20874)"
95
                />
96
              </clipPath>
97
            </defs>
98
          </svg> -->
99
          <svg
100
            xmlns="http://www.w3.org/2000/svg"
101
            x="0px"
102
            y="0px"
103
            viewBox="0 0 48 48"
104
          >
105
            <path
106
              fill="#ffab40"
107
              d="M33.5,16c-2.5,0-4.8,1-6.5,2.6C25.3,17,23,16,20.5,16c-5.2,0-9.5,4.3-9.5,9.5V37h6V24.5 c0-1.9,1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5V37h6V24.5c0-1.9,1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5V37h6V25.5C43,20.3,38.7,16,33.5,16z"
108
            ></path>
109
            <path d="M5.5 16.2H6.5V32H5.5z"></path>
110
            <path
111
              fill="#424242"
112
              d="M22,13c1.1,0.4,2.6,2,3,3c-1.8,1.7-2.6,2.9-3,6c-0.1,1.1-0.9,1.7-2,1c-3.1-1.9-6-2-8-2 c-1-1-0.5-3.7,0-5l6,1L22,13z"
113
            ></path>
114
            <path fill="#616161" d="M18,17H4l11-7h14L18,17z"></path>
115
            <path
116
              fill="#424242"
117
              d="M7.5,30c0-2.2-0.7-4-1.5-4s-1.5,1.8-1.5,4s0.7,4,1.5,4S7.5,32.2,7.5,30z"
118
            ></path>
119
          </svg>
120
          <span>Войти с помощью <b>д.ркэ.рф</b></span></NuxtLink
121
        >
122
        <p class="form__error">{{ error }}</p>
123
      </form>
124
    </div>
125
  </div>
126
</template>
127

128
<style scoped lang="scss">
129
.form {
130
  margin-top: 2rem;
131
  &__moodle {
132
    & > svg {
133
      flex: 0 1 60px;
134
    }
135
    display: flex;
136
    gap: 0.5rem;
137
    align-items: center;
138
    // background: var(--color-primary);
139
    // color: var(--color-text-secondary);
140
    padding: 0.5rem 1rem;
141
    // text-align: center;
142
    border: 1px solid var(--color-border-primary);
143
    border-radius: 1rem;
144
  }
145
  &__error {
146
    color: var(--color-danger);
147
  }
148
  &__title {
149
    font-size: 1.5rem;
150
  }
151
  &__container {
152
    display: grid;
153
    justify-content: center;
154
    align-items: center;
155
    padding-left: 15px;
156
    padding-right: 15px;
157
    // margin: 30vh auto 0 auto;
158
  }
159
  &__body {
160
    max-width: 220px;
161
    display: flex;
162
    flex-direction: column;
163
    align-items: center;
164
    gap: 1rem;
165
  }
166
  &__item {
167
    display: flex;
168
    flex-direction: column;
169
    width: 100%;
170
    // align-items: baseline;
171
  }
172
}
173
</style>
174