UnivateProperties/src/components/user/registerAgencySection.vue

<template>
  <!-- eslint-disable max-len -->
  <form>
    <div class="container" style="text-align:left">
      <div class="reg-page">
        <div class="regform" style="text-align:left">
          <h4>Agency Details</h4>
          <div class="row">
            <div class="row" style="text-align:left">
              <div class="col-md-8" style="margin-bottom: 1em">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="people-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="agencyname"
                    placeholder="Agency Name"
                    v-model="registerAgency.name"
                  />
                </div>
              </div>
              <div class="col-md-8" style="margin-bottom: 1em">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="book-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="eaabffcnumber"
                    placeholder="EAAB FFC Number"
                    v-model="registerAgency.eaabeffcNumber"
                  />
                </div>
              </div>
              <div class="col-md-8">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="clipboard-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="companyregnumber"
                    placeholder="Company Registration Number"
                    v-model="registerAgency.companyRegNumber"
                  />
                </div>
              </div>
            </div>
          </div>
          <hr />
          <div class="col-md-10" style="text-align:left">
            <h5 style="margin-bottom: 1em">Agency Administrator</h5>
            <div class="row" style="text-align:left">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="name"
                    placeholder="Name"
                    v-model="registerAgency.user.name"
                  />
                </div>
              </div>

              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="surname"
                    placeholder="Surname"
                    v-model="registerAgency.user.surname"
                  />
                </div>
              </div>
            </div>

            <div class="row" style="text-align:left">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="email"
                    placeholder="Email Address"
                    v-model="registerAgency.user.email"
                  />
                </div>
              </div>

              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="smartphone-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="number"
                    name="cellnumber"
                    placeholder="Cellphone Number"
                    v-model="registerAgency.user.cellNumber"
                  />
                </div>
              </div>
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="number"
                    name="landlinenumber"
                    placeholder="Landline Number"
                    v-model="registerAgency.user.telephone"
                  />
                </div>
              </div>
            </div>
            <hr />
            <div class="row">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="username"
                    placeholder="Username"
                    v-model="registerAgency.user.username"
                  />
                </div>
              </div>
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    :type="isPasswordShown"
                    v-model="registerAgency.user.password"
                    id="password"
                    placeholder="Password"
                    name="password"
                    value
                  />
                </div>
              </div>
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    :type="isPasswordShown"
                    v-model="registerAgency.user.password"
                    id="password"
                    placeholder="Confirm Password"
                    name="confirmpassword"
                    value
                  />
                </div>

                <div class="input-group-append">
                  <span class="input-group-text">
                    <eva-icon
                      v-if="!showPassword"
                      name="eye-off-outline"
                      fill="#60CBEB"
                      @click="togglePassword()"
                    ></eva-icon>
                    <eva-icon v-else name="eye-outline" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group row"></div>
          <div class="row offset-md-1">
            <div class="col-md-2">
              <button
                @click="SubmitData()"
                class="btn btn-b-n"
                type="button"
                data-dismiss="modal"
              >Submit</button>
            </div>
            <div class="col-md-2 offset-md-1">
              <button
                @click="Close(routerGoTo('/user/login'))"
                class="btn btn-b-n"
                type="button"
                data-dismiss="modal"
              >Cancel</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'Agency',
  data() {
    return {
      user: null,
      isPasswordShown: 'password',
      selectItems: [{ text: 'password', value: 0 }],
      selectErrors: 'Some error with the field',
      select: null,
      textErrors: 'Some error with the field',
      text: '',
      showPassword: false,
    };
  },
  computed: {
    ...mapState('registerAgency', ['registerAgency']),
  },
  methods: {
    ...mapActions('registerAgency', [
      'getAgency',
      'saveAgency',
      'updateAgency',
      'clearAgency',
    ]),

    routerGoTo(goTo) {
      this.$emit('routerGoTo', goTo);
    },

    togglePassword() {
      this.showPassword = true;
      this.isPasswordShown = 'text';
    },
    passwordToggled() {
      this.showPassword = false;
      this.isPasswordShown = 'password';
    },
    SubmitData() {
      this.saveAgency(this.registerAgency);
      this.$router.push('/user/login');
    },
    Close() {
      this.$router.push('/user/login');
    },
  },
};
</script>

<style>
.goDown {
  margin-top: 150px;
}
</style>