From adea01fdc8843a831a0a3b0174473059c2be0326 Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Mon, 12 Dec 2022 11:17:11 +0800
Subject: [PATCH] Popup TNC when register, remove upload ic when register

---
 .../authentication/TermsAndConditions.vue     |  65 +-
 .../TermsAndConditionsDetails.vue             |  56 ++
 src/components/authentication/TheRegister.vue | 678 +++++++-----------
 3 files changed, 327 insertions(+), 472 deletions(-)
 create mode 100644 src/components/authentication/TermsAndConditionsDetails.vue

diff --git a/src/components/authentication/TermsAndConditions.vue b/src/components/authentication/TermsAndConditions.vue
index c2cfaa4..210c712 100644
--- a/src/components/authentication/TermsAndConditions.vue
+++ b/src/components/authentication/TermsAndConditions.vue
@@ -23,63 +23,7 @@
           ></button>
         </div>
         <div class="modal-body">
-          <div class="row">
-            <div class="col-12 lg:col-6 paragraph-align">
-              <p>
-                Para pembida yang dihargai, anda dinasihatkan untuk memahami
-                segala terma dan syarat bidaan sebelum membuat sebarang bidaan
-                secara atas talian.
-              </p>
-              <ol class="pr-3">
-                <li>Pendaftaran adalah secara atas talian.</li>
-                <li>
-                  Bidaan terbuka kepada semua warganegara berumur 18 tahun ke
-                  atas dan syarikat/koperasi yang berdaftar di Malaysia.
-                </li>
-                <li>
-                  Nilai bidaan hendaklah genap dan penggunaan nilaian sen adalah
-                  tidak dibenarkan.
-                </li>
-                <li>
-                  Waktu tamat bidaan adalah pada jam 12.30 petang (bergantung kepada
-                  perubahan dari masa ke semasa).
-                </li>
-                <li>
-                  Pembida berjaya hendaklah menyelesaikan keseluruhan amaun
-                  bidaan dan mengambil marhun pada/sebelum jam 4.00 petang.
-                </li>
-                <li>
-                  Setiap bidaan atas talian yang telah dihantar tidak boleh
-                  diubah. Sila pastikan nombor siri dan harga bidaan adalah
-                  betul. Pihak kami tidak akan bertanggungjawab di atas
-                  kesilapan pelanggan mengisi harga bidaan.
-                </li>
-              </ol>
-            </div>
-            <div class="col-12 lg:col-6 paragraph-align">
-              <ol class="pr-3" start="7">
-                <li>
-                  Kaedah pembayaran adalah melalui perbankan atas talian (Online
-                  Banking) sahaja.
-                </li>
-                <li>
-                  Sila serahkan bukti pembayaran semasa menuntut marhun bidaan
-                  (di kaunter atau melalui media elektronik sama ada emel atau
-                  Whatsapp).
-                </li>
-                <li>
-                  Pembida yang menang di dalam bidaan tetapi gagal melakukan
-                  pembayaran pada masa yang telah ditetapkan akan disenarai
-                  hitamkan.
-                </li>
-                <li>
-                  Semua Terma & Syarat diatas adalah tertakluk kepada pindaan
-                  dan boleh diubah dari masa ke semasa tanpa dimaklumkan kepada
-                  pembida.
-                </li>
-              </ol>
-            </div>
-          </div>
+          <terms-and-conditions-details></terms-and-conditions-details>
         </div>
         <div class="modal-footer">
           <Button
@@ -94,7 +38,12 @@
 </template>
 
 <script>
-export default {};
+import TermsAndConditionsDetails from './TermsAndConditionsDetails.vue'
+export default {
+  components: {
+    "terms-and-conditions-details": TermsAndConditionsDetails,
+  }
+};
 </script>
 
 <style scoped>
diff --git a/src/components/authentication/TermsAndConditionsDetails.vue b/src/components/authentication/TermsAndConditionsDetails.vue
new file mode 100644
index 0000000..7797950
--- /dev/null
+++ b/src/components/authentication/TermsAndConditionsDetails.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="row text-left">
+    <div class="col-12 lg:col-6 paragraph-align">
+      <p>
+        Para pembida yang dihargai, anda dinasihatkan untuk memahami segala
+        terma dan syarat bidaan sebelum membuat sebarang bidaan secara atas
+        talian.
+      </p>
+      <ol class="pr-3">
+        <li>Pendaftaran adalah secara atas talian.</li>
+        <li>
+          Bidaan terbuka kepada semua warganegara berumur 18 tahun ke atas dan
+          syarikat/koperasi yang berdaftar di Malaysia.
+        </li>
+        <li>
+          Nilai bidaan hendaklah genap dan penggunaan nilaian sen adalah tidak
+          dibenarkan.
+        </li>
+        <li>
+          Waktu tamat bidaan adalah pada jam 12.30 petang (bergantung kepada
+          perubahan dari masa ke semasa).
+        </li>
+        <li>
+          Pembida berjaya hendaklah menyelesaikan keseluruhan amaun bidaan dan
+          mengambil marhun pada/sebelum jam 4.00 petang.
+        </li>
+        <li>
+          Setiap bidaan atas talian yang telah dihantar tidak boleh diubah. Sila
+          pastikan nombor siri dan harga bidaan adalah betul. Pihak kami tidak
+          akan bertanggungjawab di atas kesilapan pelanggan mengisi harga
+          bidaan.
+        </li>
+      </ol>
+    </div>
+    <div class="col-12 lg:col-6 paragraph-align">
+      <ol class="pr-3" start="7">
+        <li>
+          Kaedah pembayaran adalah melalui perbankan atas talian (Online
+          Banking) sahaja.
+        </li>
+        <li>
+          Sila serahkan bukti pembayaran semasa menuntut marhun bidaan (di
+          kaunter atau melalui media elektronik sama ada emel atau Whatsapp).
+        </li>
+        <li>
+          Pembida yang menang di dalam bidaan tetapi gagal melakukan pembayaran
+          pada masa yang telah ditetapkan akan disenarai hitamkan.
+        </li>
+        <li>
+          Semua Terma & Syarat diatas adalah tertakluk kepada pindaan dan boleh
+          diubah dari masa ke semasa tanpa dimaklumkan kepada pembida.
+        </li>
+      </ol>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/authentication/TheRegister.vue b/src/components/authentication/TheRegister.vue
index 2ffc6bc..c09c0e1 100644
--- a/src/components/authentication/TheRegister.vue
+++ b/src/components/authentication/TheRegister.vue
@@ -1,228 +1,45 @@
 <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
-      "
+      class="flex min-h-screen align-items-center justify-content-center p-5"
     >
-      <div class="text-center mb-5">
-        <div class="text-900 text-3xl font-semibold mb-3">
-          ArrahnBid
-          <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
-        </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">
-            <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
+        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">
+          <div class="text-900 text-3xl font-semibold mb-3">
+            ArrahnBid
+            <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
           </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>
-        <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">
-          <div class="field">
-            <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="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
-              :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">
-            <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">
-            <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">
-            <p class="mb-0">Kata Laluan</p>
-            <div class="p-input-icon-right">
-              <i class="pi pi-user" />
-              <!-- <InputText
-                id="password"
+        <h5>Daftar Akaun</h5>
+        <div class="grid">
+          <div class="col-12 lg:col-6">
+            <div class="field">
+              <label for="name">Nama</label>
+              <InputText
+                id="name"
                 type="text"
-                v-model="form.password"
+                v-model="form.name"
                 class="
                   text-base text-color
                   surface-overlay
@@ -235,241 +52,264 @@
                   focus:border-primary
                   w-full
                 "
-              ></InputText> -->
-              <Password
-                v-model="form.password"
-                toggleMask
-                :feedback="false"
+              ></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">
+              <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 surface-border
+                  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>
-            <InlineMessage class="mt-1" v-if="v$.form.password.$error"
-              >Kata laluan diperlukan & mestilah 8 huruf</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 class="col-12">
+            <div class="field">
+              <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> -->
-        <div class="col-12">
-          <div class="field">
-            <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"
+          <div class="col-12 lg:col-6">
+            <div class="field">
+              <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">
+              <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">
+              <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">
+              <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"
               >Kad pengenalan hadapan diperlukan</InlineMessage
-            > -->
+            >
+            </div>
           </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 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"
               >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"
+              label="Teruskan"
+              icon="pi pi-sign-in"
+              iconPos="right"
+              @click="openModalTNC()"
+            />
           </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>
+      <Dialog
+        header="Terma & Syarat"
+        v-model:visible="isDisplayTNC"
+        :style="{ width: '80vw' }"
+        :modal="true"
+      >
+        <div>
+          <terms-and-conditions-details></terms-and-conditions-details>
         </div>
-        <div class="col-12 text-center">
+        <template #footer>
+          <Button
+            label="Batal Pendaftaran"
+            icon="pi pi-times"
+            iconPos="right"
+            @click="closeModalTNC()"
+            class="p-button-text"
+          />
           <Button
             class="p-button-sm"
-            label="Daftar"
+            label="Daftar Sekarang"
             :loading="isLoading"
             icon="pi pi-sign-in"
             iconPos="right"
             @click="doRegister()"
           ></Button>
-        </div>
-      </div>
+        </template>
+      </Dialog>
     </div>
   </div>
-  </div>
-  <!-- <div class="container-fluid p-2">
-    <div class="row justify-content-center p-5 rounded">
-      <h1 class="mb-5 text-primary">Sistem Lelong</h1>
-      <h4>Daftar Akaun</h4>
-      <form @submit.prevent="submit">
-        <div class="row">
-          <div class="col-6 mb-1">
-            <div class="form-floating">
-              <input type="text" class="form-control" v-model="form.name" />
-              <label>Nama</label>
-            </div>
-            <div style="font-size: 15px" class="fst-italic text-danger">
-              <div class="text-start">
-                *Minimum tambahan harga bida adalah RM1.
-              </div>
-            </div>
-          </div>
-          <div class="col-6 mb-1">
-            <div class="form-floating">
-              <input type="text" class="form-control" v-model="form.nokp" />
-              <label>No KP</label>
-            </div>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-6 mb-1">
-            <div class="form-floating">
-              <input
-                type="text"
-                class="form-control"
-                v-model="form.notelbimbit"
-              />
-              <label>No. Telefon</label>
-            </div>
-          </div>
-          <div class="col-6 mb-1">
-            <div class="form-floating">
-              <input type="email" class="form-control" v-model="form.email" />
-              <label>E-mel</label>
-            </div>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-6 mb-1">
-            <div class="form-floating">
-              <input
-                type="text"
-                class="form-control"
-                autocomplete="off"
-                v-model="form.username"
-              />
-              <label>Username</label>
-            </div>
-          </div>
-          <div class="col-6 mb-1">
-            <div class="form-floating"></div>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-6 mb-1">
-            <div class="form-floating">
-              <input
-                type="password"
-                class="form-control"
-                v-model="form.password"
-              />
-              <label>Password</label>
-            </div>
-          </div>
-          <div class="col-6 mb-1">
-            <div class="form-floating">
-              <input
-                type="password"
-                class="form-control"
-                v-model="form.password_confirmation"
-              />
-              <label>Password Confirmation</label>
-            </div>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-6 mb-1">
-            <label>Kad Pengenalan Hadapan</label>
-            <input type="file" class="form-control" />
-          </div>
-          <div class="col-6 mb-1">
-            <label>Kad Pengenalan Belakang</label>
-            <input type="file" class="form-control" />
-          </div>
-        </div>
-        <div class="row">
-          <div class="checkbox mt-3 mb-3">
-            <label>
-              <input type="checkbox" value="1" id="register_agree" /> Setuju
-              Dengan
-              <terms-and-conditions></terms-and-conditions>
-            </label>
-          </div>
-        </div>
-        <div class="row justify-content-center">
-          <div class="col-3">
-            <button
-              @click="doRegister"
-              class="w-100 mt-4 mb-5 btn btn-primary"
-              type="submit"
-            >
-              Daftar
-            </button>
-          </div>
-        </div>
-      </form>
-
-      <router-link to="/login">Log Masuk</router-link>
-    </div>
-  </div> -->
 </template>
 
 <script>
 import axios from "axios";
 import useVuelidate from "@vuelidate/core";
 import { required, email, minLength } from "@vuelidate/validators";
+import TermsAndConditionsDetails from "./TermsAndConditionsDetails.vue";
 
 export default {
   name: "Register",
+  components: {
+    "terms-and-conditions-details": TermsAndConditionsDetails,
+  },
   data() {
     return {
       v$: useVuelidate(),
       alertMessages: Array,
       isLoading: false,
+      isDisplayTNC: false,
       form: {
         name: "",
         username: "",
@@ -521,6 +361,7 @@ export default {
               this.isLoading = false;
             } else if (response.data.success == false) {
               this.isLoading = false;
+              this.isDisplayTNC = false;
               this.alertMessages = response.data.message;
               Object.values(this.alertMessages).forEach((val) =>
                 this.$toast.add({
@@ -542,6 +383,15 @@ export default {
           });
       }
     },
+    openModalTNC() {
+      this.v$.$validate();
+      if (!this.v$.$error) {
+        this.isDisplayTNC = true;
+      }
+    },
+    closeModalTNC() {
+      this.isDisplayTNC = false;
+    },
     readImage() {},
   },
   validations() {
@@ -549,10 +399,10 @@ export default {
       form: {
         name: { required },
         username: { required },
-        nokp: { required },
+        nokp: { required, minLengthValue: minLength(12) },
         password: { required, minLengthValue: minLength(8) },
         email: { required, email },
-        notelbimbit: { required },
+        notelbimbit: { required, minLengthValue: minLength(8) },
         register_agree: { required },
         alamat: { required },
         // images: {