diff --git a/src/components/LoggedInLayout.vue b/src/components/LoggedInLayout.vue index e2f256e..86ea63c 100644 --- a/src/components/LoggedInLayout.vue +++ b/src/components/LoggedInLayout.vue @@ -33,7 +33,7 @@ export default { return { isOpenForm: false, updatedClients: false, - url: "https://astra-dev.dopcore.com", + url: "https://astra-dev.dopcore.com/api/store/", createdClientId: "", }; }, diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue index abd4e48..5edb46e 100644 --- a/src/components/TheHeader.vue +++ b/src/components/TheHeader.vue @@ -34,9 +34,9 @@ padding="0", style="color: var(--font-grey-color)" ) - base-avatar(:size="36", :color="userData?.color", v-if="!userData?.photo") {{changeName}} + base-avatar(:size="36", :color="userData?.color", v-if="!userData?.avatar") {{changeName}} base-avatar(:size="32", v-else) - img.h-full.object-cover(:src="url + userData?.photo", alt="Avatar") + img.h-full.object-cover(:src="url + userData?.avatar", alt="Avatar") .h-6.w-6.flex.items-center.justify-center.ml-1.pt-1 q-icon.arrow(name="app:down-arrow", size="24px") q-menu( @@ -104,8 +104,8 @@ export default { redirectHomePage() { this.$router.push("/calendar"); }, - logout() { - localStorage.removeItem("tokenAccess"); + async logout() { + await fetchWrapper.post("auth/logout"); this.$router.go("/login"); }, openPopup() { diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue index aa6d4d2..6e1abf3 100644 --- a/src/components/base/BaseInput.vue +++ b/src/components/base/BaseInput.vue @@ -24,11 +24,14 @@ :shadow-text="shadowText", :autofocus="autofocus", hide-bottom-space + :error="error" ) template(v-slot:prepend, v-if="iconLeft") slot(name="iconLeft") template(v-slot:append, v-if="iconRight") slot(name="iconRight") + template(#error v-if="error") + slot(name="error") slot(v-if="!iconLeft && !iconRight") @@ -80,6 +83,7 @@ export default { size: String, circle: Boolean, height: String, + error: Boolean, }, emits: ["update:modelValue"], computed: { diff --git a/src/pages/login/TheLogin.vue b/src/pages/login/TheLogin.vue index cfb3c1e..b40bbe2 100644 --- a/src/pages/login/TheLogin.vue +++ b/src/pages/login/TheLogin.vue @@ -12,28 +12,33 @@ .flex.flex-col.gap-y-5 .flex.flex-col.gap-y-px base-input.blue-color( - :rule="[wrongData => !!wrongData || 'Этого телефона нет в системе']", + :error="authError" v-model="user.username", placeholder="+7 (915) 224–21–31", label="Номер телефона", size="L" + @keypress.enter="login" ) + template(#error) Этого телефона нет в системе .flex.flex-col.gap-y-px base-input.blue-color( - :rule="[wrongData => !!wrongData || 'Неверный пароль']", + :error="authError" v-model="user.password", - :type="changeType", + :type="passwordInputType", placeholder="Введите ваш пароль", label="Пароль", size="L" + @keypress.enter="login" ) - .flex.items-center.cursor-pointer(@click="changeView", v-if="!wrongData && user.password") - img(:src="!isView ? eye_close : eye_open") - .flex.items-center.gap-x-8px.-ml-2 - q-checkbox(v-model="person", type="checkbox") - .flex.non-italic.font-medium.base Запомнить меня + .flex.items-center.cursor-pointer(@click="changePasswordInputType", v-if="user.password") + q-icon(name="app:eye" v-if="showPassword") + q-icon(name="app:eye-open" v-else) + template(#error) Неверный логин или пароль + .flex.items-center.-ml-2 + q-checkbox(v-model="rememberMe", type="checkbox") + .font-medium.base Запомнить меня base-button( - :disable="disabledButton", + :disable="canPressLoginButton", label="Войти в аккаунт", size="L", @click="login", @@ -46,8 +51,6 @@ import { fetchWrapper } from "@/shared/fetchWrapper"; import logoMark from "@/assets/images/logoMark.svg"; import BaseButton from "@/components/base/BaseButton.vue"; -import eye_open from "@/assets/icons/eye_open.svg"; -import eye_close from "@/assets/icons/eye_close.svg"; import BaseInput from "@/components/base/BaseInput.vue"; export default { @@ -55,36 +58,26 @@ export default { components: { BaseInput, BaseButton }, data() { return { - isView: false, + showPassword: false, logoMark, - eye_close, - eye_open, authorized: true, user: {}, userData: {}, - person: false, + rememberMe: false, + authError: false, }; }, computed: { - wrongData() { - return !this.authorized; + passwordInputType() { + return !this.showPassword ? "password" : "text"; }, - changeType() { - return !this.isView ? "password" : "text"; - }, - disabledButton() { + canPressLoginButton() { return !(this.user.username && this.user.password); }, - showBorder() { - return !this.authorized && !this.user.username && !this.user.password; - }, }, methods: { - changeView() { - this.isView = !this.isView; - }, - async auth() { - this.userData = await fetchWrapper.get("users/me"); + changePasswordInputType() { + this.showPassword = !this.showPassword; }, login() { fetchWrapper @@ -92,14 +85,9 @@ export default { user_name: this.user.username, password: this.user.password, }) - .then(() => { - this.auth().then(() => this.$router.push("/")); - }) - .catch(() => { - this.authorized = false; - this.user.username = ""; - this.user.password = ""; - this.$router.push("/login"); + .then((data) => { + if (!data) this.authError = true; + else this.$router.push("/"); }); }, },