feature register

pages/login.vue

@@ -36,6 +36,12 @@
       <v-btn @click="clear">
         clear
       </v-btn>
+      <p class="pt-3">
+        Don't have an account?
+        <router-link to="/register">
+          Sign up
+        </router-link>
+      </p>
     </form>
   </div>
 </template>

pages/register.vue

-<!-- <template>
-  <div style="background-color: #8fc2ff">
-    <div class="container" style="
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        background-color: #8fc2ff;
-      ">
-      <div id="form-logout">
-        <form @submit.prevent="signin">
-          <h1 class="h3 mb-3 fw-normal" style="text-align: center">Sign up</h1>
-          <label>Name :</label>
-          <input type="text" class="form-control mb-2" placeholder="name" v-model="name" max="255" min="1" required />
-          <label>Email :</label>
-          <input type="email" class="form-control mb-2" placeholder="Email" v-model="email" required />
-          <label>Password :</label>
-          <input type="password" class="form-control mb-2" placeholder="password" v-model="password" required />
-          <label>Confirm Password :</label>
-          <input type="password" class="form-control mb-2" placeholder="Confirm password" v-model="confirm_password"
-            required />
-          <div class="button">
-            <button class="w-50 btn btn-lg btn-primary" type="submit">
-              Sign up
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
+<template>
+  <div class="body">
+    <form class="login-form" @submit.prevent="signup">
+      <h1 class="h3 mb-3 fw-normal" style="text-align: center">
+        Sign up
+      </h1>
+      <v-text-field
+        v-model="name"
+        :error-messages="nameErrors"
+        label="Name"
+        required
+        @input="$v.name.$touch()"
+        @blur="$v.name.$touch()"
+      />
+      <v-text-field
+        v-model="email"
+        :error-messages="emailErrors"
+        label="E-mail"
+        required
+        @input="$v.email.$touch()"
+        @blur="$v.email.$touch()"
+      />
+      <v-text-field
+        v-model="password"
+        :error-messages="passwordErrors"
+        :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+        :type="showPassword ? 'text' : 'password'"
+        label="Password"
+        hint="At least 6 characters"
+        required
+        @input="$v.password.$touch()"
+        @blur="$v.password.$touch()"
+        @click:append="showPassword = !showPassword"
+      />
+      <v-text-field
+        v-model="confirmPassword"
+        :error-messages="confirmPasswordErrors"
+        :append-icon="showConfirmPassword ? 'mdi-eye' : 'mdi-eye-off'"
+        :type="showConfirmPassword ? 'text' : 'password'"
+        label="confirmPassword"
+        hint="At least 6 characters"
+        required
+        @input="$v.confirmPassword.$touch()"
+        @blur="$v.confirmPassword.$touch()"
+        @click:append="showConfirmPassword = !showConfirmPassword"
+      />
+      <v-btn class="mr-4" type="submit">
+        Sign up
+      </v-btn>
+      <v-btn @click="clear">
+        clear
+      </v-btn>
+      <p class="pt-3">
+        Already have an account?
+        <router-link to="/login">
+          Login
+        </router-link>
+      </p>
+    </form>
   </div>
 </template>
-
 <script>
+import { validationMixin } from 'vuelidate'
+import { required, minLength, maxLength, email, sameAs } from 'vuelidate/lib/validators'
 
 export default {
-  layout: 'none',
-  data: () => {
-    return {
-      name: '',
-      email: '',
-      password: '',
-      confirm_password: '',
+  mixins: [validationMixin],
+  layout: 'empty',
+  validations: {
+    name: { required, minLength: minLength(1), maxLength: maxLength(255) },
+    email: { required, email },
+    password: { required, minLength: minLength(6) },
+    confirmPassword: { required, sameAsPassword: sameAs('password') }
+  },
+
+  data: () => ({
+    name: '',
+    email: '',
+    password: '',
+    confirmPassword: '',
+    showPassword: false,
+    showConfirmPassword: false
+  }),
+
+  computed: {
+    nameErrors () {
+      const errors = []
+      if (!this.$v.name.$dirty) {
+        return errors
+      }
+      !this.$v.name.required && errors.push('E-mail is required')
+      !this.$v.name.minLength && errors.push('Name must be at least 1 character')
+      !this.$v.name.maxLength && errors.push('Name can not be longer than 255 characters')
+      return errors
+    },
+    emailErrors () {
+      const errors = []
+      if (!this.$v.email.$dirty) {
+        return errors
+      }
+      !this.$v.email.email && errors.push('Must be valid e-mail')
+      !this.$v.email.required && errors.push('E-mail is required')
+      return errors
+    },
+    passwordErrors () {
+      const errors = []
+      if (!this.$v.password.$dirty) {
+        return errors
+      }
+      !this.$v.password.minLength && errors.push('Password must be at least 6 charactors')
+      !this.$v.password.required && errors.push('Password is required')
+      return errors
+    },
+    confirmPasswordErrors () {
+      const errors = []
+      if (!this.$v.confirmPassword.$dirty) {
+        return errors
+      }
+      !this.$v.confirmPassword.required && errors.push('Password confirmation is required')
+      !this.$v.confirmPassword.sameAsPassword && errors.push('Password and confirm password does not match')
+      return errors
     }
   },
+
   methods: {
-    signin() {
-      fetch('http://127.0.0.1:8000/api/register', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Accept: 'application/json',
-        },
-        body: JSON.stringify({
+    submit () {
+      this.$v.$touch()
+    },
+    clear () {
+      this.$v.$reset()
+      this.name = ''
+      this.email = ''
+      this.password = ''
+      this.confirmPassword = ''
+    },
+    async signup () {
+      try {
+        await this.$axios.post('http://127.0.0.1:8000/api/register', {
           name: this.name,
           email: this.email,
           password: this.password,
-          confirm_password: this.confirm_password,
-        }),
-      })
-      this.$router.push("/login")
-    },
-  },
+          confirm_password: this.confirm_password
+        }
+        ).then((resp) => {
+          if (resp.data.status === 'success') {
+            this.$toast.success('Register successfully', {
+              duration: 2000
+            })
+            this.$router.push('login')
+          }
+        })
+      } catch (error) {
+        this.$toast.error(error.response.data.message, {
+          duration: 2000
+        })
+      }
+    }
+  }
 }
 </script>
-<style scoped>
-#form-logout {
-  height: 60%;
-  width: 30%;
-  /* border: 1px solid black; */
-  padding: 12px;
-  padding-top: 30px;
+<style>
+.body {
   display: flex;
   justify-content: center;
-  background-color: white;
-  border-radius: 3%;
-  font-weight: 600;
-}
-
-.btn {
+  text-align: center;
   align-items: center;
-  justify-content: center;
-  margin-left: 50px;
+  background-color: #2c2c2c;
+  height: 100vh;
+}
+.login-form{
+  width: 27%;
+  border: #8fc2ff 1px solid;
+  background-color: #121212;
+  border-radius: 1rem;
+  padding: 2rem 1rem;
+  border-radius: 1rem;
 }
-</style> -->
+</style>