add reset password component

src/router.js

@@ -5,6 +5,7 @@ import RegisterUser from './views/RegisterUser.vue'
 import LoginUser from './views/LoginUser.vue'
 import Room from './views/Room.vue'
 import ForgotPassword from './views/ForgotPassword'
+import ResetPassword from './views/ResetPassword'
 
 Vue.use(Router)
 
@@ -34,6 +35,12 @@ const router = new Router({
       name: 'forgotpassword',
       component: ForgotPassword
     },
+    {
+      path: '/reset_password/:token',
+      name: 'resetpassword',
+      props: true,
+      component: ResetPassword
+    },
     {
       path: '/rooms/:roomId',
       name: 'room',

src/views/ForgotPassword.vue

@@ -44,7 +44,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .reset-page{
   justify-content: flex-start;
   padding: 10%;

src/views/ResetPassword.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="container reset-page">
+    <h1 class="title is-2 has-text-white has-text-centered">Reset Password</h1>
+    <form class="reset-password-form" @submit.prevent="resetPassword">
+      <div class="columns">
+        <div class="column reset-email">
+          <label for="password">New Password</label>
+          <input
+            v-model="password"
+            type="password"
+            name="password"
+            class="input"
+            placeholder="Enter your password"
+          />
+          <label for="confirmpassword">Confirm Password</label>
+          <input
+            v-model="confirmPassword"
+            type="password"
+            name="confirmpassword"
+            class="input"
+            placeholder="Confirm password"
+          />
+          <p class="has-text-danger">{{ error }}</p>
+          <button type="submit" name="button" class="button btn-secondary">Submit</button>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    token: {
+      type: String,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      password: '',
+      confirmPassword: '',
+      error: ''
+    }
+  },
+  methods: {
+    resetPassword() {
+      this.error = ''
+      if (!this.passwordsMatched()) {
+        this.error = 'Passwords do not match'
+      } else {
+        console.log("reseting....", this.token)
+      }
+    },
+    passwordsMatched() {
+      return this.password === this.confirmPassword
+    }
+  }
+}
+</script>
+
+<style scoped>
+.reset-page{
+  justify-content: flex-start;
+  padding: 10%;
+}
+.reset-password-form{
+  width: 40%;
+}
+input, label, p {
+  margin-bottom: 15px;
+}
+</style>