aboutsummaryrefslogblamecommitdiff
path: root/client/src/views/Register.vue
blob: e26c75108d8cabe5e3713c22953c80a1e98875a9 (plain) (tree)
1
2
3
4
5
6




                                                   
                                 




































                                                                                                         





                                                                                                                      

                  

                                                                                               






                  


                                                                         



                                  
                                           


                   


               


                    







                             




                                  







                                  



                                                                             

                          


                           









                                                                                          







                                                        










                             
<template>
  <div class="mt-5">
    <div class="row d-flex justify-content-center">
      <div class="col-md-7">
        <div class="card px-5 py-4">
          <div class="form-data">

            <div class="text-center mb-4">
              <h4>Register</h4>
            </div>

            <div class="forms-inputs mb-4">
              <span>First name</span>
              <input type="text" v-model="firstname"
                :class="{'form-control':true, 'is-invalid' : !validName(firstname) && firstnameBlured}"
                @blur="firstnameBlured = true">
              <div class="invalid-feedback">A valid first name is required!</div>
            </div>

            <div class="forms-inputs mb-4">
              <span>Last name</span>
              <input type="text" v-model="lastname"
                :class="{'form-control':true, 'is-invalid' : !validName(lastname) && lastnameBlured}"
                @blur="lastnameBlured = true">
              <div class="invalid-feedback">A valid last name is required!</div>
            </div>

            <div class="forms-inputs mb-4">
              <span>Email</span>
              <input type="text" v-model="email"
                :class="{'form-control':true, 'is-invalid' : !validEmail(email) && emailBlured}"
                @blur="emailBlured = true">
              <div class="invalid-feedback">A valid email is required!</div>
            </div>

            <div class="forms-inputs mb-4">
              <span>Password</span>
              <input type="password" v-model="password"
                :class="{'form-control':true, 'is-invalid' : !validPassword(password) && passwordBlured}"
                @blur="passwordBlured = true">
              <div class="invalid-feedback">Password must be 8 character!</div>
            </div>

            <div class="forms-inputs mb-4">
              <span>Confirm Password</span>
              <input type="password" v-model="passwordConfirm"
                :class="{'form-control':true, 'is-invalid' : (password !== passwordConfirm) && passwordConfirmBlured}"
                @blur="passwordConfirmBlured = true">
              <div class="invalid-feedback">Passwords must match!</div>
            </div>

            <div class="mb-3">
              <button @click.stop.prevent="submit" class="btn btn-dark w-100">Register</button>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <Modal :title="modalTitle" v-if="showModal" @close="showModal = false">
    <p v-text="modalText"></p>
  </Modal>
</template>

<script>
import validator from 'validator';
import Modal from '@/components/Modal.vue';

export default {
  name: 'Register',
  components: {
    Modal
  },
  data() {
    return {
      valid : false,
      firstname: "",
      firstnameBlured: false,
      lastname: "",
      lastnameBlured: false,
      email : "",
      emailBlured : false,
      password:"",
      passwordBlured:false,
      passwordConfirm:"",
      passwordConfirmBlured:false,
      showModal: false,
      modalTitle: '',
      modalText: ''
    }
  },
  methods: {
    validate() {
      this.firstnameBlured = true;
      this.lastnameBlured = true;
      this.emailBlured = true;
      this.passwordBlured = true;
      this.passwordConfirmBlured = true;
      if (this.validName(this.firstname) && this.validName(this.lastname)
          && this.validEmail(this.email) && this.validPassword(this.password)
          && this.password === this.passwordConfirm) {
        this.valid = true;
      }
      else {
        this.valid = false;
      }
    },

    validEmail: (email) => validator.isEmail(email),
    //validPassword: (password) => validator.isStrongPassword(password, { minLength: 8 }),
    validPassword: (password) => password.length > 7,
    validName: (name) => validator.isAlpha(name) && name.length,

    submit() {
      this.validate();
      if (this.valid) {
        this.modalTitle = 'Success!';
        this.modalText = 'You successfully registered!';
        this.showModal = true;
      }
      else {
        this.modalTitle = 'Failure!';
        this.modalText = 'You failed to register.';
        this.showModal = true;
      }
    }
  }
}
</script>

<style lang="scss">
  .forms-inputs input:focus {
      border: 2px solid #000
  }
</style>