add input verification email

public/assets/css/login_register/style.css

@@ -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%;

resources/views/auth/sign-in_sign-up.blade.php

@@ -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="flex-input-btn">
-                        <div class="input-field-signin-flex">
+                        <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"
+                                    <input type="text" class="telp-input-signup" 
-                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 13);"
+                                        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>