Simple-Class-Attendance/index.php at main · imKenjo18/Simple-Class-Attendance · 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<?php
// Start the session to check for an existing login.
session_start();

// If the teacher's session variable is already set, they are logged in.
// Redirect them directly to the dashboard and stop executing this page.
if (isset($_SESSION['teacher_id'])) {
    header('Location: dashboard.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login & Registration - Class Attendance</title>

    <!-- We can reuse the main stylesheet for basic elements like fonts and buttons -->
    <?php
        $ver_style = @filemtime(__DIR__ . '/assets/css/style.css') ?: time();
        $ver_auth  = @filemtime(__DIR__ . '/assets/css/auth.css') ?: time();
        $ver_auth_js = @filemtime(__DIR__ . '/assets/js/auth.js') ?: time();
    ?>
    <link rel="stylesheet" href="assets/css/style.css?v=<?=$ver_style?>">
    <!-- We use a specific stylesheet for the unique layout of the login page -->
    <link rel="stylesheet" href="assets/css/auth.css?v=<?=$ver_auth?>">
</head>
<body>

    <div class="auth-container">
        <div class="auth-card">

            <!-- Login Form Container (Visible by default) -->
            <div id="login-form-container">
                <h1>Welcome Back</h1>
                <p>Please enter your details to sign in.</p>
                <div id="login-message" class="message"></div>

                <form id="login-form" novalidate>
                    <div class="form-group">
                        <label for="login-username">Username</label>
                        <input type="text" id="login-username" name="username" required autocomplete="username">
                    </div>
                    <div class="form-group">
                        <label for="login-password">Password</label>
                        <input type="password" id="login-password" name="password" required autocomplete="current-password">
                    </div>
                    <button type="submit" class="button primary full-width">Login</button>
                </form>

                <p class="auth-switch">First time here? <a href="#" id="show-register-link">Create an account</a></p>
            </div>

            <!-- Registration Form Container (Initially hidden) -->
            <div id="register-form-container" style="display: none;">
                <h1>Create Account</h1>
                <p>Let's get you set up for your first class.</p>
                <div id="register-message" class="message"></div>

                <form id="register-form" novalidate>
                    <div class="form-group">
                        <label for="register-username">Username</label>
                        <input type="text" id="register-username" name="username" required autocomplete="username">
                    </div>
                    <div class="form-group">
                        <label for="register-password">Password</label>
                        <input type="password" id="register-password" name="password" required autocomplete="new-password">
                    </div>
                    <div class="form-group">
                        <label for="confirm-password">Confirm Password</label>
                        <input type="password" id="confirm-password" name="confirm_password" required autocomplete="new-password">
                    </div>
                    <button type="submit" class="button primary full-width">Register</button>
                </form>

                <p class="auth-switch">Already have an account? <a href="#" id="show-login-link">Sign in here</a></p>
            </div>

        </div>
    </div>

    <!-- The JavaScript for this page is separate from the main app's JS -->
    <script src="assets/js/auth.js?v=<?=$ver_auth_js?>"></script>
    <script>
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
            navigator.serviceWorker.register('/sw.js').catch(function(err){
                console.warn('SW registration failed:', err);
            });
        });
    }
    </script>

</body>
</html>