CabMate/profile.html at Source-Code · abhisheksingh995639/CabMate · 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile - CabMate</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container header-flex">
            <h1>CabShare</h1>
            <nav aria-label="Main navigation">
                <ul class="nav-list">
                    <li><a href="dashboard.html">Dashboard</a></li>
                    <li><a href="profile.html" aria-current="page">Profile</a></li>
                    <li><a href="login.html">Logout</a></li>
                </ul>
            </nav>
            <button class="hamburger" aria-label="Toggle navigation" aria-expanded="false">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </header>
    <main>
        <div class="profile-container">
            <h2 id="profilePageTitle">Profile</h2>
            <div class="profile-card">
                <!--
                <div class="profile-pic-container" style="text-align: center; margin-bottom: 20px;">
                    <img id="profilePic" src="https://placehold.co/100x100/e0f2fe/0369a1?text=User" alt="Profile Picture" style="width:100px;height:100px;border-radius:50%;object-fit:cover;border:2px solid var(--accent);">
                    <input type="file" id="profilePicInput" accept="image/*" style="display: none;">
                    <button onclick="document.getElementById('profilePicInput').click();" style="margin-top: 10px; padding: 6px 12px; border-radius: 8px; background: var(--accent); color: #fff; border: none; cursor: pointer;">Change Photo</button>
                </div>
                -->
                <div class="profile-row">
                    <span class="profile-label">Full Name:</span>
                    <span id="profileName" class="profile-value">Loading...</span>
                </div>
                <div class="profile-row">
                    <span class="profile-label">Batch:</span>
                    <span id="profileBatch" class="profile-value">Loading...</span>
                </div>
                <div class="profile-row">
                    <span class="profile-label">Registration Number:</span>
                    <span id="profileRegno" class="profile-value">Loading...</span>
                </div>
                <div class="profile-row">
                    <span class="profile-label">Email:</span>
                    <span id="profileEmail" class="profile-value">Loading...</span>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="container">
            <p>&copy; 2025 CabMate. All rights reserved.</p>
        </div>
    </footer>
    <script src="script.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', async function() {
        const urlParams = new URLSearchParams(window.location.search);
        const targetRegno = urlParams.get('regno'); // Get the regno from the URL

        const profilePageTitle = document.getElementById('profilePageTitle');
        const profileName = document.getElementById('profileName');
        const profileBatch = document.getElementById('profileBatch');
        const profileRegno = document.getElementById('profileRegno');
        const profileEmail = document.getElementById('profileEmail');

        if (targetRegno) {
            // Fetch profile data from the backend based on the regno in the URL
            try {
                const response = await fetch(`https://cabmate-backend.onrender.com/api/users/${encodeURIComponent(targetRegno)}`);
                if (response.ok) {
                    const userData = await response.json();
                    profileName.textContent = userData.name || 'N/A';
                    profileBatch.textContent = userData.batch || 'N/A';
                    profileRegno.textContent = userData.regno || 'N/A';
                    profileEmail.textContent = userData.email || 'N/A';
                } else {
                    const errorData = await response.json();
                    profilePageTitle.textContent = 'Profile Not Found';
                    profileName.textContent = 'Error loading profile.';
                    profileBatch.textContent = '';
                    profileRegno.textContent = '';
                    profileEmail.textContent = `Error: ${errorData.message || response.statusText}`;
                    console.error('Failed to fetch user profile:', errorData);
                }
            } catch (error) {
                profilePageTitle.textContent = 'Error';
                profileName.textContent = 'An error occurred.';
                profileBatch.textContent = '';
                profileRegno.textContent = '';
                profileEmail.textContent = `Network Error: ${error.message}`;
                console.error('Network error fetching user profile:', error);
            }
        } else {
            // If no regno in URL, load current logged-in user's profile from localStorage
            const currentUser = JSON.parse(localStorage.getItem('cabshareUser')) || {};
            if (currentUser.regno) {
                profilePageTitle.textContent = 'Your Profile';
                profileName.textContent = currentUser.name || 'N/A';
                profileBatch.textContent = currentUser.batch || 'N/A';
                profileRegno.textContent = currentUser.regno || 'N/A';
                profileEmail.textContent = currentUser.email || 'N/A';
            } else {
                profilePageTitle.textContent = 'Profile';
                profileName.textContent = 'Please log in to view a profile.';
                profileBatch.textContent = '';
                profileRegno.textContent = '';
                profileEmail.textContent = '';
            }
        }

        // Optional: Profile picture handling (if you want to re-enable this)
        /*
        const savedPic = localStorage.getItem('cabshareProfilePic');
        if (savedPic) {
            document.getElementById('profilePic').src = savedPic;
        }
        document.getElementById('profilePicInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = function(evt) {
                document.getElementById('profilePic').src = evt.target.result;
                localStorage.setItem('cabshareProfilePic', evt.target.result);
            };
            reader.readAsDataURL(file);
        });
        */
    });
    </script>
</body>
</html>