diff options
Diffstat (limited to 'app/src/views')
-rw-r--r-- | app/src/views/Sign.vue | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/app/src/views/Sign.vue b/app/src/views/Sign.vue new file mode 100644 index 0000000..54e767a --- /dev/null +++ b/app/src/views/Sign.vue @@ -0,0 +1,92 @@ +<template> + <ion-page> + <m6-header /> + <ion-content :fullscreen="true"> + <form id="login"> + <h2>Sign in</h2> + <ion-item lines="none"> + <ion-input + placeholder="username" + type="text" + :value="form.username" + @ionInput="form.username = $event.target.value" + /> + </ion-item> + <ion-item lines="none"> + <ion-input + placeholder="password" + type="password" + :value="form.password" + @ionInput="form.password = $event.target.value" + /> + </ion-item> + <ion-button color="primary" id="log" @click="handleLogin()"> + Submit + </ion-button> + </form> + </ion-content> + <m6-footer /> + </ion-page> +</template> + +<script lang="ts"> +import { defineComponent } from "vue"; +import { IonPage, IonContent } from "@ionic/vue"; +import Header from "@/components/Header.vue"; +import Footer from "@/components/Footer.vue"; + +import { mapGetters, mapActions } from "vuex"; + +export default defineComponent({ + name: "Sign", + components: { + IonContent, + IonPage, + "m6-header": Header, + "m6-footer": Footer, + }, + data() { + return { + form: { username: "", password: "" }, + }; + }, + computed: { + ...mapGetters("auth", ["isLogged"]), + }, + created() { + if (this.isLogged) window.location.href = "/me"; + }, + methods: { + handleLogin() { + if (this.form.username == "" || this.form.password == "") { + this.toast({ + header: "All fields are required", + text: "", + color: "danger", + }); + return; + } + this.login(this.form).then((response) => { + if (response.status != 200) { + this.toast({ + header: response.data.error, + text: "", + color: "danger", + }); + } else { + this.toast({ + header: "Logged successfully", + text: "", + color: "success", + }); + setTimeout(() => { + window.location.href = "/me"; + }, 2000); + } + }); + }, + ...mapActions(["toast"]), + ...mapActions("auth", ["login"]), + }, +}); +</script> |