fix login ui
This commit is contained in:
Amir
Binary file not shown.
|
After Width: | Height: | Size: 554 KiB |
@@ -1,232 +0,0 @@
|
||||
<template>
|
||||
<!-- <div class="row justify-content-md-center">
|
||||
<h1>Login</h1>
|
||||
<div class="col-6" style="border: 1px solid">
|
||||
<form @submit.prevent="submit">
|
||||
<div class="p-20">
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="username"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>Username</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.username"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
placeholder="name@flowbite.com"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="password"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>Password</label
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
v-model="form.password"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-start mb-6">
|
||||
<div class="flex items-center h-5">
|
||||
<input
|
||||
id="remember"
|
||||
aria-describedby="remember"
|
||||
type="checkbox"
|
||||
class="
|
||||
w-4
|
||||
h-4
|
||||
bg-gray-50
|
||||
rounded
|
||||
border border-gray-300
|
||||
focus:ring-3 focus:ring-blue-300
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:focus:ring-blue-600
|
||||
dark:ring-offset-gray-800
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label
|
||||
for="remember"
|
||||
class="font-medium text-gray-900 dark:text-gray-300"
|
||||
>Remember me</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click="doLogin"
|
||||
type="submit"
|
||||
class="
|
||||
text-white
|
||||
bg-blue-700
|
||||
hover:bg-blue-800
|
||||
focus:ring-4 focus:outline-none focus:ring-blue-300
|
||||
font-medium
|
||||
rounded-lg
|
||||
text-sm
|
||||
w-full
|
||||
sm:w-auto
|
||||
px-5
|
||||
py-2.5
|
||||
text-center
|
||||
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
|
||||
"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<router-link to="/register">Register</router-link><br />
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-5 text-center m-5 p-5 border rounded">
|
||||
<form @submit.prevent="submit">
|
||||
<h1 class="mb-5 text-primary">Sistem Lelong</h1>
|
||||
<h4>Log Masuk</h4>
|
||||
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="form.username"
|
||||
placeholder="username sini"
|
||||
required
|
||||
/>
|
||||
<label for="floatingInput">Username</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
v-model="form.password"
|
||||
placeholder="Password"
|
||||
required
|
||||
/>
|
||||
<label for="floatingPassword">Password</label>
|
||||
</div>
|
||||
<button
|
||||
@click="doLogin"
|
||||
class="w-100 mt-4 mb-5 btn btn-primary"
|
||||
type="submit"
|
||||
>
|
||||
Masuk
|
||||
</button>
|
||||
</form>
|
||||
<router-link to="/register">Daftar Akaun</router-link><br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useRouter } from "vue-router";
|
||||
import axios from "axios";
|
||||
export default {
|
||||
name: "Login",
|
||||
|
||||
// ========api composition style===============
|
||||
// setup() {
|
||||
|
||||
// const router = useRouter();
|
||||
|
||||
// const submit = async e => {
|
||||
// const form = new FormData(e.target);
|
||||
|
||||
// const inputs = Object.fromEntries(form.entries());
|
||||
|
||||
// const {data} = await axios.post('user/login', inputs, {
|
||||
// withCredentials: false
|
||||
// });
|
||||
|
||||
// axios.defaults.headers.common['Authorization'] = 'Bearer ${data.token}';
|
||||
|
||||
// console.log(data);
|
||||
// await router.push('/');
|
||||
// }
|
||||
|
||||
// return {
|
||||
// submit
|
||||
// }
|
||||
// }
|
||||
|
||||
//=========api option style===================
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
username: "",
|
||||
password: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doLogin() {
|
||||
axios.post("/user/login", this.form).then((response) => {
|
||||
localStorage.setItem("token", response.data.token);
|
||||
localStorage.setItem("id", response.data.user.id);
|
||||
localStorage.setItem("nokp", response.data.user.nokp);
|
||||
localStorage.setItem("name", response.data.user.name);
|
||||
localStorage.setItem("email", response.data.user.email);
|
||||
localStorage.setItem("notelbimbit", response.data.user.notelbimbit);
|
||||
this.$router.push({name: 'home'});
|
||||
console.log(response);
|
||||
})
|
||||
.catch((response) => {
|
||||
alert(response.message);
|
||||
console.log(response);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,397 +0,0 @@
|
||||
<template>
|
||||
<!-- <div class="row justify-content-md-center">
|
||||
<h1>Register</h1>
|
||||
<div class="col-6" style="border: 1px solid">
|
||||
<form @submit.prevent="submit">
|
||||
<div class="p-20">
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="name"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>Name</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.name"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
placeholder="Mustaqim Mustafar"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="username"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>Username</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.username"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="nokp"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>No KP</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.nokp"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="password"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>Password</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.password"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="email"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>Email</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.email"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="notelbimbit"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>Nombor Telefon</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.notelbimbit"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start mb-6">
|
||||
<div class="flex items-center h-5">
|
||||
<input
|
||||
id="register_agree"
|
||||
aria-describedby="register_agree"
|
||||
type="checkbox"
|
||||
value="1"
|
||||
v-model="form.register_agree"
|
||||
class="
|
||||
w-4
|
||||
h-4
|
||||
bg-gray-50
|
||||
rounded
|
||||
border border-gray-300
|
||||
focus:ring-3 focus:ring-blue-300
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:focus:ring-blue-600
|
||||
dark:ring-offset-gray-800
|
||||
"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label
|
||||
for="register_agree"
|
||||
required=""
|
||||
class="font-medium text-gray-900 dark:text-gray-300"
|
||||
>Setuju dgn terma & syarat</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click="doRegister"
|
||||
type="submit"
|
||||
class="
|
||||
text-white
|
||||
bg-blue-700
|
||||
hover:bg-blue-800
|
||||
focus:ring-4 focus:outline-none focus:ring-blue-300
|
||||
font-medium
|
||||
rounded-lg
|
||||
text-sm
|
||||
w-full
|
||||
sm:w-auto
|
||||
px-5
|
||||
py-2.5
|
||||
text-center
|
||||
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
|
||||
"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<router-link to="/login">Login</router-link><br />
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-5 text-center m-5 p-5 border rounded">
|
||||
<form @submit.prevent="submit">
|
||||
<h1 class="mb-5 text-primary">Sistem Lelong</h1>
|
||||
<h4>Daftar Akaun</h4>
|
||||
|
||||
<div class="form-floating">
|
||||
<input type="text" class="form-control" v-model="form.name" />
|
||||
<label>Nama</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="text" class="form-control" v-model="form.username" />
|
||||
<label>Username</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="text" class="form-control" v-model="form.nokp" />
|
||||
<label>No KP</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
v-model="form.password"
|
||||
/>
|
||||
<label>Password</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
v-model="form.password_confirmation"
|
||||
/>
|
||||
<label>Password Confirmation</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="email" class="form-control" v-model="form.email" />
|
||||
<label>E-mel</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="form.notelbimbit"
|
||||
/>
|
||||
<label>No. Telefon</label>
|
||||
</div>
|
||||
<label class="mt-3">Kad Pengenalan Hadapan</label>
|
||||
<input type="file" class="form-control" />
|
||||
<label>Kad Pengenalan Belakang</label>
|
||||
<input type="file" class="form-control" />
|
||||
<div class="checkbox mt-3 mb-3">
|
||||
<label>
|
||||
<input type="checkbox" value="1" id="register_agree" /> Setuju
|
||||
dengan terma & syarat
|
||||
</label>
|
||||
</div>
|
||||
<button
|
||||
@click="doRegister"
|
||||
class="w-100 mt-4 mb-5 btn btn-primary"
|
||||
type="submit"
|
||||
>
|
||||
Enter
|
||||
</button>
|
||||
</form>
|
||||
<router-link to="/login">Log Masuk</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
export default {
|
||||
name: "Register",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: "",
|
||||
username: "",
|
||||
nokp: "",
|
||||
password: "",
|
||||
email: "",
|
||||
notelbimbit: "",
|
||||
register_agree: "1",
|
||||
password_confirmation: "",
|
||||
images: {
|
||||
file1: {
|
||||
file_type: "png",
|
||||
filename: "imagein64string",
|
||||
},
|
||||
file2: {
|
||||
file_type: "jpg",
|
||||
filename: "imagein64string",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doRegister() {
|
||||
axios
|
||||
.post("/register", this.form)
|
||||
.then((response) => {
|
||||
if (response.data.success != "error") {
|
||||
localStorage.setItem("token", response.data.token);
|
||||
this.$router.push({ name: "login" });
|
||||
console.log(response);
|
||||
} else {
|
||||
console.log(response.data);
|
||||
alert(response.data.success);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
alert(error);
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -12,7 +12,9 @@
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Terma & Syarat Sistem Lelong</h5>
|
||||
<h5 class="modal-title" id="exampleModalLabel">
|
||||
Terma & Syarat Sistem Lelong
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
@@ -22,32 +24,39 @@
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col paragraph-align">
|
||||
<ol>
|
||||
<div class="col-12 lg:col-6 paragraph-align">
|
||||
<ol class="pr-3">
|
||||
<li>Daftar secara atas talian.</li>
|
||||
<li>Berumur 18 tahun ke atas.</li>
|
||||
<li>
|
||||
Marhun lelongan boleh dilihat dalam sistem untuk dibida.
|
||||
</li>
|
||||
<li>
|
||||
Harga yang disenaraikan dalam web kami adalah <strong>muktamad</strong> dan
|
||||
tidak boleh dirunding.
|
||||
Harga yang disenaraikan dalam web kami adalah
|
||||
<strong>muktamad</strong> dan tidak boleh dirunding.
|
||||
</li>
|
||||
<li>
|
||||
Harga <strong>minimum bidaan</strong> adalah <strong>RM1.00</strong> dari
|
||||
Harga Asas.
|
||||
Harga <strong>minimum bidaan</strong> adalah
|
||||
<strong>RM1.00</strong> dari Harga Asas.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Nilai bidaan hendaklah genap</strong> dan penggunaan <strong>nilaian sen adalah
|
||||
tidak dibenarkan.</strong>
|
||||
<strong>Nilai bidaan hendaklah genap</strong> dan penggunaan
|
||||
<strong>nilaian sen adalah tidak dibenarkan.</strong>
|
||||
</li>
|
||||
<li>
|
||||
Waktu <strong>tamat lelongan</strong> adalah
|
||||
<strong>2 jam</strong> selepas waktu dibuka.
|
||||
</li>
|
||||
<li>Waktu <strong>tamat lelongan</strong> adalah <strong>2 jam</strong> selepas waktu dibuka.</li>
|
||||
<li>
|
||||
Sebelum meningggalkan premis, sila semak dan pastikan marhun
|
||||
yang <strong>diterima adalah betul.</strong> Sekiranya terdapat kekurangan dan
|
||||
masalah <strong>setelah marhun dibawa keluar</strong> dari premis, pihak
|
||||
Permodalan Kelantan Berhad <strong>tidak akan bertanggungjawab dan
|
||||
marhun tidak boleh dikembalikan</strong>.
|
||||
yang <strong>diterima adalah betul.</strong> Sekiranya
|
||||
terdapat kekurangan dan masalah
|
||||
<strong>setelah marhun dibawa keluar</strong> dari premis,
|
||||
pihak Permodalan Kelantan Berhad
|
||||
<strong
|
||||
>tidak akan bertanggungjawab dan marhun tidak boleh
|
||||
dikembalikan</strong
|
||||
>.
|
||||
</li>
|
||||
<li>
|
||||
Setiap bidaan atas talian yang telah dihantar tidak boleh
|
||||
@@ -58,14 +67,17 @@
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="col paragraph-align">
|
||||
<ol start="10">
|
||||
<div class="col-12 lg:col-6 paragraph-align">
|
||||
<ol class="pr-3" start="10">
|
||||
<li style="text-transform: uppercase">
|
||||
<strong>Kaedah pembayaran melalui perbankan atas talian (Online
|
||||
Banking).</strong>
|
||||
<strong
|
||||
>Kaedah pembayaran melalui perbankan atas talian (Online
|
||||
Banking).</strong
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
Pembayaran bidaan hendaklah diselesaikan <strong>sebelum jam 4.00</strong>
|
||||
Pembayaran bidaan hendaklah diselesaikan
|
||||
<strong>sebelum jam 4.00</strong>
|
||||
petang pada hari lelongan.
|
||||
</li>
|
||||
<li>
|
||||
@@ -76,7 +88,8 @@
|
||||
</li>
|
||||
<li>
|
||||
Pembida yang menang di dalam bidaan tetapi gagal melakukan
|
||||
pembayaran pada hari lelongan akan <strong>disenarai hitamkan.</strong>
|
||||
pembayaran pada hari lelongan akan
|
||||
<strong>disenarai hitamkan.</strong>
|
||||
</li>
|
||||
<li>
|
||||
Semua terma dan syarat di atas adalah tertakluk kepada pindaan
|
||||
@@ -88,13 +101,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Kembali
|
||||
</button>
|
||||
<Button data-bs-dismiss="modal" class="p-button-sm" label="Kembali"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,256 +1,193 @@
|
||||
<template>
|
||||
<!-- <div class="row justify-content-md-center">
|
||||
<h1>Login</h1>
|
||||
<div class="col-6" style="border: 1px solid">
|
||||
<form @submit.prevent="submit">
|
||||
<div class="p-20">
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="username"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>Username</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.username"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
placeholder="name@flowbite.com"
|
||||
required=""
|
||||
/>
|
||||
<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 p-4 shadow-2 border-round w-11 md:w-10 lg:w-8 xl:w-7"
|
||||
>
|
||||
<div class="text-center mb-5">
|
||||
<div class="text-900 text-3xl font-semibold mb-3">
|
||||
eLelong
|
||||
<img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
|
||||
</div>
|
||||
<span class="text-600 font-medium line-height-3"
|
||||
>Belum punyai akaun?</span
|
||||
>
|
||||
<router-link
|
||||
v-bind:to="{ name: 'register' }"
|
||||
class="font-medium no-underline ml-2 text-blue-500 cursor-pointer"
|
||||
>Daftar sekarang!</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="px-0 text-center md:px-8">
|
||||
<div class="field grid">
|
||||
<label for="firstname3" class="justify-content-end" style="width: 170px"
|
||||
>Username</label
|
||||
>
|
||||
<div class="col">
|
||||
<span class="p-input-icon-right">
|
||||
<i class="pi pi-user" />
|
||||
<InputText
|
||||
class="mb-2"
|
||||
v-model="form.username"
|
||||
type="text"
|
||||
required
|
||||
></InputText>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="password"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>Password</label
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
v-model="form.password"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-start mb-6">
|
||||
<div class="flex items-center h-5">
|
||||
<input
|
||||
id="remember"
|
||||
aria-describedby="remember"
|
||||
type="checkbox"
|
||||
class="
|
||||
w-4
|
||||
h-4
|
||||
bg-gray-50
|
||||
rounded
|
||||
border border-gray-300
|
||||
focus:ring-3 focus:ring-blue-300
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:focus:ring-blue-600
|
||||
dark:ring-offset-gray-800
|
||||
"
|
||||
<InlineMessage class="flex-auto" v-if="v$.form.username.$error"
|
||||
>Username diperlukan</InlineMessage
|
||||
>
|
||||
</div>
|
||||
<div class="field grid">
|
||||
<label for="firstname3" class="justify-content-end" style="width: 170px"
|
||||
>Kata Laluan</label
|
||||
>
|
||||
<div class="col">
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-user" />
|
||||
<Password
|
||||
class="mb-2"
|
||||
v-model="form.password"
|
||||
toggleMask
|
||||
:feedback="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label
|
||||
for="remember"
|
||||
class="font-medium text-gray-900 dark:text-gray-300"
|
||||
>Remember me</label
|
||||
>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
@click="doLogin"
|
||||
type="submit"
|
||||
class="
|
||||
text-white
|
||||
bg-blue-700
|
||||
hover:bg-blue-800
|
||||
focus:ring-4 focus:outline-none focus:ring-blue-300
|
||||
font-medium
|
||||
rounded-lg
|
||||
text-sm
|
||||
w-full
|
||||
sm:w-auto
|
||||
px-5
|
||||
py-2.5
|
||||
text-center
|
||||
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
|
||||
"
|
||||
<InlineMessage class="flex-auto" v-if="v$.form.password.$error"
|
||||
>Kata laluan diperlukan</InlineMessage
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<router-link to="/register">Register</router-link><br />
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="container-fluid main-container">
|
||||
<div class="row row-container justify-content-center">
|
||||
<div class="col text-center left-container"></div>
|
||||
<div class="col-5 mb-0 pb-0 m-5 p-5">
|
||||
<form @submit.prevent="submit">
|
||||
<h1 class="mb-5 text-primary">Sistem Lelong</h1>
|
||||
<h4>Log Masuk</h4>
|
||||
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="form.username"
|
||||
placeholder="username sini"
|
||||
required
|
||||
/>
|
||||
<label for="floatingInput">Username</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
v-model="form.password"
|
||||
placeholder="Password"
|
||||
required
|
||||
/>
|
||||
<label for="floatingPassword">Password</label>
|
||||
</div>
|
||||
<button
|
||||
@click="doLogin"
|
||||
class="w-100 mt-4 btn btn-primary"
|
||||
type="submit"
|
||||
>
|
||||
Masuk
|
||||
</button>
|
||||
</form>
|
||||
<div class="row mt-2 mb-5">
|
||||
<router-link to="/register">Daftar Akaun</router-link>
|
||||
<div class="">
|
||||
<Button
|
||||
@click="doLogin()"
|
||||
class="p-button-sm"
|
||||
label="Log Masuk"
|
||||
icon="pi pi-sign-in"
|
||||
:loading="isLoading"
|
||||
iconPos="right"
|
||||
></Button>
|
||||
</div>
|
||||
<div class="flex justify-content-center mt-4">
|
||||
<terms-and-conditions></terms-and-conditions>
|
||||
</div>
|
||||
<terms-and-conditions></terms-and-conditions>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useRouter } from "vue-router";
|
||||
import axios from "axios";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
import { required } from "@vuelidate/validators";
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
|
||||
// ========api composition style===============
|
||||
// setup() {
|
||||
|
||||
// const router = useRouter();
|
||||
|
||||
// const submit = async e => {
|
||||
// const form = new FormData(e.target);
|
||||
|
||||
// const inputs = Object.fromEntries(form.entries());
|
||||
|
||||
// const {data} = await axios.post('user/login', inputs, {
|
||||
// withCredentials: false
|
||||
// });
|
||||
|
||||
// axios.defaults.headers.common['Authorization'] = 'Bearer ${data.token}';
|
||||
|
||||
// console.log(data);
|
||||
// await router.push('/');
|
||||
// }
|
||||
|
||||
// return {
|
||||
// submit
|
||||
// }
|
||||
// }
|
||||
|
||||
//=========api option style===================
|
||||
data() {
|
||||
return {
|
||||
v$: useVuelidate(),
|
||||
form: {
|
||||
username: "",
|
||||
password: "",
|
||||
},
|
||||
isLoading: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doLogin() {
|
||||
axios
|
||||
.post("/user/login", this.form)
|
||||
.then((response) => {
|
||||
localStorage.setItem("token", response.data.token);
|
||||
localStorage.setItem("id", response.data.user.id);
|
||||
localStorage.setItem("nokp", response.data.user.nokp);
|
||||
localStorage.setItem("name", response.data.user.name);
|
||||
localStorage.setItem("email", response.data.user.email);
|
||||
localStorage.setItem("notelbimbit", response.data.user.notelbimbit);
|
||||
localStorage.setItem("username", response.data.user.username);
|
||||
this.$router.push({ name: "home" });
|
||||
console.log(response);
|
||||
})
|
||||
.catch((response) => {
|
||||
alert(response.message);
|
||||
console.log(response);
|
||||
});
|
||||
this.v$.$validate();
|
||||
if (!this.v$.$error) {
|
||||
this.isLoading = true;
|
||||
axios
|
||||
.post("/user/login", this.form)
|
||||
.then((response) => {
|
||||
if (response.data.statusAkaun == 1) {
|
||||
localStorage.setItem("token", response.data.token);
|
||||
localStorage.setItem("id", response.data.user.id);
|
||||
localStorage.setItem("nokp", response.data.user.nokp);
|
||||
localStorage.setItem("name", response.data.user.name);
|
||||
localStorage.setItem("email", response.data.user.email);
|
||||
localStorage.setItem(
|
||||
"notelbimbit",
|
||||
response.data.user.notelbimbit
|
||||
);
|
||||
localStorage.setItem("username", response.data.user.username);
|
||||
this.$router.push({ name: "home" });
|
||||
} else if (response.data.statusAkaun == 0) {
|
||||
this.$toast.add({
|
||||
severity: "info",
|
||||
summary: "Tiada akaun dalam database. Sila daftar sekarang.",
|
||||
});
|
||||
console.log(response, "status 0");
|
||||
} else if (response.data.statusAkaun == 2) {
|
||||
this.$toast.add({
|
||||
severity: "error",
|
||||
summary:
|
||||
"Akaun anda telah dibanned. Sila hubungi pihak pengurusan untuk maklumat lebih lanjut.",
|
||||
});
|
||||
console.log(response, "status 2");
|
||||
} else if (response.data.statusAkaun == 3) {
|
||||
this.$toast.add({
|
||||
severity: "error",
|
||||
summary:
|
||||
"Account rejected. Please contact administrator for further information.",
|
||||
});
|
||||
console.log(response, "status 3");
|
||||
} else if (response.data.statusAkaun == 4) {
|
||||
this.$toast.add({
|
||||
severity: "info",
|
||||
summary: "Registration in progress,status wait for approval",
|
||||
});
|
||||
console.log(response, "status 4");
|
||||
} else if (response.data.statusAkaun == 5) {
|
||||
this.$toast.add({
|
||||
severity: "error",
|
||||
summary: "Kata laluan salah. Sila semak semula.",
|
||||
});
|
||||
console.log(response);
|
||||
}
|
||||
this.isLoading = false;
|
||||
})
|
||||
.catch((response) => {
|
||||
// alert(response.message);
|
||||
console.log(response);
|
||||
this.isLoading = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
validations() {
|
||||
return {
|
||||
form: {
|
||||
username: { required },
|
||||
password: { required },
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main-container {
|
||||
/* display: flex; */
|
||||
/* justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%; */
|
||||
/* background: linear-gradient(
|
||||
135deg,
|
||||
rgba(139, 198, 236, 0.3) 0%,
|
||||
#9599e2 100%
|
||||
),
|
||||
url("/src/assets/background_arrahn.jpg"); */
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.left-container {
|
||||
background-color: #1d3461;
|
||||
.logo-img {
|
||||
width: 84px;
|
||||
height: 44px;
|
||||
}
|
||||
.row-container {
|
||||
/* width: 100%; */
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
+4
-1
@@ -28,7 +28,8 @@ import Sidebar from 'primevue/sidebar';
|
||||
import Message from 'primevue/message';
|
||||
import InlineMessage from 'primevue/inlinemessage';
|
||||
import Skeleton from 'primevue/skeleton';
|
||||
|
||||
import Password from 'primevue/password';
|
||||
import InputText from 'primevue/inputtext';
|
||||
|
||||
import TheTemplate from './components/layouts/TheTemplate.vue'
|
||||
import BaseCard from './components/base/BaseCard.vue'
|
||||
@@ -51,6 +52,8 @@ app.component('Sidebar', Sidebar);
|
||||
app.component('Message', Message);
|
||||
app.component('InlineMessage', InlineMessage);
|
||||
app.component('Skeleton', Skeleton);
|
||||
app.component('Password', Password);
|
||||
app.component('InputText', InputText);
|
||||
|
||||
app.use(router).use(store).use(PrimeVue).use(VueSweetalert2).use(ToastService).mount('#app');
|
||||
// app.use(router).use(store).use(PrimeVue).use(ToastService).mount('#app');
|
||||
|
||||
@@ -137,7 +137,6 @@ import {
|
||||
createWebHistory,
|
||||
createMemoryHistory,
|
||||
} from "vue-router";
|
||||
import Login from "../components/Login.vue";
|
||||
// import Register from "../components/Register.vue";
|
||||
// import IndexPaymentHistory from '../components/result/IndexPaymentHistory.vue'
|
||||
// import Modals from './../components/Modal.vue'
|
||||
|
||||
Reference in New Issue
Block a user