MAGANG_TB_dan_PNP_2023/dashboard-admin
3
0
Fork 2
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

add input verification email

Browse Source
This commit is contained in:
Fadiyah Putri Sri Lestari 2023-09-12 14:56:22 +07:00
parent b9c9252728
commit 407c4378bd
2 changed files with 75 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
public/assets/css/login_register/style.css
View File

@ -58,6 +58,13 @@ video {
z-index: 3;
}
.flex-input-btn {
width: 100%;
display: flex;
align-items: center;
margin-top: 3%;
}
form.sign-up-form {
display: flex;
align-items: start;
@ -103,8 +110,8 @@ form p {
.input-field-signup-flex {
width: 100%;
height: 55px;
margin-top: 2%;
background-color: #f0f0f0;
margin-top: 10px;
border-radius: 1rem;
display: grid;
grid-template-columns: 15% 85%;
@ -113,6 +120,41 @@ form p {
position: relative;
}
.input {
width: 100%;
height: 55px;
background-color: #f0f0f0;
border-radius: 1rem;
display: grid;
grid-template-columns: 15% 85%;
display: flex;
align-items: center;
position: relative;
}
.input input {
width: 110%;
height: 100%;
background: none;
outline: none;
border: none;
border-radius: 1rem;
line-height: 1;
font-weight: 600;
margin-right: 1rem;
font-size: 0.8rem;
color: #333;
}
.input i {
padding: 0 1.5rem;
color: #acacac;
transition: 0.5s;
}
.up {
margin-top: 3%;
}
.input-field-signin-flex input,
.input-field-signup-flex input {
width: 82%;

37
resources/views/auth/sign-in_sign-up.blade.php
View File

@ -79,14 +79,14 @@
<form action="#" class="sign-in-form">
<h2 class="title">Sign In</h2>
<p>Selamat datang kembali, silakan isi form login di bawah ini untuk masuk ke akun anda.</p>
<div style="width: 100%; display: flex; align-items: center;">
<div class="input-field-signin-flex">
<div class="flex-input-btn">
<div class="input">
<i class="fa fa-phone" aria-hidden="true"></i>
<input type="text" class="telp-input-signin" maxlength="13"
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 13);"
placeholder="Nomer Telepon">
</div>
<input type="submit" value="Kirim OTP" class="btn-otp solid" />
<input type="button" value="Kirim OTP" class="btn-otp solid" />
</div>
<div class="input-field">
<i class="fa fa-mobile" aria-hidden="true"></i>
@ -148,15 +148,23 @@
<input type="text" placeholder="Nama Belakang" class="last-name-input" />
</div>
</div>
<div class="input-field up">
<div class="flex-input-btn">
<div class="input">
<i class="fa fa-envelope" aria-hidden="true"></i>
<input type="email" placeholder="Email" class="email-input" />
</div>
<input type="button" id="verifikasiEmailBtn" onclick="showVerifikasiEmailInput()" value="Verifikasi" class="btn-otp solid" />
</div>
<div class="input-field up" style="display: none" id="verfikasiEmailInput">
<i class="fa fa-phone" aria-hidden="true"></i>
<input type="text" class="telp-input-signup"
oninput="this.value = this.value.replace(/[^0-6]/g, '').substring(0, 6);"
placeholder="Kode Verifikasi Email">
</div>
<div class="input-field up">
<i class="fa fa-phone" aria-hidden="true"></i>
<input type="text" class="telp-input-signup" maxlength="13"
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 13);"
<input type="text" class="telp-input-signup"
oninput="this.value = this.value.replace(/[^0-13]/g, '').substring(0, 13);"
placeholder="Nomer Telepon">
</div>
<div style="display: flex;">
@ -351,6 +359,21 @@
</div>
</div>
</div>
<script>
function showVerifikasiEmailInput() {
const verifikasiemailInput = document.getElementById('verfikasiEmailInput');
const verifikasiEmailButton = document.getElementById('verifikasiEmailBtn');
// Toggle visibility of the email input container
if (verifikasiemailInput.style.display === 'none' || verifikasiemailInput.style.display === '') {
verifikasiemailInput.style.display = 'flex';
verifikasiEmailButton.textContent = 'Sembunyikan';
} else {
verifikasiemailInput.style.display = 'none';
verifikasiEmailButton.textContent = 'Verifikasi Email';
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>