Eva icons on Register amended

src/components/user/registerPage.vue

@@ -1,111 +1,153 @@
 <template>
+  <!-- eslint-disable max-len -->
   <form>
-    <!-- eslint-disable max-len -->
     <div class="reg-page">
       <div class="regform">
         <div class="col-md-10" style="text-align:left">
-          <h5 style="margin-bottom: 1em">{{ Header }}</h5>
+          <h4>Private Individual</h4>
           <div class="row" style="text-align:left">
-            <div class="col-md-6" style="margin-bottom: 1em">
-              <eva-icon name="person" fill="#60CBEB"></eva-icon>
-              <input
-                class="form-control"
-                type="text"
-                name="name"
-                placeholder="Name"
-                v-model="registerIndividual.name"
-              />
+            <div class="col-md-8" style="margin-bottom: 1em">
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="people" fill="#60CBEB"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="name"
+                  placeholder="Name"
+                  v-model="registerIndividual.name"
+                />
+              </div>
             </div>
-            <div class="col-md-6" style="margin-bottom: 1em">
-              <eva-icon name="person" fill="#60CBEB"></eva-icon>
-              <input
-                class="form-control"
-                type="text"
-                name="surname"
-                placeholder="Surname"
-                v-model="registerIndividual.surname"
-              />
+            <div class="col-md-8" style="margin-bottom: 1em">
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="book" fill="#60CBEB"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="surname"
+                  placeholder="Surname"
+                  v-model="registerIndividual.surname"
+                />
+              </div>
             </div>
           </div>
 
           <div class="row" style="text-align:left">
-            <div class="col-md-8">
-              <eva-icon name="email" fill="#60CBEB"></eva-icon>
-              <input
-                class="form-control"
-                type="text"
-                name="email"
-                placeholder="Email Address"
-                v-model="registerIndividual.email"
-              />
-              <div class="form-group row"></div>
+            <div class="col-md-7" style="text-align:left">
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="email" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="email"
+                    placeholder="Email Address"
+                    v-model="registerIndividual.email"
+                  />
+                  <div class="form-group row"></div>
+                </div>
+              </div>
             </div>
 
-            <div class="col-md-6" style="text-align:left">
-              <eva-icon name="smartphone" fill="#60CBEB"></eva-icon>
-              <input
-                class="form-control"
-                type="text"
-                name="cellnumber"
-                placeholder="Contact Number"
-                v-model="registerIndividual.cellNumber"
-              />
+            <div class="col-md-8" style="text-align:left">
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="smartphone" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="cellnumber"
+                    placeholder="Contact Number"
+                    v-model="registerIndividual.cellNumber"
+                  />
+                </div>
+              </div>
             </div>
           </div>
           <hr />
           <div class="row">
-            <div class="col-md-7" style="margin-bottom: 1em">
-              <eva-icon name="person" fill="#60CBEB"></eva-icon>
-              <input
-                class="form-control"
-                type="text"
-                name="username"
-                placeholder="Username"
-                v-model="registerIndividual.username"
-              />
+            <div class="col-md-8" style="margin-bottom: 1em">
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="person" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="username"
+                    placeholder="Username"
+                    v-model="registerIndividual.username"
+                  />
+                </div>
+              </div>
             </div>
-            <div class="col-md-7" style="margin-bottom: 1em">
-              <eva-icon name="lock" fill="#60CBEB"></eva-icon>
-              <input
-                class="form-control"
-                :type="isPasswordShown"
-                v-model="registerIndividual.password"
-                id="password"
-                placeholder="Password"
-                name="password"
-                value
-              />
+            <div class="col-md-8" style="margin-bottom: 1em">
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    :type="isPasswordShown"
+                    v-model="registerIndividual.password"
+                    id="password"
+                    placeholder="Password"
+                    name="password"
+                    value
+                  />
+                </div>
+              </div>
             </div>
-            <div class="col-md-7" style="margin-bottom: 1em">
-              <eva-icon name="lock" fill="#60CBEB"></eva-icon>
-              <input
-                class="form-control"
-                :type="isPasswordShown"
-                v-model="registerIndividual.password"
-                id="password"
-                placeholder="Confirm Password"
-                name="confirmpassword"
-                value
-              />
-              <div>
-                <eva-icon
-                  v-if="!showPassword"
-                  name="eye-off"
-                  fill="#60CBEB"
-                  @click="togglePassword()"
-                ></eva-icon>
-                <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
+            <div class="col-md-8" style="margin-bottom: 1em">
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    :type="isPasswordShown"
+                    v-model="registerIndividual.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"
+                          fill="#60CBEB"
+                          @click="togglePassword()"
+                        ></eva-icon>
+                        <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
+                      </span>
+                    </div>
+                  </div>
+                </div>
               </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="submit">Submit</button>
-          </div>
-          <div class="col-md-2 offset-md-1">
-            <button @click="Cancel()" class="btn btn-b-n" type="submit">Cancel</button>
+          <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="submit">Submit</button>
+            </div>
+            <div class="col-md-2 offset-md-1">
+              <button @click="Cancel()" class="btn btn-b-n" type="submit">Cancel</button>
+            </div>
           </div>
         </div>
       </div>