/home/awneajlw/www/codestechvista.com/shop-registration-step4.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 = '';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$otp = sanitizeInput($_POST['otp']);
if (empty($otp)) {
$error = 'Please enter the verification code.';
} elseif (strlen($otp) !== 6) {
$error = 'Verification code must be 6 digits.';
} else {
// Check OTP
$query = "SELECT * FROM otp_verifications WHERE email = ? AND otp_code = ? AND expires_at > NOW() AND is_used = FALSE ORDER BY created_at DESC LIMIT 1";
$stmt = $db->prepare($query);
$stmt->execute([$user['email'], $otp]);
$otp_record = $stmt->fetch(PDO::FETCH_ASSOC);
if ($otp_record) {
// Mark OTP as used
$query = "UPDATE otp_verifications SET is_used = TRUE WHERE id = ?";
$stmt = $db->prepare($query);
$stmt->execute([$otp_record['id']]);
// Mark user email as verified
$query = "UPDATE users SET email_verified = TRUE, registration_step = 4 WHERE id = ?";
$stmt = $db->prepare($query);
$stmt->execute([$_SESSION['temp_user_id']]);
// Save shop data to database
$shop_data = $_SESSION['shop_data'];
$query = "INSERT INTO shops (user_id, shop_name, shop_category, shop_address, shop_city, shop_phone, shop_description, shop_email) VALUES (?, ?, ?, ?, ?, ?, ?, ?)";
$stmt = $db->prepare($query);
$stmt->execute([
$_SESSION['temp_user_id'],
$shop_data['shop_name'],
$shop_data['shop_category'],
$shop_data['shop_address'],
$shop_data['shop_city'],
$shop_data['shop_phone'],
$shop_data['shop_description'],
$user['email']
]);
header('Location: shop-registration-complete.php');
exit();
} else {
$error = 'Invalid or expired verification code. 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 4</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;
}
.otp-input {
width: 50px;
height: 50px;
border: 2px solid #e5e7eb;
border-radius: 12px;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
margin: 0 5px;
}
.otp-input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
outline: none;
}
.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-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;
}
.verification-icon {
font-size: 4rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
.otp-container {
display: flex;
justify-content: center;
align-items: center;
margin: 2rem 0;
}
</style>
</head>
<body>
<div class="container">
<div class="registration-container">
<div class="card">
<div class="card-header">
<div class="logo">
<i class="fas fa-key verification-icon"></i>
</div>
<h3 class="mb-3">Enter Verification Code</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 completed">
<i class="fas fa-check"></i>
</div>
<div class="step-line completed"></div>
<div class="step active">4</div>
</div>
<p class="text-muted">Step 4: 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; ?>
<div class="text-center mb-4">
<p class="text-muted">
We've sent a 6-digit verification code to<br>
<strong><?php echo htmlspecialchars($user['email']); ?></strong>
</p>
<?php if (isset($_SESSION['demo_otp'])): ?>
<div class="alert alert-info">
<small><strong>Demo OTP:</strong> <?php echo $_SESSION['demo_otp']; ?></small>
</div>
<?php endif; ?>
</div>
<form method="POST" id="otpForm">
<div class="otp-container">
<input type="text" class="otp-input" maxlength="1" id="otp1" required>
<input type="text" class="otp-input" maxlength="1" id="otp2" required>
<input type="text" class="otp-input" maxlength="1" id="otp3" required>
<input type="text" class="otp-input" maxlength="1" id="otp4" required>
<input type="text" class="otp-input" maxlength="1" id="otp5" required>
<input type="text" class="otp-input" maxlength="1" id="otp6" required>
</div>
<input type="hidden" name="otp" id="otpHidden">
<button type="submit" class="btn btn-primary">
<i class="fas fa-check me-2"></i>Verify & Complete Registration
</button>
</form>
<div class="text-center mt-4">
<p class="text-muted small">Didn't receive the code?</p>
<a href="shop-registration-step3.php" class="text-decoration-none">
<i class="fas fa-redo me-1"></i>Send again
</a>
</div>
<div class="row mt-4">
<div class="col-12">
<a href="shop-registration-step3.php" class="btn btn-outline-secondary">
<i class="fas fa-arrow-left me-2"></i> Back to Step 3
</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>
<script>
// OTP Input Handling
const otpInputs = document.querySelectorAll('.otp-input');
const otpForm = document.getElementById('otpForm');
const otpHidden = document.getElementById('otpHidden');
otpInputs.forEach((input, index) => {
input.addEventListener('input', (e) => {
const value = e.target.value;
if (value.length === 1) {
if (index < otpInputs.length - 1) {
otpInputs[index + 1].focus();
}
}
updateOTPValue();
});
input.addEventListener('keydown', (e) => {
if (e.key === 'Backspace' && e.target.value === '') {
if (index > 0) {
otpInputs[index - 1].focus();
}
}
});
input.addEventListener('paste', (e) => {
e.preventDefault();
const pastedData = e.clipboardData.getData('text');
if (pastedData.length === 6 && /^\d+$/.test(pastedData)) {
otpInputs.forEach((input, i) => {
input.value = pastedData[i] || '';
});
updateOTPValue();
otpInputs[5].focus();
}
});
});
function updateOTPValue() {
const otp = Array.from(otpInputs).map(input => input.value).join('');
otpHidden.value = otp;
}
otpForm.addEventListener('submit', (e) => {
updateOTPValue();
if (otpHidden.value.length !== 6) {
e.preventDefault();
alert('Please enter all 6 digits');
}
});
// Auto focus first input
otpInputs[0].focus();
</script>
</body>
</html>