Sign In | KGNB2B


<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<!-- Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-auth-compat.js"></script>

<script>
const firebaseConfig = {
    apiKey: "AIzaSyC_uL1_Mtw419pPeEJIePdBD8OYuizwyZU,",
    authDomain: "kgnb2b.firebaseapp.com,",
    projectId: "kgnb2b,",
    storageBucket: "kgnb2b.firebasestorage.app,",
    messagingSenderId: "124630178071,",
    appId: "1:124630178071:web:2c25bcf710f47b8cc87f52,"
};
firebase.initializeApp(firebaseConfig);
</script>

<style>
*, *::before, *::after { box-sizing: border-box; }

:root {
    --brand:        #1B3FAB;
    --brand-light:  #3B5BDB;
    --brand-xlight: #EEF2FF;
    --gold:         #3B5BDB;
    --surface:      #FFFFFF;
    --bg:           #F1F5FF;
    --border:       #E2E8F0;
    --text-1:       #0F172A;
    --text-2:       #475569;
    --text-3:       #94A3B8;
    --success:      #10B981;
    --danger:       #EF4444;
    --r:            10px;
    --t:            200ms cubic-bezier(.4,0,.2,1);
}

/* Override base styles for login page */
body {
    font-family: 'Inter', -apple-system, sans-serif !important;
    background: var(--bg) !important;
}

.login-page-section {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    background: linear-gradient(135deg, #F1F5FF 0%, #E8EEFF 50%, #F1F5FF 100%);
    position: relative;
    overflow: hidden;
}

/* Decorative blobs */
.login-page-section::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,91,219,.08) 0%, transparent 70%);
}

.login-page-section::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,91,219,.06) 0%, transparent 70%);
}

/* ── CARD ─────────────────────────────────────── */
.login-card {
    width: 100%;
    max-width: 920px;
    background: var(--surface);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(27,63,171,.12), 0 4px 16px rgba(0,0,0,.06);
    display: grid;
    grid-template-columns: 340px 1fr;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* ── LEFT ACCENT PANEL ───────────────────────── */
.login-accent {
    background: linear-gradient(165deg, #0D2468 0%, #1B3FAB 60%, #2D5BE3 100%);
    color: white;
    padding: 48px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.login-accent::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
}

.login-accent::after {
    content: '';
    position: absolute;
    bottom: -40px; left: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
}

.la-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.la-icon {
    width: 44px; height: 44px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800;
}

.la-brand {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.la-brand span { color: var(--gold); }

.la-hero {
    position: relative;
    z-index: 1;
}

.la-hero h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
}

.la-hero p {
    font-size: 0.85rem;
    opacity: 0.75;
    line-height: 1.7;
    margin-bottom: 28px;
}

.la-points {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.la-point {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
}

.la-point i {
    width: 28px; height: 28px;
    background: rgba(255,255,255,.12);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.la-footer {
    font-size: 0.78rem;
    opacity: 0.55;
    position: relative;
    z-index: 1;
}

/* ── RIGHT FORM AREA ─────────────────────────── */
.login-form-area {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lf-header { margin-bottom: 32px; }

.lf-header h1 {
    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 6px;
}

.lf-header p {
    font-size: 0.88rem;
    color: var(--text-2);
}

.lf-header a {
    color: var(--brand-light);
    font-weight: 600;
    text-decoration: none;
}

.lf-header a:hover { text-decoration: underline; }

/* ── FORM ─────────────────────────────────────── */
.lf-form-group { margin-bottom: 20px; }

.lf-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 7px;
}

.lf-phone-wrapper {
    display: flex;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--bg);
    transition: var(--t);
}

.lf-phone-wrapper:focus-within {
    border-color: var(--brand-light);
    box-shadow: 0 0 0 3px rgba(59,91,219,.12);
    background: white;
}

.lf-phone-wrapper.error-state {
    border-color: var(--danger);
}

.lf-code {
    display: flex; align-items: center;
    padding: 0 16px;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-1);
    background: var(--bg);
    border-right: 1.5px solid var(--border);
    white-space: nowrap;
}

.lf-phone-input {
    flex: 1;
    padding: 13px 16px;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--text-1);
    background: transparent;
    outline: none;
}

.lf-phone-input::placeholder { color: var(--text-3); }

.lf-helper {
    font-size: 0.78rem;
    color: var(--text-3);
    margin-top: 5px;
}

/* OTP input */
.lf-otp-input {
    width: 100%;
    padding: 14px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    background: var(--bg);
    outline: none;
    transition: var(--t);
    color: var(--text-1);
}

.lf-otp-input::placeholder { letter-spacing: normal; font-size: 0.95rem; font-weight: 400; color: var(--text-3); }

.lf-otp-input:focus {
    border-color: var(--brand-light);
    box-shadow: 0 0 0 3px rgba(59,91,219,.12);
    background: white;
}

/* ── ALERTS ──────────────────────────────────── */
.lf-alert {
    border-radius: var(--r);
    padding: 12px 16px;
    margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    font-weight: 500;
    display: none;
    align-items: center;
    gap: 10px;
}

.lf-alert.show { display: flex; }

.lf-alert-error   { background: #FFF5F5; color: #B91C1C; border: 1px solid #FECACA; }
.lf-alert-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }

/* ── OTP SECTION ─────────────────────────────── */
.lf-otp-section {
    background: #F8FAFF;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    padding: 20px;
    margin-top: 20px;
    display: none;
}

.lf-otp-section.show { display: block; }

.lf-otp-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 4px;
}

.lf-otp-sub {
    font-size: 0.8rem;
    color: var(--text-2);
    margin-bottom: 14px;
}

.lf-resend {
    text-align: center;
    margin-top: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: var(--text-2);
}

.lf-resend-btn {
    background: none; border: none;
    color: var(--brand-light);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.lf-resend-btn:hover:not(:disabled) { text-decoration: underline; }
.lf-resend-btn:disabled { color: var(--text-3); cursor: default; }

/* ── BUTTONS ─────────────────────────────────── */
.lf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--r);
    border: none;
    cursor: pointer;
    transition: var(--t);
    position: relative;
    overflow: hidden;
}

.lf-btn-primary {
    background: var(--brand);
    color: white;
}

.lf-btn-primary:hover:not(:disabled) {
    background: var(--brand-light);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(27,63,171,.3);
}

.lf-btn-success {
    background: var(--success);
    color: white;
}

.lf-btn-success:hover:not(:disabled) {
    background: #059669;
    transform: translateY(-1px);
}

.lf-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }

.lf-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: white;
    border-radius: 50%;
    animation: lf-spin .8s linear infinite;
    display: none;
}

.lf-btn.loading .lf-spinner { display: block; }

@keyframes lf-spin { to { transform: rotate(360deg); } }

/* reCAPTCHA */
.lf-recaptcha {
    display: flex; justify-content: center;
    min-height: 78px; align-items: center;
    background: var(--bg);
    border-radius: var(--r);
    padding: 10px;
    margin: 16px 0;
}

/* ── FOOTER ──────────────────────────────────── */
.lf-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--text-2);
}

.lf-footer a { color: var(--brand-light); font-weight: 600; text-decoration: none; }
.lf-footer a:hover { text-decoration: underline; }

/* ── RESPONSIVE ─────────────────────────────── */
@media (max-width: 780px) {
    .login-card {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
    .login-accent {
        padding: 28px 24px;
        min-height: auto;
    }
    .la-hero p, .la-points { display: none; }
    .la-hero h2 { font-size: 1.2rem; margin-bottom: 0; }
    .login-form-area { padding: 32px 28px; }
}

@media (max-width: 420px) {
    .login-form-area { padding: 28px 20px; }
}
</style>



<div class="login-page-section">
    <div class="login-card">

        <!-- ── LEFT ACCENT ───────────────────────── -->
        <div class="login-accent">
            <div class="la-logo">
                <div class="la-icon">K</div>
                <div class="la-brand">KGN<span>B2B</span></div>
            </div>

            <div class="la-hero">
                <h2>Sign in to your business account</h2>
                <p>Access your orders, invoices, and bulk pricing tiers instantly.</p>
                <div class="la-points">
                    <div class="la-point">
                        <i class="fas fa-box-open"></i>
                        <span>Track all your orders</span>
                    </div>
                    <div class="la-point">
                        <i class="fas fa-file-invoice"></i>
                        <span>Download GST invoices</span>
                    </div>
                    <div class="la-point">
                        <i class="fas fa-tags"></i>
                        <span>View exclusive B2B prices</span>
                    </div>
                    <div class="la-point">
                        <i class="fas fa-headset"></i>
                        <span>Priority support access</span>
                    </div>
                </div>
            </div>

            <div class="la-footer">© 2025 KGNB2B. All rights reserved.</div>
        </div>

        <!-- ── RIGHT FORM AREA ────────────────────── -->
        <div class="login-form-area">

            <div class="lf-header">
                <h1>Welcome back 👋</h1>
                <p>Don't have an account? <a href="/accounts/signup/">Create one free</a></p>
            </div>

            <!-- Alerts -->
            <div class="lf-alert lf-alert-error" id="error-alert">
                <i class="fas fa-exclamation-circle"></i>
                <span id="error-text"></span>
            </div>
            <div class="lf-alert lf-alert-success" id="success-alert">
                <i class="fas fa-check-circle"></i>
                <span id="success-text"></span>
            </div>

            <!-- Phone form -->
            <form id="firebase-phone-form">
                <input type="hidden" name="csrfmiddlewaretoken" value="J8bJmd5cq1PwCmgABMnhowuiZ9vE1bd0gqsfzf6XwbJL8fdso7e4vX6mxxvZfVni">

                <div class="lf-form-group">
                    <label class="lf-label" for="phone">Mobile Number</label>
                    <div class="lf-phone-wrapper" id="phoneWrapper">
                        <div class="lf-code">🇮🇳 +91</div>
                        <input type="tel" id="phone" class="lf-phone-input"
                               placeholder="10-digit mobile number"
                               required maxlength="10" inputmode="numeric">
                    </div>
                    <div class="lf-helper">Enter your registered mobile number to receive OTP</div>
                </div>

                <!-- reCAPTCHA -->
                <div id="recaptcha-container" class="lf-recaptcha"></div>

                <button type="button" class="lf-btn lf-btn-primary" id="send-otp-btn">
                    <div class="lf-spinner"></div>
                    <span class="btn-label"><i class="fas fa-mobile-alt"></i> Send Verification Code</span>
                </button>
            </form>

            <!-- OTP section -->
            <div class="lf-otp-section" id="otp-section">
                <div class="lf-otp-title">Enter Verification Code</div>
                <div class="lf-otp-sub">We sent a 6-digit code to your mobile. Expires in 10 minutes.</div>

                <div class="lf-form-group">
                    <input type="text" id="otp-input" class="lf-otp-input"
                           placeholder="Enter 6-digit code" maxlength="6"
                           inputmode="numeric" required>
                </div>

                <button type="button" class="lf-btn lf-btn-success" id="verify-btn">
                    <div class="lf-spinner"></div>
                    <span class="btn-label"><i class="fas fa-unlock"></i> Verify &amp; Sign In</span>
                </button>

                <div class="lf-resend">
                    Didn't receive? <button class="lf-resend-btn" id="resend-btn" disabled>Resend Code (60s)</button>
                </div>
            </div>

            <div class="lf-footer">
                <p>New to KGNB2B? <a href="/accounts/signup/">Register your business</a></p>
            </div>

        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {

    const auth = firebase.auth();
    let confirmationResult = null;
    let recaptchaVerifier  = null;
    let countdown          = 60;
    let countdownInterval  = null;

    const sendOtpBtn   = document.getElementById('send-otp-btn');
    const verifyBtn    = document.getElementById('verify-btn');
    const resendBtn    = document.getElementById('resend-btn');
    const otpSection   = document.getElementById('otp-section');
    const phoneInput   = document.getElementById('phone');
    const otpInput     = document.getElementById('otp-input');
    const errorAlert   = document.getElementById('error-alert');
    const successAlert = document.getElementById('success-alert');
    const phoneWrapper = document.getElementById('phoneWrapper');

    function getCSRFToken() {
        const el = document.querySelector('[name=csrfmiddlewaretoken]');
        return el ? el.value : '';
    }

    async function postJSON(url, body) {
        const res = await fetch(url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': getCSRFToken() },
            body: JSON.stringify(body)
        });
        return res.json();
    }

    function showError(msg) {
        document.getElementById('error-text').textContent = msg;
        errorAlert.classList.add('show');
        successAlert.classList.remove('show');
        phoneWrapper.classList.add('error-state');
        setTimeout(() => { errorAlert.classList.remove('show'); phoneWrapper.classList.remove('error-state'); }, 6000);
    }

    function showSuccess(msg) {
        document.getElementById('success-text').textContent = msg;
        successAlert.classList.add('show');
        errorAlert.classList.remove('show');
        phoneWrapper.classList.remove('error-state');
    }

    function setLoading(btn, isLoading, label) {
        if (isLoading) {
            btn.classList.add('loading');
            btn.disabled = true;
        } else {
            btn.classList.remove('loading');
            btn.disabled = false;
        }
        if (label) btn.querySelector('.btn-label').innerHTML = label;
    }

    function setupRecaptcha() {
        recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
            size: 'normal',
            callback: () => {},
            'expired-callback': () => { showError('reCAPTCHA expired. Please solve it again.'); }
        });
        recaptchaVerifier.render().catch(err => console.error('reCAPTCHA render:', err));
    }

    function resetRecaptcha() {
        if (recaptchaVerifier) {
            recaptchaVerifier.clear();
            document.getElementById('recaptcha-container').innerHTML = '';
        }
        setupRecaptcha();
    }

    function startResendCountdown() {
        countdown = 60;
        resendBtn.disabled = true;
        resendBtn.textContent = `Resend Code (${countdown}s)`;
        countdownInterval = setInterval(() => {
            countdown--;
            resendBtn.textContent = `Resend Code (${countdown}s)`;
            if (countdown <= 0) {
                clearInterval(countdownInterval);
                resendBtn.disabled    = false;
                resendBtn.textContent = 'Resend Code';
            }
        }, 1000);
    }

    // Input sanitisation
    phoneInput.addEventListener('input', function () {
        this.value = this.value.replace(/\D/g, '').slice(0, 10);
    });
    otpInput.addEventListener('input', function () {
        this.value = this.value.replace(/\D/g, '').slice(0, 6);
    });

    // Initialise reCAPTCHA
    setupRecaptcha();

    // ── STEP 1: CHECK USER + SEND OTP ─────────────────────────
    sendOtpBtn.addEventListener('click', async function () {
        const phone = phoneInput.value.trim();
        if (!phone || phone.length !== 10 || !/^\d{10}$/.test(phone)) {
            showError('Please enter a valid 10-digit mobile number');
            return;
        }
        const fullPhone = '+91' + phone;

        setLoading(sendOtpBtn, true, '<i class="fas fa-circle-notch fa-spin"></i> Checking...');

        try {
            const checkRes = await postJSON('/accounts/login/', { step: 'check', phone_number: phone });

            if (!checkRes.success) {
                showError(checkRes.error || 'No account found with this number.');
                setLoading(sendOtpBtn, false, '<i class="fas fa-mobile-alt"></i> Send Verification Code');
                return;
            }

            setLoading(sendOtpBtn, true, '<i class="fas fa-circle-notch fa-spin"></i> Sending OTP...');
            confirmationResult = await auth.signInWithPhoneNumber(fullPhone, recaptchaVerifier);

            otpSection.classList.add('show');
            otpInput.focus();
            setLoading(sendOtpBtn, false, '<i class="fas fa-check"></i> Code Sent');
            sendOtpBtn.disabled = true;
            showSuccess('Verification code sent to ' + fullPhone);
            startResendCountdown();

        } catch (error) {
            let msg = 'Failed to send verification code. Please try again.';
            if (error.code === 'auth/invalid-phone-number') msg = 'Invalid phone number format.';
            if (error.code === 'auth/too-many-requests')    msg = 'Too many attempts. Please wait and try later.';
            if (error.code === 'auth/captcha-check-failed') msg = 'reCAPTCHA verification failed. Please try again.';
            showError(msg);
            setLoading(sendOtpBtn, false, '<i class="fas fa-mobile-alt"></i> Send Verification Code');
            resetRecaptcha();
        }
    });

    // ── STEP 2: VERIFY OTP ────────────────────────────────────
    verifyBtn.addEventListener('click', async function () {
        const code = otpInput.value.trim();
        if (!code || code.length !== 6 || !/^\d{6}$/.test(code)) {
            showError('Please enter a valid 6-digit verification code');
            return;
        }
        setLoading(verifyBtn, true, '<i class="fas fa-circle-notch fa-spin"></i> Verifying...');

        try {
            const result      = await confirmationResult.confirm(code);
            const firebaseUser = result.user;
            const idToken     = await firebaseUser.getIdToken();

            setLoading(verifyBtn, true, '<i class="fas fa-circle-notch fa-spin"></i> Signing in...');

            const verifyRes = await postJSON('/accounts/login/', { step: 'verify', id_token: idToken });

            if (verifyRes.success) {
                showSuccess(verifyRes.message || 'Login successful!');
                setLoading(verifyBtn, true, '<i class="fas fa-check"></i> Success! Redirecting...');
                setTimeout(() => { window.location.href = verifyRes.redirect_url || '/'; }, 1000);
            } else {
                showError(verifyRes.error || 'Login failed. Please try again.');
                setLoading(verifyBtn, false, '<i class="fas fa-unlock"></i> Verify &amp; Sign In');
            }

        } catch (error) {
            let msg = 'Verification failed. Please try again.';
            if (error.code === 'auth/invalid-verification-code') msg = 'Invalid code. Please check and try again.';
            if (error.code === 'auth/code-expired')              msg = 'Code expired. Please request a new one.';
            showError(msg);
            setLoading(verifyBtn, false, '<i class="fas fa-unlock"></i> Verify &amp; Sign In');
        }
    });

    // ── RESEND ────────────────────────────────────────────────
    resendBtn.addEventListener('click', async function () {
        resendBtn.disabled    = true;
        resendBtn.textContent = 'Resending...';
        const fullPhone = '+91' + phoneInput.value.trim();
        resetRecaptcha();
        try {
            confirmationResult = await auth.signInWithPhoneNumber(fullPhone, recaptchaVerifier);
            showSuccess('New code sent to ' + fullPhone);
            startResendCountdown();
        } catch (error) {
            showError(error.code === 'auth/too-many-requests'
                ? 'Too many attempts. Wait before retrying.'
                : 'Failed to resend code.');
            resendBtn.disabled    = false;
            resendBtn.textContent = 'Resend Code';
        }
    });
});
</script>