update checkbox show password login page 2.0

This commit is contained in:
amirhamzan
2023-12-30 06:50:34 +08:00
parent addf324a01
commit 4d775bec90
+18 -16
View File
@@ -53,11 +53,9 @@
<div class="container position-sticky z-index-sticky top-0"> <div class="container position-sticky z-index-sticky top-0">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<nav <nav class="navbar navbar-expand-lg blur blur-rounded top-0 z-index-3 shadow position-absolute my-3 py-2 start-0 end-0 mx-4">
class="navbar navbar-expand-lg blur blur-rounded top-0 z-index-3 shadow position-absolute my-3 py-2 start-0 end-0 mx-4">
<div class="container-fluid px-0"> <div class="container-fluid px-0">
<a class="navbar-brand font-weight-bolder ms-sm-3" rel="tooltip" <a class="navbar-brand font-weight-bolder ms-sm-3" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom">
title="Designed and Coded by Creative Tim" data-placement="bottom">
ar-rahn Online System ar-rahn Online System
</a> </a>
<div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation"> <div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation">
@@ -96,22 +94,21 @@
<form method="POST" action="{{ route('login') }}"> <form method="POST" action="{{ route('login') }}">
@csrf @csrf
@if (Session::has('error')) @if (Session::has('error'))
<div class="text-danger" class="alert alert-warning" role="alert" <div class="text-danger" class="alert alert-warning" role="alert" style="white-space: nowrap; font-weight:bolder">Opps! Tidak berjaya
style="white-space: nowrap; font-weight:bolder">Opps! Tidak berjaya disahkan. Sila semak semula e-mel/kata laluan.
disahkan. Sila semak semula e-mel/kata laluan. </div>
</div>
@endif @endif
<label>E-mel</label> <label>E-mel</label>
<div class="mb-3"> <div class="mb-3">
<input type="email" class="form-control" placeholder="Sila isi e-mel anda ..." <input type="email" class="form-control" placeholder="Sila isi e-mel anda ..." aria-label="Email" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
aria-label="Email" name="email" value="{{ old('email') }}" required
autocomplete="email" autofocus>
</div> </div>
<label>Kata Laluan</label> <label>Kata Laluan</label>
<div class="mb-3"> <div class="mb-3">
<input type="password" class="form-control" <input type="password" class="form-control" placeholder="Sila isi kata laluan ..." aria-label="Password" name="password" id="password" value="{{ old('password') }}" required autocomplete="current-password">
placeholder="Sila isi kata laluan ..." aria-label="Password" name="password" <div class="d-flex mt-2 align-items-center">
value="{{ old('password') }}" required autocomplete="current-password"> <input type="checkbox" id="check">
<label class="mb-0 text-muted" for="check" style="cursor: pointer;">Papar Kata Laluan</label>
</div>
</div> </div>
<div class="text-center"> <div class="text-center">
<button type="submit" class="btn bg-gradient-info w-100 mt-4 mb-0">Log <button type="submit" class="btn bg-gradient-info w-100 mt-4 mb-0">Log
@@ -130,8 +127,7 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="oblique position-absolute top-0 h-100 d-md-block d-none me-n8"> <div class="oblique position-absolute top-0 h-100 d-md-block d-none me-n8">
<div class="oblique-image bg-cover position-absolute fixed-top ms-auto h-100 z-index-0 ms-n6" <div class="oblique-image bg-cover position-absolute fixed-top ms-auto h-100 z-index-0 ms-n6" style="background-image:url({{ asset('img/dark-blue-monterey.jpg') }}); transform: rotate(180deg);">
style="background-image:url({{ asset('img/dark-blue-monterey.jpg') }}); transform: rotate(180deg);">
</div> </div>
</div> </div>
</div> </div>
@@ -153,6 +149,12 @@
<script> <script>
var copy = document.querySelector(".logos-slide").cloneNode(true); var copy = document.querySelector(".logos-slide").cloneNode(true);
document.querySelector(".logos").appendChild(copy); document.querySelector(".logos").appendChild(copy);
$(document).ready(function() {
$('#check').click(function() {
$(this).is(':checked') ? $('#password').attr('type', 'text') : $('#password').attr('type', 'password');
});
});
</script> </script>
</div> </div>
</footer> </footer>