summaryrefslogtreecommitdiff
path: root/app/src/views
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2022-11-12 17:14:40 +0100
committerSanto Cariotti <santo@dcariotti.me>2022-11-12 17:14:40 +0100
commit5e89ad0836ca38b132d1748603be7d8593b9bcb2 (patch)
tree25ec2a2f62b95616b5587754f1bded6e34f890ec /app/src/views
parente4e6653f754b6d2857bcf03a89d26c3e24083271 (diff)
Add signup page
Diffstat (limited to 'app/src/views')
-rw-r--r--app/src/views/Sign.vue92
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>