Add initial authentication system

src/components/Admin.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="hello">
+    <h1>Welcome to administrator page</h1>
+    <h2>{{ msg }}</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      msg: "The superheros",
+    };
+  },
+};
+</script>
+<style scoped>
+h1,
+h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/components/HelloWorld.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="hello">
+    <h1>This is homepage</h1>
+    <h2>{{ msg }}</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      msg: "Hello World!",
+    };
+  },
+};
+</script>
+    <!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1,
+h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/components/Login.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <h4>Login</h4>
+    <form>
+      <label for="email">E-Mail Address</label>
+      <div>
+        <input id="email" type="email" v-model="email" required autofocus />
+      </div>
+      <div>
+        <label for="password">Password</label>
+        <div>
+          <input id="password" type="password" v-model="password" required />
+        </div>
+      </div>
+      <div>
+        <button type="submit" @click="handleSubmit">Login</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      email: "",
+      password: "",
+    };
+  },
+  methods: {
+    handleSubmit(e) {
+      e.preventDefault();
+      if (this.password.length > 0) {
+        this.$http
+          .post("http://localhost:3000/login", {
+            email: this.email,
+            password: this.password,
+          })
+          .then((response) => {
+            let is_admin = response.data.user.is_admin;
+            localStorage.setItem("user", JSON.stringify(response.data.user));
+            localStorage.setItem("jwt", response.data.token);
+
+            if (localStorage.getItem("jwt") != null) {
+              this.$emit("loggedIn");
+              if (this.$route.params.nextUrl != null) {
+                this.$router.push(this.$route.params.nextUrl);
+              } else {
+                if (is_admin == 1) {
+                  this.$router.push("admin");
+                } else {
+                  this.$router.push("dashboard");
+                }
+              }
+            }
+          })
+          .catch(function (error) {
+            console.error(error.response);
+          });
+      }
+    },
+  },
+};
+</script>

src/components/Register.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <h4>Register</h4>
+    <form>
+      <label for="name">Name</label>
+      <div>
+        <input id="name" type="text" v-model="name" required autofocus />
+      </div>
+
+      <label for="email">E-Mail Address</label>
+      <div>
+        <input id="email" type="email" v-model="email" required />
+      </div>
+
+      <label for="password">Password</label>
+      <div>
+        <input id="password" type="password" v-model="password" required />
+      </div>
+
+      <label for="password-confirm">Confirm Password</label>
+      <div>
+        <input
+          id="password-confirm"
+          type="password"
+          v-model="password_confirmation"
+          required
+        />
+      </div>
+
+      <label for="password-confirm">Is this an administrator account?</label>
+      <div>
+        <select v-model="is_admin">
+          <option value="1">Yes</option>
+          <option value="0">No</option>
+        </select>
+      </div>
+
+      <div>
+        <button type="submit" @click="handleSubmit">Register</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["nextUrl"],
+  data() {
+    return {
+      name: "",
+      email: "",
+      password: "",
+      password_confirmation: "",
+      is_admin: null,
+    };
+  },
+  methods: {
+    handleSubmit(e) {
+      e.preventDefault();
+
+      if (
+        this.password === this.password_confirmation &&
+        this.password.length > 0
+      ) {
+        let url = "http://localhost:3000/register";
+        if (this.is_admin != null || this.is_admin == 1)
+          url = "http://localhost:3000/register-admin";
+        this.$http
+          .post(url, {
+            name: this.name,
+            email: this.email,
+            password: this.password,
+            is_admin: this.is_admin,
+          })
+          .then((response) => {
+            localStorage.setItem("user", JSON.stringify(response.data.user));
+            localStorage.setItem("jwt", response.data.token);
+
+            if (localStorage.getItem("jwt") != null) {
+              this.$emit("loggedIn");
+              if (this.$route.params.nextUrl != null) {
+                this.$router.push(this.$route.params.nextUrl);
+              } else {
+                this.$router.push("/");
+              }
+            }
+          })
+          .catch((error) => {
+            console.error(error);
+          });
+      } else {
+        this.password = "";
+        this.passwordConfirm = "";
+
+        return alert("Passwords do not match");
+      }
+    },
+  },
+};
+</script>

src/components/UserBoard.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="hello">
+    <h1>Welcome to regular users page</h1>
+    <h2>{{ msg }}</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      msg: "The commoners",
+    };
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1,
+h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>