104 lines
4.6 KiB
PHP
104 lines
4.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sign-in | Sign-up</title>
|
|
<link rel="stylesheet" href="assets/css/login.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
</head>
|
|
<body>
|
|
<br>
|
|
<br>
|
|
<div class="cont">
|
|
<form action="{{ route('session.store') }}" method="post" enctype="multipart/form-data">
|
|
@csrf
|
|
<div class="form sign-in">
|
|
<h2>Welcome</h2><br>
|
|
|
|
@error('email')
|
|
<div class="alert alert-error"><div style="text-align: center">{{ $message }}</div></div>
|
|
@enderror
|
|
|
|
<label>
|
|
<span style="color: black;">Email</span>
|
|
<input name="email" type="email" required/>
|
|
</label>
|
|
<label style="position: relative;">
|
|
<span style="color: black;">Password</span>
|
|
<input name="password" type="password" required id="sign-in-password"/>
|
|
<button type="button" onclick="togglePassword('sign-in-password')" style="position: absolute; left: 210px; top: 35px; transform: translateY(-50%); background-color:#4f4f4f; width:50px"><i class="fas fa-eye"></i></button>
|
|
</label>
|
|
<button type="submit" class="submit">Sign In</button>
|
|
</div>
|
|
</form>
|
|
<div class="sub-cont">
|
|
<div class="img">
|
|
<div class="img__text m--up">
|
|
<h3>Don't have an account? Please Sign up!<h3>
|
|
</div>
|
|
<div class="img__text m--in">
|
|
<h3>If you already has an account, just sign in.<h3>
|
|
</div>
|
|
<div class="img__btn">
|
|
<span class="m--up">Sign Up</span>
|
|
<span class="m--in">Sign In</span>
|
|
</div>
|
|
</div>
|
|
<form action="{{ route('session.create') }}" method="post" enctype="multipart/form-data">
|
|
@csrf
|
|
<div class="form sign-up">
|
|
<h2>Create your Account</h2>
|
|
<label>
|
|
<span style="color: black;">Nama</span>
|
|
<input name="nama" type="text" required/>
|
|
</label>
|
|
<label>
|
|
<span style="color: black;">Email</span>
|
|
<input name="email" type="email" required/>
|
|
</label>
|
|
<label style="position: relative;">
|
|
<span style="color: black;">Password</span>
|
|
<input name="password" type="password" required id="sign-up-password"/>
|
|
<button type="button" onclick="togglePassword('sign-up-password')" style="position: absolute; left: 210px; top: 35px; transform: translateY(-50%); background-color:#4f4f4f; width:50px"><i class="fas fa-eye"></i></button>
|
|
</label>
|
|
<label>
|
|
<span style="color: black;">Nomor telepon</span>
|
|
<input name="no_telp" type="text" required/>
|
|
</label>
|
|
<label>
|
|
<span style="color: black;">Alamat</span>
|
|
<input name="alamat" type="text" required/>
|
|
</label>
|
|
<button type="submit" class="submit">Sign Up</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.querySelector('.img__btn').addEventListener('click', function() {
|
|
document.querySelector('.cont').classList.toggle('s--signup');
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
function togglePassword(fieldId) {
|
|
var passwordField = document.getElementById(fieldId);
|
|
var button = document.querySelector("#" + fieldId + " + button");
|
|
var icon = button.querySelector("i");
|
|
|
|
if (passwordField.type === "password") {
|
|
passwordField.type = "text";
|
|
icon.classList.remove("fa-eye");
|
|
icon.classList.add("fa-eye-slash");
|
|
} else {
|
|
passwordField.type = "password";
|
|
icon.classList.remove("fa-eye-slash");
|
|
icon.classList.add("fa-eye");
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|