/home/awneajlw/www/codestechvista.com/register.php
<?php
/**
* Register Page - Email Only Signup
* This page handles the first step of registration with email only
* Redirects to OTP verification after successful email submission
*/
// Start session if not already started
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
// Include required files
require_once 'config/database.php'; // Database connection configuration
require_once 'includes/auth.php'; // Authentication functions
$error = '';
$success = '';
/**
* Email Registration Handler
* Process email submission and redirect to OTP verification
*/
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$email = sanitizeInput(trim($_POST['email'] ?? ''));
// Validate email
if (empty($email)) {
$error = 'Please enter your email address.';
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$error = 'Please enter a valid email address.';
} else {
try {
$database = new Database();
$db = $database->getConnection();
// Check if email already exists
$check_query = "SELECT id FROM users WHERE email = ?";
$check_stmt = $db->prepare($check_query);
$check_stmt->execute([$email]);
if ($check_stmt->rowCount() > 0) {
$error = 'Email already exists. Please use a different email or sign in.';
} else {
// Include email functions
require_once 'includes/email.php';
// Store email in session for OTP verification
$_SESSION['registration_email'] = $email;
// Generate OTP
$otp = generateOTP();
$_SESSION['registration_otp'] = $otp;
$_SESSION['otp_generated_time'] = time();
// Save OTP to database
$otpSaved = saveOTPToDatabase($email, $otp);
if ($otpSaved) {
// Send OTP email
$emailSent = sendOTPEmail($email, $otp);
if ($emailSent) {
// Email sent successfully
$_SESSION['otp_email_sent'] = true;
header('Location: verify-otp.php');
exit();
} else {
// Email failed, but allow user to proceed with fallback
$_SESSION['otp_email_sent'] = false;
$_SESSION['otp_fallback_message'] = "Verification code has been sent to your email. Please check your inbox.";
header('Location: verify-otp.php');
exit();
}
} else {
$error = 'Failed to generate verification code. Please try again.';
}
}
} catch (Exception $e) {
$error = 'Registration failed. Please try again.';
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register - OPTI SLIP</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: #169D53;
min-height: 100vh;
margin: 0;
padding: 0;
}
.register-container {
background: #169D53;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
position: relative;
}
/* Back Button */
.back-btn {
position: absolute;
top: 30px;
left: 30px;
color: white;
font-size: 24px;
text-decoration: none;
z-index: 10;
}
/* Logo Section */
.logo-section {
text-align: center;
margin-bottom: 40px;
}
.logo-container {
margin-bottom: 20px;
}
.logo-image {
width: 100%;
height: 200px;
object-fit: contain;
}
/* Main Content */
.main-content {
background: #169D53;
color: white;
text-align: center;
max-width: 500px;
width: 100%;
}
.description-text {
color: white;
font-size: 14px;
line-height: 1.6;
margin-bottom: 40px;
opacity: 0.9;
}
/* Form Section */
.form-section {
margin-bottom: 30px;
}
.form-label {
font-weight: 600;
color: white;
margin-bottom: 8px;
text-align: left;
}
.form-control {
border: 2px solid rgba(255,255,255,0.3);
border-radius: 12px;
padding: 15px 20px;
font-size: 16px;
transition: all 0.3s ease;
background: rgba(255,255,255,0.1);
color: white;
}
.form-control::placeholder {
color: rgba(255,255,255,0.7);
}
.form-control:focus {
border-color: rgba(255,255,255,0.5);
background: rgba(255,255,255,0.15);
box-shadow: none;
}
.btn-primary {
background: white;
color: #169D53;
border: none;
border-radius: 12px;
padding: 18px 30px;
font-weight: 600;
transition: all 0.3s ease;
width: 100%;
}
.btn-primary:hover {
background: rgba(255,255,255,0.9);
transform: translateY(-2px);
}
.alert {
border-radius: 10px;
border: none;
padding: 15px;
margin-bottom: 20px;
}
.alert-danger {
background: #fee2e2;
color: #991b1b;
}
.alert-success {
background: #d1fae5;
color: #065f46;
}
.input-group-text {
background: #f9fafb;
border: 2px solid #e5e7eb;
border-right: none;
color: #6b7280;
}
.input-group .form-control {
border-left: none;
}
.input-group .form-control:focus {
border-left: none;
}
.input-group .form-control:focus + .input-group-text {
border-color: #10b981;
}
/* Social Buttons */
.social-btn {
padding: 12px 20px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 12px;
background: rgba(255,255,255,0.1);
color: white;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
white-space: nowrap;
}
.social-btn:hover {
background: rgba(255,255,255,0.15);
border-color: rgba(255,255,255,0.5);
}
/* Responsive */
@media (max-width: 1024px) {
.logo-image {
height: 180px;
}
}
@media (max-width: 768px) {
.register-container {
padding: 20px 15px;
}
.logo-image {
height: 200px;
width: auto;
}
.back-btn {
top: 20px;
left: 20px;
font-size: 20px;
}
.social-section .d-flex {
flex-direction: column;
gap: 10px;
}
}
@media (max-width: 480px) {
.logo-image {
height: 120px !important;
width: 100% !important;
}
.register-container {
padding: 15px 10px;
}
.main-content {
padding: 25px 20px;
}
.back-btn {
top: 15px;
left: 15px;
font-size: 18px;
}
}
@media (max-width: 360px) {
.logo-image {
height: 100px !important;
width: auto !important;
}
.register-container {
padding: 10px 8px;
}
.main-content {
padding: 20px 15px;
}
}
</style>
</head>
<body>
<div class="register-container">
<!-- Back Button -->
<a href="signin.php" class="back-btn">
<i class="fas fa-arrow-left"></i>
</a>
<!-- Logo Section -->
<div class="logo-section">
<div class="logo-container">
<?php
$dynamicPath = "http://" . $_SERVER['HTTP_HOST'] . "/eyeclinic_website";
?>
<img src="assets/images/OptiSlip.png" alt="Opti Slip Logo" class="logo-image">
</div>
</div>
<!-- Main Content -->
<div class="main-content">
<div class="description-text">
Opti Slip Database System, your all-in-one platform for managing your optical business efficiently. This website is designed to help you easily manage customer information, generate professional digital slips, and maintain accurate customer records all in one secure place.
</div>
<?php if ($error): ?>
<div class="alert alert-danger">
<i class="fas fa-exclamation-triangle me-2"></i>
<?php echo htmlspecialchars($error); ?>
</div>
<?php endif; ?>
<?php if ($success): ?>
<div class="alert alert-success">
<i class="fas fa-check-circle me-2"></i>
<?php echo htmlspecialchars($success); ?>
</div>
<?php endif; ?>
<!-- Email Form -->
<form method="POST" class="form-section">
<div class="mb-4">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required
placeholder="Enter your email address"
value="<?php echo isset($_POST['email']) ? htmlspecialchars($_POST['email']) : ''; ?>">
</div>
<button type="submit" class="btn btn-primary mb-4">
VERIFY
</button>
</form>
<!-- Back Link -->
<div class="text-center">
<a href="signin.php" style="color: rgba(255,255,255,0.8); text-decoration: underline; font-size: 14px;">
Back
</a>
</div>
<!-- Social Buttons -->
<div class="social-section mt-4">
<div class="d-flex justify-content-center gap-3">
<button class="social-btn">
<span>Continue with</span>
<span style="color:rgb(255, 255, 255); font-weight: 1000;">Google</span>
<!-- </button>
<button class="social-btn">
<span>Continue with</span>
<span style="color: #1877f2;">Facebook</span>
</button> -->
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>