Add signup page

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>