From 0491c8f5f9a52a7e38fd82b81a862f9b66b3b450 Mon Sep 17 00:00:00 2001
From: Afrina Alimi <82226421+Afrina16@users.noreply.github.com>
Date: Tue, 13 Dec 2022 15:50:15 +0800
Subject: [PATCH] update changes

---
 src/components/authentication/TheLogin.vue    |  89 +--
 src/components/authentication/TheRegister.vue | 513 +++++++++---------
 src/components/layouts/TheHeader.vue          |  14 +-
 3 files changed, 306 insertions(+), 310 deletions(-)

diff --git a/src/components/authentication/TheLogin.vue b/src/components/authentication/TheLogin.vue
index ce3f22d..eaf3044 100644
--- a/src/components/authentication/TheLogin.vue
+++ b/src/components/authentication/TheLogin.vue
@@ -1,24 +1,43 @@
 <template>
   <Toast :breakpoints="{ '767px': { width: '100%', right: '0', left: '0' } }" />
-  <div class="flex main-container min-h-screen align-items-center justify-content-center">
-    <div class="surface-card fadein p-4 shadow-8 border-round w-11 md:w-10 lg:w-8 xl:w-7">
-      <div>
-        <div class="row">
-          <div class="col-md-2 d-flex flex-column justify-content-center align-items-left" style="margin-right: -85px">
-            <img class="logo-img1" src="img/e-Rahn_Logo_FA-01.png" alt="erahn-logo" />
-          </div>
-          <div class="col-md-2 d-flex flex-column justify-content-center align-items-left">
-            <img class="logo-img2" src="img/Logo KoPKB_Final.png" alt="erahn-logo" />
-          </div>
-        </div>
-      </div>
+  <div
+    class="
+      flex
+      main-container
+      min-h-screen
+      align-items-center
+      justify-content-center
+
+    "
+  >
+    <div
+      class="
+        surface-card
+        fadein
+        p-4
+        shadow-8
+        border-round
+        w-11
+        md:w-10
+        lg:w-8
+        xl:w-7
+        content-bg
+      "
+    >
       <div class="text-center mb-5">
-        <img class="logo-img3" src="img/e-rahn-lelong.png" alt="erahn-logo" />
-        <div class="text-200 text-3xl font-semibold mb-3 mt-2">Log Masuk</div>
-        <span class="text-200 font-medium line-height-3">Belum punyai akaun?</span>
-        <router-link v-bind:to="{ name: 'register' }"
-          class="font-medium no-underline ml-2 text-white cursor-pointer">Daftar sekarang!
-        </router-link>
+        <img class="logo-img" src="img/erahn-logo.png" alt="erahn-logo" />
+        <div class="text-200 text-3xl font-semibold mb-3">
+          E-Rahn Lelong
+        
+        </div>
+        <span class="text-dark-300 font-medium line-height-3"
+          >Belum punyai akaun?</span
+        >
+        <router-link
+          v-bind:to="{ name: 'register' }"
+          class="font-medium no-underline ml-2 text-white cursor-pointer"
+          >Daftar sekarang!</router-link
+        >
       </div>
       <form @submit.prevent="submit">
         <div class="px-0 text-center md:px-8">
@@ -28,8 +47,14 @@
             <div class="col">
               <span class="p-input-icon-right">
                 <i class="pi pi-user" />
-                <InputText class="mb-2" v-model="form.username" type="text" placeholder="ID Pengguna" required>
-                </InputText>
+                <InputText
+                  class="mb-2"
+                  v-model="form.username"
+                  type="text"
+                  placeholder="Username"
+                  required
+                  style="width: 360px"
+                ></InputText>
               </span>
             </div>
             <InlineMessage class="flex-auto" v-if="v$.form.username.$error">Username diperlukan</InlineMessage>
@@ -194,6 +219,8 @@ export default {
   url("/src/assets/background_arrahn.jpg"); */
   background-image: url("/src/assets/background-lelong.png");
   background-color: #fec234;
+  background-image: url("/src/assets/background-lelong.png");
+  background-color: #fec234;
   background-position: center;
   background-size: cover;
 }
@@ -207,26 +234,14 @@ export default {
 }
 
 .logo-img {
-  color: white;
-  width: 180px;
-  height: 150px;
-}
-
-.logo-img1 {
-  width: 50px;
-  height: 50px;
-}
-
-.logo-img2 {
-  width: 50px;
+  width: 70px;
   height: 60px;
 }
 
-.logo-img3 {
-  width: 150px;
-  height: 30px;
-}
-
+/* .border-round{
+  border-radius:50px;
+} */
+
 /* .border-round{
   border-radius:50px;
 } */
diff --git a/src/components/authentication/TheRegister.vue b/src/components/authentication/TheRegister.vue
index b21b07e..0abab27 100644
--- a/src/components/authentication/TheRegister.vue
+++ b/src/components/authentication/TheRegister.vue
@@ -1,45 +1,178 @@
 <template>
   <Toast :breakpoints="{ '767px': { width: '100%', right: '0', left: '0' } }" />
-  <div class="main-container">
-    <div
-      class="flex min-h-screen align-items-center justify-content-center p-5"
-    >
-      <div
-        class="
-          surface-card
-          fadein
-          p-4
-          shadow-2
-          border-round
-          w-11
-          md:w-10
-          lg:w-10
-          xl:w-8
-        "
-      >
-        <div class="text-center mb-3">
-          <div class="text-900 text-3xl font-semibold mb-3">            
-            <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
-            <div class="text-200 text-3xl font-semibold mb-3 mt-3">Daftar Akaun</div>
+  <div class="flex main-container min-h-screen align-items-center justify-content-center m-5">
+    <div class= "surface-card fadein p-4 shadow-2 border-round w-11 md:w-10 lg:w-10 xl:w-8">
+      <div class="text-center mb-5">
+        <img class="logo-img" src="img/erahn-logo.png" alt="arrahn-logo" />
+        <div class="text-200 text-3xl font-semibold mb-3">E-Rahn Lelong</div>
+        <span class="text-600 font-medium line-height-3">Sudah punyai akaun?</span>
+        <router-link
+          v-bind:to="{ name: 'login' }"
+          class="font-medium no-underline ml-2 text-blue-500 cursor-pointer"
+          >Log masuk sekarang!
+        </router-link>
+      </div>
+      <h5 class="text-200">Daftar Akaun</h5>
+      <div class="grid">
+        <div class="col-12 lg:col-6">
+          <div class="field text-200">
+            <label for="name">Nama</label>
+            <InputText
+              id="name"
+              type="text"
+              v-model="form.name"
+              class="
+                text-base text-color
+                surface-overlay
+                p-2
+                border-1 border-solid
+                surface-border
+                border-round
+                appearance-none
+                outline-none
+                focus:border-primary
+                w-full
+              "
+            ></InputText>
+            <InlineMessage class="mt-1" v-if="v$.form.name.$error"
+              >Nama diperlukan</InlineMessage
+            >
           </div>
-          <!-- <span class="text-600 font-medium line-height-3"
-            >Sudah punyai akaun?</span
-          >
-          <router-link
-            v-bind:to="{ name: 'login' }"
-            class="font-medium no-underline ml-2 text-blue-500 cursor-pointer"
-            >Log masuk sekarang!</router-link
-          > -->
         </div>
-        <!-- <h5>Daftar Akaun</h5> -->
-        <div class="grid">
-          <div class="col-12 lg:col-6">
-            <div class="field text-200">
-              <label for="name">Nama</label>
+        <div class="col-12 lg:col-6">
+          <div class="field">
+            <!-- <label for="nokp">No Kad Pengenalan</label> -->
+            <select
+              class="p-0 mb-2 form-select"
+              style="width: 190px; border: none"
+            >
+              <option selected value="nokp">No Kad Pengenalan</option>
+              <option value="passpor">No Passport</option>
+            </select>
+            <InputText
+              id="nokp"
+              type="text"
+              v-model="form.nokp"
+              class="
+                text-base text-color
+                surface-overlay
+                p-2
+                border-1 border-solid
+                surface-border
+                border-round
+                appearance-none
+                outline-none
+                focus:border-primary
+                w-full
+              "
+            ></InputText>
+            <InlineMessage class="mt-1" v-if="v$.form.nokp.$error"
+              >No KP diperlukan</InlineMessage
+            >
+          </div>
+        </div>
+        <div class="col-12 lg:col-6">
+          <div class="field text-200">
+            <label for="notelbimbit">No Telefon</label>
+            <!-- <InputText
+              id="notelbimbit"
+              type="text"
+              v-model="form.notelbimbit"
+              class="
+                text-base text-color
+                surface-overlay
+                p-2
+                border-1 border-solid
+                surface-border
+                border-round
+                appearance-none
+                outline-none
+                focus:border-primary
+                w-full
+              "
+            ></InputText> -->
+            <MazPhoneNumberInput
+              v-model="form.notelbimbit"
+              show-code-on-list
+              :preferred-countries="['MY']"
+              :translations="{
+                countrySelector: {
+                  placeholder: 'Pilih Negara',
+                  error: 'Choose country',
+                },
+                phoneInput: {
+                  placeholder: 'Nombor Telefon',
+                },
+              }"
+              :no-example="true"
+              @update="results = $event"
+            />
+            <InlineMessage class="mt-1" v-if="v$.form.notelbimbit.$error"
+              >No telefon diperlukan</InlineMessage
+            >
+          </div>
+        </div>
+        <div class="col-12 lg:col-6">
+          <div class="field text-200">
+            <label for="email">Emel</label>
+            <InputText
+              id="email"
+              type="text"
+              v-model="form.email"
+              class="
+                text-base text-color
+                surface-overlay
+                p-2
+                border-1 border-solid
+                surface-border
+                border-round
+                appearance-none
+                outline-none
+                focus:border-primary
+                w-full
+                h-match-phone-number
+              "
+            ></InputText>
+            <InlineMessage class="mt-1" v-if="v$.form.email.$error"
+              >Sila isi emel yang sah</InlineMessage
+            >
+          </div>
+        </div>
+        <div class="col-12 lg:col-6">
+          <div class="field text-200">
+            <p class="mb-0" for="username">Username</p>
+            <InputText
+              id="username"
+              type="text"
+              v-model="form.username"
+              class="
+                text-base text-color
+                surface-overlay
+                p-2
+                border-1 border-solid
+                surface-border
+                border-round
+                appearance-none
+                outline-none
+                focus:border-primary
+                w-full
+                h-match-password
+              "
+            ></InputText>
+            <InlineMessage class="mt-1" v-if="v$.form.username.$error"
+              >Username diperlukan</InlineMessage
+            >
+          </div>
+        </div>
+        <div class="col-12 lg:col-6">
+          <div class="field text-200">
+            <p class="mb-0">Kata Laluan</p>
+            <div class="p-input-icon-right">
+              <i class="pi pi-user" />
               <InputText
-                id="name"
-                type="text"
-                v-model="form.name"
+                id="password"
+                type="password"
+                v-model="form.password"
                 class="
                   text-base text-color
                   surface-overlay
@@ -53,248 +186,99 @@
                   w-full
                 "
               ></InputText>
-              <InlineMessage class="mt-1" v-if="v$.form.name.$error"
-                >Nama diperlukan</InlineMessage
-              >
-            </div>
-          </div>
-          <div class="col-12 lg:col-6">
-            <div class="field text-200">
-              <label for="nokp">No Kad Pengenalan</label>
-              <!-- <select
-                class="p-0 mb-2 form-select"
-                style="width: 190px; border: none"
-              >
-                <option selected value="nokp">No Kad Pengenalan</option>
-                <option value="passpor">No Passport</option>
-              </select> -->
-              <InputText
-                id="nokp"
-                type="text"
-                v-model="form.nokp"
+              <!-- <Password
+                v-model="form.password"
+                toggleMask
+                :feedback="false"
                 class="
                   text-base text-color
-                  surface-overlay
-                  p-2
-                  border-1 border-solid
-                  surface-border
+                  surface-overlay surface-border
                   border-round
                   appearance-none
                   outline-none
                   focus:border-primary
                   w-full
                 "
-              ></InputText>
-              <InlineMessage class="mt-1" v-if="v$.form.nokp.$error"
-                >Semak No KP</InlineMessage
-              >
+              /> -->
             </div>
+            <InlineMessage class="mt-1" v-if="v$.form.password.$error"
+              >Kata laluan diperlukan & mestilah 8 huruf</InlineMessage
+            >
           </div>
-          <div class="col-12">
-            <div class="field text-200">
-              <label for="alamat">Alamat</label>
-              <Textarea
-                id="alamat"
-                v-model="form.alamat"
-                class="
-                  text-base text-color
-                  surface-overlay
-                  p-2
-                  border-1 border-solid
-                  surface-border
-                  border-round
-                  appearance-none
-                  outline-none
-                  focus:border-primary
-                  w-full
-                "
-              ></Textarea>
-              <InlineMessage class="mt-1" v-if="v$.form.alamat.$error"
-                >Alamat diperlukan</InlineMessage
-              >
-            </div>
+        </div>
+        <!-- <div class="col-12 lg:col-6">
+          <div class="field">
+            <label for="confirmpassword">Tetapkan Kata Laluan</label>
+            <InputText
+              id="confirmpassword"
+              type="text"
+              v-model="form.password_confirmation"
+              disabled
+              class="
+                text-base text-color
+                surface-overlay
+                p-2
+                border-1 border-solid
+                surface-border
+                border-round
+                appearance-none
+                outline-none
+                focus:border-primary
+                w-full
+              "
+            ></InputText>
+            <InlineMessage class="mt-1"
+              >Tetapkan kata laluan diperlukan</InlineMessage
+            >
           </div>
-          <div class="col-12 lg:col-6">
-            <div class="field text-200">
-              <label for="notelbimbit">No Telefon</label>
-              <MazPhoneNumberInput
-                v-model="form.notelbimbit"
-                show-code-on-list
-                :fetch-country="true"
-                :preferred-countries="['MY']"
-                :translations="{
-                  countrySelector: {
-                    placeholder: 'Pilih Negara',
-                    error: 'Choose country',
-                  },
-                  phoneInput: {
-                    placeholder: 'Nombor Telefon',
-                  },
-                }"
-                :no-example="true"
-                @update="results = $event"
-              />
-              <InlineMessage class="mt-1" v-if="v$.form.notelbimbit.$error"
-                >No telefon diperlukan</InlineMessage
-              >
-            </div>
-          </div>
-          <div class="col-12 lg:col-6">
-            <div class="field text-200">
-              <label for="email">Emel</label>
-              <InputText
-                id="email"
-                type="text"
-                v-model="form.email"
-                class="
-                  text-base text-color
-                  surface-overlay
-                  p-2
-                  border-1 border-solid
-                  surface-border
-                  border-round
-                  appearance-none
-                  outline-none
-                  focus:border-primary
-                  w-full
-                  h-match-phone-number
-                "
-              ></InputText>
-              <InlineMessage class="mt-1" v-if="v$.form.email.$error"
-                >Sila isi emel yang sah</InlineMessage
-              >
-            </div>
-          </div>
-          <div class="col-12 lg:col-6">
-            <div class="field text-200">
-              <p class="mb-0" for="username">Username</p>
-              <InputText
-                id="username"
-                type="text"
-                v-model="form.username"
-                class="
-                  text-base text-color
-                  surface-overlay
-                  p-2
-                  border-1 border-solid
-                  surface-border
-                  border-round
-                  appearance-none
-                  outline-none
-                  focus:border-primary
-                  w-full
-                  h-match-password
-                "
-              ></InputText>
-              <InlineMessage class="mt-1" v-if="v$.form.username.$error"
-                >Username diperlukan</InlineMessage
-              >
-            </div>
-          </div>
-          <div class="col-12 lg:col-6">
-            <div class="field text-200">
-              <p class="mb-0">Kata Laluan</p>
-              <div class="p-input-icon-right">
-                <i class="pi pi-user" />
-                <Password
-                  v-model="form.password"
-                  toggleMask
-                  :feedback="false"
-                  class="
-                    text-base text-color
-                    surface-overlay surface-border
-                    border-round
-                    appearance-none
-                    outline-none
-                    focus:border-primary
-                    w-full
-                  "
-                />
-              </div>
-              <InlineMessage class="mt-1" v-if="v$.form.password.$error"
-                >Kata laluan diperlukan & mestilah 8 huruf</InlineMessage
-              >
-            </div>
-          </div>
-          <!-- <div class="col-12">
-            <div class="field">
-              <label for="frontic">Kad Pengenalan Hadapan</label>
-              <input
-                class="form-control"
-                type="file"
-                id="formFile"
-                ref="formFileRef"
-                @change="readImage()"
-              />
-              <InlineMessage class="mt-1" v-if="v$.form.images.file1.$error"
+        </div> -->
+        <div class="col-12">
+          <div class="field text-200">
+            <label for="frontic">Kad Pengenalan Hadapan</label>
+            <!-- <FileUpload
+              name="demo[]"
+              url="./upload"
+              :maxFileSize="1500000"
+              :fileLimit="1"
+              :multiple="false"
+              :showUploadButton="false"
+              :showCancelButton="false"
+              v-model="form.images.file1"
+            /> -->
+            <input
+              class="form-control"
+              type="file"
+              id="formFile"
+              ref="formFileRef"
+              @change="readImage()"
+            />
+            <!-- <InlineMessage class="mt-1" v-if="v$.form.images.file1.$error"
               >Kad pengenalan hadapan diperlukan</InlineMessage
             >
             </div>
           </div>
-          <div class="col-12">
-            <div class="field">
-              <label for="backic">Kad Pengenalan Belakang</label>
-              <input class="form-control" type="file" />
-              <InlineMessage class="mt-1" v-if="v$.form.images.file2.$error"
+        </div>
+        <div class="col-12">
+          <div class="field text-200">
+            <label for="backic">Kad Pengenalan Belakang</label>
+            <input class="form-control" type="file" />
+            <!-- <InlineMessage class="mt-1" v-if="v$.form.images.file2.$error"
               >Kad pengenalan belakang diperlukan</InlineMessage
-            >
-            </div>
-          </div> -->
-          <div class="col-12">
-            <div class="mt-3 mb-1">
-              <label>
-                <input type="checkbox" v-model="form.register_agree" />
-                Setuju Dengan <terms-and-conditions></terms-and-conditions>
-              </label>
-            </div>
-            <InlineMessage v-if="v$.form.register_agree.$error"
-              >Anda mestilah bersetuju dengan terma & syarat.</InlineMessage
-            >
+            > -->
           </div>
-          <div class="col-12 text-center">
-            <Button
-              class="p-button-sm p-button-outlined m-1"
-              icon="pi pi-times"
-              iconPos="right"
-              label="Batal Pendaftaran"
-              @click="toLogin()"
-            />
-            <Button
-              class="p-button-sm m-1"
-              label="Teruskan"
-              icon="pi pi-sign-in"
-              iconPos="right"
-              @click="openModalTNC()"
-            />
+        </div>
+        <div class="col-12">
+          <div class="mt-3 mb-1 text-500">
+            <label>
+              <input type="checkbox" v-model="form.register_agree" />
+              Setuju Dengan <terms-and-conditions></terms-and-conditions>
+            </label>
           </div>
-          <div class="col-12 text-center">
-            <span class="text-200 font-medium line-height-3"
-            >Sudah punyai akaun?
-            </span>
-            <router-link
-            v-bind:to="{ name: 'login' }"
-            class="font-medium no-underline ml-2 text-teal-600 cursor-pointer"
-            >Log masuk sekarang!</router-link>
-          </div>      
+          <InlineMessage v-if="v$.form.register_agree.$error"
+            >Anda mestilah bersetuju dengan terma & syarat.</InlineMessage
+          >
         </div>
-      </div>
-      <Dialog
-        header="Terma & Syarat"
-        v-model:visible="isDisplayTNC"
-        :style="{ width: '80vw' }"
-        :modal="true"
-      >
-        <div>
-          <terms-and-conditions-details></terms-and-conditions-details>
-        </div>
-        <template #footer>
-          <Button
-            label="Batal Pendaftaran"
-            icon="pi pi-times"
-            iconPos="right"
-            @click="closeModalTNC()"
-            class="p-button-text"
-          />
+        <div class="col-12 text-center">
           <Button
             class="p-button-sm"
             label="Daftar Sekarang"
@@ -464,15 +448,10 @@ export default {
 </script>
 
 <style scoped>
-.main-container {
-  background: url("/src/assets/background-lelong.png");
-  background-position: center;
-  background-size: cover;
-}
 
 .logo-img {
-  width: 300px;
-  height: 55px;
+  width: 70px;
+  height: 60px;
 }
 
 .h-match-phone-number {
diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
index a7b1dbf..bcdf8d1 100644
--- a/src/components/layouts/TheHeader.vue
+++ b/src/components/layouts/TheHeader.vue
@@ -5,9 +5,8 @@
     <div class="flex justify-content-between px-3 md:px-6 h-3rem flex-wrap main-color">
       <div class="flex align-items-center justify-content-center">
         <div class="company-title" type="button" v-on:click="toHome()">
-          <!-- <div class="logo-title">E-Rahn Lelong</div> -->
-          <!-- <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" /> -->
-          <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" type="button" v-on:click="toHome()"/>
+          <img class="logo-img mr-2" src="img/erahn-logo.png" alt="arrahn-logo" />
+          <div class="logo-title">E-Rahn Lelong</div>  
         </div>
       </div>
       <div class="flex align-items-center justify-content-center">
@@ -444,7 +443,6 @@ router-link:hover {
   justify-content: space-between;
   align-items: center;
   background-color: #eeeeee;
-
   height: 3.2rem;
   padding: 0 6.4rem;
 }
@@ -458,15 +456,19 @@ router-link:hover {
   display: flex;
   justify-content: center;
   align-items: center;
-  color: #eaf0f9;
+  color: #212223;
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .logo-img {
   height: 1.6rem;
 }
 
+/* .main-nav {
+  background-color: #cb3d3d;
+} */
+
 .main-nav-list {
   list-style: none;
   display: flex;