User-Management-System/index.html at main · mdrajatech03/User-Management-System · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auth | RAJATECH</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
    <div class="auth-container">
        <div class="auth-card">
            <h2 id="authTitle">Login to <span style="color:var(--primary)">RAJATECH</span></h2>
            <p id="authDesc" style="color:#94a3b8; margin-bottom:20px; font-size: 13px;">Manage your Digital Identity</p>

            <div class="input-box" style="margin-bottom:15px;">
                <input type="email" id="authEmail" placeholder="Email Address" required>
            </div>
            <div class="input-box" style="margin-bottom:20px;">
                <input type="password" id="authPass" placeholder="Password" required>
            </div>

            <button id="authBtn" class="btn btn-primary">Login Now</button>

            <p style="margin-top:20px; font-size:14px;">
                <span id="toggleText">Don't have an account?</span>
                <a id="toggleLink" style="color:var(--primary); cursor:pointer; font-weight: bold;">Register</a>
            </p>
        </div>
    </div>

    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
        import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-auth.js";

        const firebaseConfig = {
            apiKey: "AIzaSyCMwFJfbkdFjxWzNhMccXs9FbhqntSKdRM",
            authDomain: "portfolio-auth-19a5e.firebaseapp.com",
            projectId: "portfolio-auth-19a5e",
            storageBucket: "portfolio-auth-19a5e.firebasestorage.app",
            messagingSenderId: "211741915178",
            appId: "1:211741915178:web:b96f48f37ef2477b83ab53"
        };

        const app = initializeApp(firebaseConfig);
        const auth = getAuth(app);

        let isLogin = true;
        const authBtn = document.getElementById('authBtn');
        const toggleLink = document.getElementById('toggleLink');

        toggleLink.onclick = () => {
            isLogin = !isLogin;
            document.getElementById('authTitle').innerText = isLogin ? "Login to RAJATECH" : "Register on RAJATECH";
            authBtn.innerText = isLogin ? "Login Now" : "Create Account";
            document.getElementById('toggleText').innerText = isLogin ? "New here?" : "Joined already?";
            toggleLink.innerText = isLogin ? "Register" : "Login";
        };

        authBtn.onclick = async () => {
            const email = document.getElementById('authEmail').value;
            const pass = document.getElementById('authPass').value;
            if(!email || !pass) return Swal.fire('Error', 'Input fields empty', 'error');

            Swal.fire({title: 'Authenticating...', didOpen: () => Swal.showLoading()});
            try {
                if(isLogin) await signInWithEmailAndPassword(auth, email, pass);
                else await createUserWithEmailAndPassword(auth, email, pass);
                window.location.href = "portfolio.html";
            } catch (e) {
                Swal.fire('Auth Error', 'Invalid credentials or network issue', 'error');
            }
        };
    </script>
</body>
</html>