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>
<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;
} */
src/components/authentication/TheRegister.vue
+86 -107
View File
@@ -1,37 +1,18 @@
<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>
<!-- <span class="text-600 font-medium line-height-3"
>Sudah punyai akaun?</span
>
<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
> -->
>Log masuk sekarang!
</router-link>
</div>
<!-- <h5>Daftar Akaun</h5> -->
<h5 class="text-200">Daftar Akaun</h5>
<div class="grid">
<div class="col-12 lg:col-6">
<div class="field text-200">
@@ -59,15 +40,15 @@
</div>
</div>
<div class="col-12 lg:col-6">
<div class="field text-200">
<label for="nokp">No Kad Pengenalan</label>
<!-- <select
<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> -->
</select>
<InputText
id="nokp"
type="text"
@@ -86,16 +67,17 @@
"
></InputText>
<InlineMessage class="mt-1" v-if="v$.form.nokp.$error"
>Semak No KP</InlineMessage
>No KP diperlukan</InlineMessage
>
</div>
</div>
<div class="col-12">
<div class="col-12 lg:col-6">
<div class="field text-200">
<label for="alamat">Alamat</label>
<Textarea
id="alamat"
v-model="form.alamat"
<label for="notelbimbit">No Telefon</label>
<!-- <InputText
id="notelbimbit"
type="text"
v-model="form.notelbimbit"
class="
text-base text-color
surface-overlay
@@ -108,19 +90,10 @@
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 text-200">
<label for="notelbimbit">No Telefon</label>
></InputText> -->
<MazPhoneNumberInput
v-model="form.notelbimbit"
show-code-on-list
:fetch-country="true"
:preferred-countries="['MY']"
:translations="{
countrySelector: {
@@ -196,7 +169,24 @@
<p class="mb-0">Kata Laluan</p>
<div class="p-input-icon-right">
<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"
toggleMask
:feedback="false"
@@ -209,16 +199,52 @@
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="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> -->
<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"
@@ -226,22 +252,23 @@
ref="formFileRef"
@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
>
</div>
</div>
</div>
<div class="col-12">
<div class="field">
<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"
<!-- <InlineMessage class="mt-1" v-if="v$.form.images.file2.$error"
>Kad pengenalan belakang diperlukan</InlineMessage
>
> -->
</div>
</div>
</div> -->
<div class="col-12">
<div class="mt-3 mb-1">
<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>
@@ -252,49 +279,6 @@
>
</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 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
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 {
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 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;