/home/awneajlw/public_html/codestechvista.com/shop-registration-step3.php
<?php
session_start();
require_once 'config/database.php';
require_once 'includes/auth.php';
// Check if user came from previous steps
if (!isset($_SESSION['temp_user_id']) || !isset($_SESSION['shop_data'])) {
header('Location: shop-signup.php');
exit();
}
$database = new Database();
$db = $database->getConnection();
// Get user email
$query = "SELECT email FROM users WHERE id = ?";
$stmt = $db->prepare($query);
$stmt->execute([$_SESSION['temp_user_id']]);
$user = $stmt->fetch(PDO::FETCH_ASSOC);
if (!$user) {
header('Location: shop-signup.php');
exit();
}
$error = '';
$success = '';
$otp_sent = false;
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (isset($_POST['send_otp'])) {
// Generate OTP
$otp = sprintf("%06d", rand(0, 999999));
$expires_at = date('Y-m-d H:i:s', strtotime('+10 minutes'));
// Save OTP to database
$query = "INSERT INTO otp_verifications (email, otp_code, expires_at) VALUES (?, ?, ?)";
$stmt = $db->prepare($query);
if ($stmt->execute([$user['email'], $otp, $expires_at])) {
// In real implementation, send email here
// For demo, we'll show the OTP
$_SESSION['demo_otp'] = $otp;
$otp_sent = true;
$success = "OTP sent to " . $user['email'] . " (Demo OTP: " . $otp . ")";
} else {
$error = 'Failed to send OTP. 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>Shop Registration - Step 3</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>
:root {
--primary-color: #2563eb;
--secondary-color: #1e40af;
}
body {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
min-height: 100vh;
font-family: 'Inter', sans-serif;
}
.registration-container {
max-width: 500px;
margin: 0 auto;
padding: 2rem;
}
.card {
border: none;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
}
.card-header {
background: white;
border-bottom: none;
text-align: center;
border-radius: 20px 20px 0 0 !important;
padding: 2rem 2rem 1rem;
}
.progress-indicator {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}
.step {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.step.active {
background: var(--primary-color);
color: white;
}
.step.completed {
background: #10b981;
color: white;
}
.step.inactive {
background: #e5e7eb;
color: #9ca3af;
}
.step-line {
width: 50px;
height: 2px;
background: #e5e7eb;
}
.step-line.completed {
background: #10b981;
}
.form-control {
border-radius: 12px;
border: 2px solid #e5e7eb;
padding: 0.75rem 1rem;
}
.form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}
.btn-primary {
background: var(--primary-color);
border: none;
border-radius: 12px;
padding: 0.75rem 2rem;
font-weight: 600;
width: 100%;
}
.btn-primary:hover {
background: var(--secondary-color);
}
.btn-success {
border-radius: 12px;
padding: 0.75rem 2rem;
font-weight: 600;
width: 100%;
}
.btn-outline-secondary {
border-radius: 12px;
padding: 0.75rem 2rem;
font-weight: 600;
width: 100%;
margin-bottom: 1rem;
}
.logo {
font-size: 2rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
.email-display {
background: #f8fafc;
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 1rem;
text-align: center;
margin-bottom: 2rem;
}
.email-display .email {
font-size: 1.1rem;
font-weight: 600;
color: var(--primary-color);
}
.verification-icon {
font-size: 4rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="registration-container">
<div class="card">
<div class="card-header">
<div class="logo">
<i class="fas fa-envelope-circle-check verification-icon"></i>
</div>
<h3 class="mb-3">Email Verification</h3>
<!-- Progress Indicator -->
<div class="progress-indicator">
<div class="step completed">
<i class="fas fa-check"></i>
</div>
<div class="step-line completed"></div>
<div class="step completed">
<i class="fas fa-check"></i>
</div>
<div class="step-line completed"></div>
<div class="step active">3</div>
<div class="step-line"></div>
<div class="step inactive">4</div>
</div>
<p class="text-muted">Step 3: Verify Your Email</p>
</div>
<div class="card-body p-4">
<?php if ($error): ?>
<div class="alert alert-danger"><?php echo $error; ?></div>
<?php endif; ?>
<?php if ($success): ?>
<div class="alert alert-success"><?php echo $success; ?></div>
<?php endif; ?>
<div class="email-display">
<i class="fas fa-envelope mb-2" style="font-size: 2rem; color: var(--primary-color);"></i>
<div class="email"><?php echo htmlspecialchars($user['email']); ?></div>
<small class="text-muted">We will send a verification code to this email</small>
</div>
<?php if (!$otp_sent): ?>
<form method="POST">
<button type="submit" name="send_otp" class="btn btn-primary">
<i class="fas fa-paper-plane me-2"></i>Send Verification Code
</button>
</form>
<div class="text-center mt-3">
<p class="text-muted small">Click the button above to receive a 6-digit verification code</p>
</div>
<?php else: ?>
<a href="shop-registration-step4.php" class="btn btn-success">
<i class="fas fa-key me-2"></i>Enter Verification Code
</a>
<div class="text-center mt-3">
<p class="text-muted small">Check your email for the verification code</p>
<form method="POST" class="d-inline">
<button type="submit" name="send_otp" class="btn btn-link p-0 text-decoration-none small">
Didn't receive code? Send again
</button>
</form>
</div>
<?php endif; ?>
<div class="row mt-4">
<div class="col-12">
<a href="shop-registration-form.php" class="btn btn-outline-secondary">
<i class="fas fa-arrow-left me-2"></i> Back to Step 2
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>