pull from remote-aros

src/components/authentication/TheLogin.vue

@@ -1,38 +1,37 @@
 <template>
   <Toast :breakpoints="{ '767px': { width: '100%', right: '0', left: '0' } }" />
   <div
-    class="
+    class="flex main-container min-h-screen align-items-center justify-content-center"
-      flex
-      main-container
-      min-h-screen
-      align-items-center
-      justify-content-center
-
-    "
   >
     <div
-      class="
+      class="surface-card fadein p-4 shadow-8 border-round w-11 md:w-10 lg:w-8 xl:w-7"
-        surface-card
-        fadein
-        p-4
-        shadow-8
-        border-round
-        w-11
-        md:w-10
-        lg:w-8
-        xl:w-7
-        content-bg
-      "
     >
+      <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="text-center mb-5">
         <img class="logo-img" src="img/e-rahn-lelong.png" alt="erahn-logo" />
-          <div class="text-200 text-3xl font-semibold mb-3 mt-2">Log Masuk</div>
+        <div class="text-200 text-3xl font-semibold mb-3 mt-2">Log Masuk</div>
-            <span class="text-dark-300 font-medium line-height-3">Belum punyai akaun?</span>
+        <span class="text-200 font-medium line-height-3"
-              <router-link
+          >Belum punyai akaun?</span
-              v-bind:to="{ name: 'register' }"
+        >
-              class="font-medium no-underline ml-2 text-white cursor-pointer"
+        <router-link
-              >Daftar sekarang!
+          v-bind:to="{ name: 'register' }"
-              </router-link>
+          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">
@@ -42,10 +41,18 @@
             <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="Username" required></InputText>
+                <InputText
+                  class="mb-2"
+                  v-model="form.username"
+                  type="text"
+                  placeholder="Username"
+                  required
+                ></InputText>
               </span>
             </div>
-            <InlineMessage class="flex-auto" v-if="v$.form.username.$error">Username diperlukan</InlineMessage>
+            <InlineMessage class="flex-auto" v-if="v$.form.username.$error"
+              >Username diperlukan</InlineMessage
+            >
           </div>
           <div class="field grid">
             <!-- <label for="firstname3"
@@ -57,7 +64,9 @@
                 <Password class="mb-2" v-model="form.password" placeholder="Katalaluan" toggleMask :feedback="false" />
               </span>
             </div>
-            <InlineMessage class="flex-auto" v-if="v$.form.password.$error">Kata laluan diperlukan</InlineMessage>
+            <InlineMessage class="flex-auto" v-if="v$.form.password.$error"
+              >Kata laluan diperlukan</InlineMessage
+            >
           </div>
           <div class="">
             <Button @click="doLogin()" type="submit" class="p-button-sm" label="Log Masuk" icon="pi pi-sign-in"

src/components/authentication/TheRegister.vue

@@ -1,179 +1,37 @@
 <template>
   <Toast :breakpoints="{ '767px': { width: '100%', right: '0', left: '0' } }" />
-  <div class="flex main-container min-h-screen align-items-center justify-content-center m-5">
+  <div class="main-container">
-    <div class= "surface-card fadein p-4 shadow-2 border-round w-11 md:w-10 lg:w-10 xl:w-8">
+    <div
-      <div class="text-center mb-5">
+      class="flex min-h-screen align-items-center justify-content-center p-5"
-        <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
-        <span class="text-800 font-medium line-height-3">Sudah punyai akaun?</span>
+        class="
-        <router-link
+          surface-card
-          v-bind:to="{ name: 'login' }"
+          fadein
-          class="font-medium no-underline ml-2 text-gray-700 cursor-pointer"
+          p-4
-          >Log masuk sekarang!
+          shadow-2
-        </router-link>
+          border-round
-      </div>
+          w-11
-      <!-- <h5 class="text-200">Daftar Akaun</h5> -->
+          md:w-10
-      <div class="grid">
+          lg:w-10
-        <div class="col-12 lg:col-6">
+          xl:w-8
-          <div class="field text-200">
+        "
-            <label for="name">Nama</label>
+      >
-            <InputText
+        <div class="text-center mb-3">
-              id="name"
+          <div class="text-900 text-3xl font-semibold mb-3">            
-              type="text"
+            <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
-              v-model="form.name"
+            <div class="text-200 text-3xl font-semibold mb-3 mt-3">Daftar Akaun</div>
-              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>
         </div>
-        <div class="col-12 lg:col-6">
+        <!-- <h5>Daftar Akaun</h5> -->
-          <div class="field text-200">
+        <div class="grid">
-            <label for="nokp">No Kad Pengenalan</label>
+          <div class="col-12 lg:col-6">
-            <!-- <select
+            <div class="field text-200">
-              class="p-0 mb-2 form-select"
+              <label for="name">Nama</label>
-              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="password"
+                id="name"
-                type="password"
+                type="text"
-                v-model="form.password"
+                v-model="form.name"
                 class="
                   text-base text-color
                   surface-overlay
@@ -187,98 +45,241 @@
                   w-full
                 "
               ></InputText>
-              <!-- <Password
+              <InlineMessage class="mt-1" v-if="v$.form.name.$error"
-                v-model="form.password"
+                >Nama diperlukan</InlineMessage
-                toggleMask
+              >
-                :feedback="false"
+            </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"
                 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"
+                >Semak No KP</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">
-        <!-- <div class="col-12 lg:col-6">
+            <div class="field text-200">
-          <div class="field">
+              <label for="alamat">Alamat</label>
-            <label for="confirmpassword">Tetapkan Kata Laluan</label>
+              <Textarea
-            <InputText
+                id="alamat"
-              id="confirmpassword"
+                v-model="form.alamat"
-              type="text"
+                class="
-              v-model="form.password_confirmation"
+                  text-base text-color
-              disabled
+                  surface-overlay
-              class="
+                  p-2
-                text-base text-color
+                  border-1 border-solid
-                surface-overlay
+                  surface-border
-                p-2
+                  border-round
-                border-1 border-solid
+                  appearance-none
-                surface-border
+                  outline-none
-                border-round
+                  focus:border-primary
-                appearance-none
+                  w-full
-                outline-none
+                "
-                focus:border-primary
+              ></Textarea>
-                w-full
+              <InlineMessage class="mt-1" v-if="v$.form.alamat.$error"
-              "
+                >Alamat diperlukan</InlineMessage
-            ></InputText>
+              >
-            <InlineMessage class="mt-1"
+            </div>
-              >Tetapkan kata laluan diperlukan</InlineMessage
-            >
           </div>
-        </div> -->
+          <div class="col-12 lg:col-6">
-        <!-- <div class="col-12">
+            <div class="field text-200">
-          <div class="field text-200">
+              <label for="notelbimbit">No Telefon</label>
-            <label for="frontic">Kad Pengenalan Hadapan</label> -->
+              <MazPhoneNumberInput
-            <!-- <FileUpload
+                v-model="form.notelbimbit"
-              name="demo[]"
+                show-code-on-list
-              url="./upload"
+                :fetch-country="true"
-              :maxFileSize="1500000"
+                :preferred-countries="['MY']"
-              :fileLimit="1"
+                :translations="{
-              :multiple="false"
+                  countrySelector: {
-              :showUploadButton="false"
+                    placeholder: 'Pilih Negara',
-              :showCancelButton="false"
+                    error: 'Choose country',
-              v-model="form.images.file1"
+                  },
-            /> -->
+                  phoneInput: {
-            <!-- <input
+                    placeholder: 'Nombor Telefon',
-              class="form-control"
+                  },
-              type="file"
+                }"
-              id="formFile"
+                :no-example="true"
-              ref="formFileRef"
+                @update="results = $event"
-              @change="readImage()"
+              />
-            /> -->
+              <InlineMessage class="mt-1" v-if="v$.form.notelbimbit.$error"
-            <!-- <InlineMessage class="mt-1" v-if="v$.form.images.file1.$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"
               >Kad pengenalan hadapan diperlukan</InlineMessage
-            > -->
+            >
-          <!-- </div>
+            </div>
-        </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 text-800">
-            <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"
+          <div class="col-12">
-            >Anda mestilah bersetuju dengan terma & syarat.</InlineMessage
+            <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 class="col-12 text-center">
+            <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>
-        <div class="col-12 text-center">
+      </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"
+          />
           <Button
             class="p-button-sm"
             label="Daftar Sekarang"
@@ -289,6 +290,8 @@
           ></Button>
         </template>
       </Dialog>
+        </template>
+      </Dialog>
     </div>
   </div>
 </template>
@@ -298,19 +301,22 @@ import axios from "axios";
 import useVuelidate from "@vuelidate/core";
 import { required, email, minLength, maxLength } from "@vuelidate/validators";
 import TermsAndConditionsDetails from "./TermsAndConditionsDetails.vue";
-import { useAuthenticationUserStore } from "@/store/modules/authentication"
 
 export default {
   name: "Register",
   components: {
     "terms-and-conditions-details": TermsAndConditionsDetails,
   },
+  components: {
+    "terms-and-conditions-details": TermsAndConditionsDetails,
+  },
   data() {
     return {
       v$: useVuelidate(),
       alertMessages: Array,
       isLoading: false,
       isDisplayTNC: false,
+      isDisplayTNC: false,
       form: {
         name: "",
         username: "",
@@ -320,6 +326,7 @@ export default {
         notelbimbit: "",
         register_agree: null,
         alamat: "",
+        alamat: "",
         // password_confirmation: "",
         images: {
           file1: {
@@ -350,6 +357,7 @@ export default {
         axios
           .post("/register", this.form)
           .then((response) => {
+            // console.log("doRegister", response);
             // console.log("doRegister", response);
             if (response.data.success == true) {
               localStorage.setItem("token", response.data.token);
@@ -376,6 +384,7 @@ export default {
             } else if (response.data.success == false) {
               this.isLoading = false;
               this.isDisplayTNC = false;
+              this.isDisplayTNC = false;
               this.alertMessages = response.data.message;
               Object.values(this.alertMessages).forEach((val) =>
                 this.$toast.add({
@@ -392,6 +401,14 @@ export default {
                 summary: "Failed to register!",
                 detail: response.data.message,
               });
+            } else if (response.data.success == "Staff") {
+              this.isLoading = false;
+              this.isDisplayTNC = false;
+              this.$toast.add({
+                severity: "warn",
+                summary: "Failed to register!",
+                detail: response.data.message,
+              });
             } else {
               this.isLoading = false;
               alert(response);
@@ -414,25 +431,21 @@ export default {
     closeModalTNC() {
       this.isDisplayTNC = false;
     },
-    toLogin() {
+    readImage() {},
-      this.$router.push({ name: "login" });
-    },
   },
   validations() {
     return {
       form: {
         name: { required },
         username: { required },
-        nokp: {
+        nokp: { required, minLengthValue: minLength(12), maxLengthValue: maxLength(12) },
-          required,
-          minLengthValue: minLength(12),
-          maxLengthValue: maxLength(12),
-        },
         password: { required, minLengthValue: minLength(8) },
         email: { required, email },
         notelbimbit: { required, minLengthValue: minLength(8) },
+        notelbimbit: { required, minLengthValue: minLength(8) },
         register_agree: { required },
         alamat: { required },
+        alamat: { required },
         // images: {
         //   file1: {
         //     filename: { required },
@@ -448,23 +461,14 @@ export default {
 </script>
 
 <style scoped>
-
 .main-container {
-  /* background: linear-gradient(
+  background: url("/src/assets/background-lelong.png");
-    135deg,
-    rgba(139, 198, 236, 0.3) 0%,
-    #9599e2 100%
-  ),
-  url("/src/assets/background_arrahn.jpg"); */
-  background-image: url("/src/assets/background-lelong.png");
-  /* background-color: #fec234; */
   background-position: center;
   background-size: cover;
 }
 
-
 .logo-img {
-  width: 250px;
+  width: 320px;
   height: 60px;
 }
 

src/components/policy/ThePolicy.vue

@@ -3,7 +3,7 @@
     <div class="col-12 lg:col-11 fadein animation-duration-400">
       <Card>
         <template #title>
-          <div class="font-normal">Panduan</div>
+          <div class="font-normal">Polisi</div>
         </template>
         <template #content>
           <TabView>
@@ -71,7 +71,8 @@
         </template>
       </Card>
     </div>
-    <ScrollTop :threshold="200" />
+  <ScrollTop :threshold="200"/>
+
   </the-template>
 </template>
 
@@ -82,11 +83,6 @@ export default {
   components: {
     "terms-and-conditions-details": TermsAndConditionsDetails,
   },
-  data() {
-    return {
-      theUrl: "https://www.youtube.com/watch?v=lucYE9bM_PY&t=53s",
-    };
-  },
 };
 </script>