KoPKB/lelong-web-pembida
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update changes

Browse Source
This commit is contained in:
Afrina Alimi
2022-12-13 15:50:15 +08:00
committed by faiqahzaman
parent cac5eca16d
commit 0491c8f5f9
3 changed files with 306 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/authentication/TheLogin.vue
+52 -37
View File
@@ -1,24 +1,43 @@
<template> <template>
<Toast :breakpoints="{ '767px': { width: '100%', right: '0', left: '0' } }" /> <Toast :breakpoints="{ '767px': { width: '100%', right: '0', left: '0' } }" />
<div class="flex main-container min-h-screen align-items-center justify-content-center"> <div
<div class="surface-card fadein p-4 shadow-8 border-round w-11 md:w-10 lg:w-8 xl:w-7"> class="
<div> flex
<div class="row"> main-container
<div class="col-md-2 d-flex flex-column justify-content-center align-items-left" style="margin-right: -85px"> min-h-screen
<img class="logo-img1" src="img/e-Rahn_Logo_FA-01.png" alt="erahn-logo" /> align-items-center
</div> justify-content-center
<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="
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"> <div class="text-center mb-5">
<img class="logo-img3" src="img/e-rahn-lelong.png" alt="erahn-logo" /> <img class="logo-img" src="img/erahn-logo.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">
<span class="text-200 font-medium line-height-3">Belum punyai akaun?</span> E-Rahn Lelong
<router-link v-bind:to="{ name: 'register' }"
class="font-medium no-underline ml-2 text-white cursor-pointer">Daftar sekarang! </div>
</router-link> <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> </div>
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<div class="px-0 text-center md:px-8"> <div class="px-0 text-center md:px-8">
@@ -28,8 +47,14 @@
<div class="col"> <div class="col">
<span class="p-input-icon-right"> <span class="p-input-icon-right">
<i class="pi pi-user" /> <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> </span>
</div> </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>
@@ -194,6 +219,8 @@ export default {
url("/src/assets/background_arrahn.jpg"); */ url("/src/assets/background_arrahn.jpg"); */
background-image: url("/src/assets/background-lelong.png"); background-image: url("/src/assets/background-lelong.png");
background-color: #fec234; background-color: #fec234;
background-image: url("/src/assets/background-lelong.png");
background-color: #fec234;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
} }
@@ -207,26 +234,14 @@ export default {
} }
.logo-img { .logo-img {
color: white; width: 70px;
width: 180px;
height: 150px;
}
.logo-img1 {
width: 50px;
height: 50px;
}
.logo-img2 {
width: 50px;
height: 60px; height: 60px;
} }
.logo-img3 { /* .border-round{
width: 150px; border-radius:50px;
height: 30px; } */
}
/* .border-round{ /* .border-round{
border-radius:50px; border-radius:50px;
} */ } */
src/components/authentication/TheRegister.vue
+86 -107
View File
@@ -1,37 +1,18 @@
<template> <template>
<Toast :breakpoints="{ '767px': { width: '100%', right: '0', left: '0' } }" /> <Toast :breakpoints="{ '767px': { width: '100%', right: '0', left: '0' } }" />
<div class="main-container"> <div class="flex main-container min-h-screen align-items-center justify-content-center m-5">
<div <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">
> <img class="logo-img" src="img/erahn-logo.png" alt="arrahn-logo" />
<div <div class="text-200 text-3xl font-semibold mb-3">E-Rahn Lelong</div>
class=" <span class="text-600 font-medium line-height-3">Sudah punyai akaun?</span>
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>
<!-- <span class="text-600 font-medium line-height-3"
>Sudah punyai akaun?</span
>
<router-link <router-link
v-bind:to="{ name: 'login' }" v-bind:to="{ name: 'login' }"
class="font-medium no-underline ml-2 text-blue-500 cursor-pointer" class="font-medium no-underline ml-2 text-blue-500 cursor-pointer"
>Log masuk sekarang!</router-link >Log masuk sekarang!
> --> </router-link>
</div> </div>
<!-- <h5>Daftar Akaun</h5> --> <h5 class="text-200">Daftar Akaun</h5>
<div class="grid"> <div class="grid">
<div class="col-12 lg:col-6"> <div class="col-12 lg:col-6">
<div class="field text-200"> <div class="field text-200">
@@ -59,15 +40,15 @@
</div> </div>
</div> </div>
<div class="col-12 lg:col-6"> <div class="col-12 lg:col-6">
<div class="field text-200"> <div class="field">
<label for="nokp">No Kad Pengenalan</label> <!-- <label for="nokp">No Kad Pengenalan</label> -->
<!-- <select <select
class="p-0 mb-2 form-select" class="p-0 mb-2 form-select"
style="width: 190px; border: none" style="width: 190px; border: none"
> >
<option selected value="nokp">No Kad Pengenalan</option> <option selected value="nokp">No Kad Pengenalan</option>
<option value="passpor">No Passport</option> <option value="passpor">No Passport</option>
</select> --> </select>
<InputText <InputText
id="nokp" id="nokp"
type="text" type="text"
@@ -86,16 +67,17 @@
" "
></InputText> ></InputText>
<InlineMessage class="mt-1" v-if="v$.form.nokp.$error" <InlineMessage class="mt-1" v-if="v$.form.nokp.$error"
>Semak No KP</InlineMessage >No KP diperlukan</InlineMessage
> >
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12 lg:col-6">
<div class="field text-200"> <div class="field text-200">
<label for="alamat">Alamat</label> <label for="notelbimbit">No Telefon</label>
<Textarea <!-- <InputText
id="alamat" id="notelbimbit"
v-model="form.alamat" type="text"
v-model="form.notelbimbit"
class=" class="
text-base text-color text-base text-color
surface-overlay surface-overlay
@@ -108,19 +90,10 @@
focus:border-primary focus:border-primary
w-full w-full
" "
></Textarea> ></InputText> -->
<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 text-200">
<label for="notelbimbit">No Telefon</label>
<MazPhoneNumberInput <MazPhoneNumberInput
v-model="form.notelbimbit" v-model="form.notelbimbit"
show-code-on-list show-code-on-list
:fetch-country="true"
:preferred-countries="['MY']" :preferred-countries="['MY']"
:translations="{ :translations="{
countrySelector: { countrySelector: {
@@ -196,7 +169,24 @@
<p class="mb-0">Kata Laluan</p> <p class="mb-0">Kata Laluan</p>
<div class="p-input-icon-right"> <div class="p-input-icon-right">
<i class="pi pi-user" /> <i class="pi pi-user" />
<Password <InputText
id="password"
type="password"
v-model="form.password"
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>
<!-- <Password
v-model="form.password" v-model="form.password"
toggleMask toggleMask
:feedback="false" :feedback="false"
@@ -209,16 +199,52 @@
focus:border-primary focus:border-primary
w-full w-full
" "
/> /> -->
</div> </div>
<InlineMessage class="mt-1" v-if="v$.form.password.$error" <InlineMessage class="mt-1" v-if="v$.form.password.$error"
>Kata laluan diperlukan & mestilah 8 huruf</InlineMessage >Kata laluan diperlukan & mestilah 8 huruf</InlineMessage
> >
</div> </div>
</div> </div>
<!-- <div class="col-12"> <!-- <div class="col-12 lg:col-6">
<div class="field"> <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> -->
<div class="col-12">
<div class="field text-200">
<label for="frontic">Kad Pengenalan Hadapan</label> <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 <input
class="form-control" class="form-control"
type="file" type="file"
@@ -226,22 +252,23 @@
ref="formFileRef" ref="formFileRef"
@change="readImage()" @change="readImage()"
/> />
<InlineMessage class="mt-1" v-if="v$.form.images.file1.$error" <!-- <InlineMessage class="mt-1" v-if="v$.form.images.file1.$error"
>Kad pengenalan hadapan diperlukan</InlineMessage >Kad pengenalan hadapan diperlukan</InlineMessage
> >
</div> </div>
</div> </div>
</div>
<div class="col-12"> <div class="col-12">
<div class="field"> <div class="field text-200">
<label for="backic">Kad Pengenalan Belakang</label> <label for="backic">Kad Pengenalan Belakang</label>
<input class="form-control" type="file" /> <input class="form-control" type="file" />
<InlineMessage class="mt-1" v-if="v$.form.images.file2.$error" <!-- <InlineMessage class="mt-1" v-if="v$.form.images.file2.$error"
>Kad pengenalan belakang diperlukan</InlineMessage >Kad pengenalan belakang diperlukan</InlineMessage
> > -->
</div>
</div> </div>
</div> -->
<div class="col-12"> <div class="col-12">
<div class="mt-3 mb-1"> <div class="mt-3 mb-1 text-500">
<label> <label>
<input type="checkbox" v-model="form.register_agree" /> <input type="checkbox" v-model="form.register_agree" />
Setuju Dengan <terms-and-conditions></terms-and-conditions> Setuju Dengan <terms-and-conditions></terms-and-conditions>
@@ -252,49 +279,6 @@
> >
</div> </div>
<div class="col-12 text-center"> <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 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>
</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"
/>
<Button <Button
class="p-button-sm" class="p-button-sm"
label="Daftar Sekarang" label="Daftar Sekarang"
@@ -464,15 +448,10 @@ export default {
</script> </script>
<style scoped> <style scoped>
.main-container {
background: url("/src/assets/background-lelong.png");
background-position: center;
background-size: cover;
}
.logo-img { .logo-img {
width: 300px; width: 70px;
height: 55px; height: 60px;
} }
.h-match-phone-number { .h-match-phone-number {
src/components/layouts/TheHeader.vue
+8 -6
View File
@@ -5,9 +5,8 @@
<div class="flex justify-content-between px-3 md:px-6 h-3rem flex-wrap main-color"> <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="flex align-items-center justify-content-center">
<div class="company-title" type="button" v-on:click="toHome()"> <div class="company-title" type="button" v-on:click="toHome()">
<!-- <div class="logo-title">E-Rahn Lelong</div> --> <img class="logo-img mr-2" src="img/erahn-logo.png" alt="arrahn-logo" />
<!-- <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" /> --> <div class="logo-title">E-Rahn Lelong</div>
<img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" type="button" v-on:click="toHome()"/>
</div> </div>
</div> </div>
<div class="flex align-items-center justify-content-center"> <div class="flex align-items-center justify-content-center">
@@ -444,7 +443,6 @@ router-link:hover {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: #eeeeee; background-color: #eeeeee;
height: 3.2rem; height: 3.2rem;
padding: 0 6.4rem; padding: 0 6.4rem;
} }
@@ -458,15 +456,19 @@ router-link:hover {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #eaf0f9; color: #212223;
font-size: 1rem; font-size: 1rem;
font-weight: 700; font-weight: 500;
} }
.logo-img { .logo-img {
height: 1.6rem; height: 1.6rem;
} }
/* .main-nav {
background-color: #cb3d3d;
} */
.main-nav-list { .main-nav-list {
list-style: none; list-style: none;
display: flex; display: flex;