Register/title> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <link rel="shortcut icon" href="public/assets/images/sentra.ico" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="assets/style.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-expand-lg border-bottom sticky-top"> <div class="container-fluid d-flex align-items-center gap-3"> <a class="brand d-flex align-items-center gap-2 text-decoration-none text-reset" href="index.html"> <img class="logo" src="assets/images/sentra_forms_dark.png" alt="SentraForms"> </a> </div> </nav> <center> <div style="margin-top: 80px; text-align: center; width: 25%; border: 2px solid #3463ab; border-radius: 30px; padding: 20px;"> <img src="assets/images/form_badge.png" width="150px" height="180px"><br /> <h3 class="mb-5 font-weight-light text-uppercase">Register</h3> <form id="registerForm" class="text-start" action="#" novalidate> <div class="mb-3"> <input type="text" class="form-control rounded-pill form-control-lg" style="background: white; color: black;" name="full_name" id="full_name" placeholder="Your Fullname" autocomplete="off" required /> </div> <div class="mb-3"> <input type="email" class="form-control rounded-pill form-control-lg" style="background: white; color: black;" name="email" id="email" placeholder="Email Address" autocomplete="off" required /> </div> <div class="mb-2"> <input type="password" minlength="8" class="form-control rounded-pill form-control-lg" style="background: white; color: black;" name="password" id="password" placeholder="Password (at least 8 characters)" required /> </div> <center><button type="submit" class="btn mt-3 rounded-pill btn-lg btn-custom btn-block text-uppercase">Create Account</button></center> </form> <div id="msg" class="mt-3 text-muted small" style="color: white;" role="status" aria-live="polite"></div> <div class="mt-3"><a href="index.html">Back to sign in</a></div> <p class="forgot-link">© SentraTech Systems 2025</p> </div> </center> <div class="toast-container position-fixed bottom-0 end-0 p-3" id="toastContainer"></div> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <script> $(function () { const API_URL = '/api/index.php'; const LOGIN_URL = '/public/index.html'; function showToast(message, type = 'info', delay = 4000) { const id = 't' + Date.now(); const color = type === 'error' ? 'bg-danger text-white' : type === 'success' ? 'bg-success text-white' : 'bg-secondary text-white'; const html = ` <div id="${id}" class="toast align-items-center ${color} border-0" role="alert" aria-live="assertive" aria-atomic="true"> <div class="d-flex"> <div class="toast-body">${message}</div> <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button> </div> </div>`; const $t = $(html).appendTo('#toastContainer'); const t = new bootstrap.Toast($t[0], { delay }); t.show(); $t.on('hidden.bs.toast', () => $t.remove()); } $('#registerForm').on('submit', function (e) { e.preventDefault(); const payload = { action: 'register', full_name: $.trim($('#full_name').val()), email: $.trim($('#email').val()), password: $('#password').val() }; if (!payload.full_name || !payload.email || !payload.password || payload.password.length < 8) { showToast('Please complete all fields (password ≥ 8 characters).', 'error'); return; } $('#registerBtn').prop('disabled', true); $.ajax({ url: API_URL, type: 'POST', data: JSON.stringify(payload), contentType: 'application/json; charset=UTF-8', dataType: 'json', timeout: 15000 }) .done(function (res) { if (res && res.error) { showToast(res.error, 'error'); return; } // ✅ Show success toast showToast(res?.message || 'Account created successfully!', 'success'); // ✅ Redirect to login after 3 seconds setTimeout(() => { window.location.href = LOGIN_URL; }, 3000); }) .fail(function (xhr, status) { let msg = (status === 'timeout') ? 'Request timed out.' : 'Server error. Please try again.'; try { const body = xhr.responseJSON || JSON.parse(xhr.responseText || '{}'); if (body && body.error) msg = body.error; } catch (_) {} showToast(msg, 'error'); }) .always(function () { $('#registerBtn').prop('disabled', false); }); }); }); </script> </body></html>