client-server/index.html at main · Fire-OAuth/client-server · 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
<!DOCTYPE html>
<html lang="en" style="height: 100%; margin: 0;">
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content="The Home Page after Logged In" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Home Page</title>
		<script>
			if (window.location.hostname !== "localhost") {
				if (location.protocol !== "https:") {
					location.replace(
						`https:${location.href.substring(
							location.protocol.length
						)}`
					)
				}
			}

			if (localStorage.getItem("userData") === null) {
				window.location.href = "/login"
			}
		</script>
	</head>
	<body
		style="
			height: 100%;
			margin: 0;
			font-weight: 300;
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
				Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
				sans-serif;
		"
	>
		<div
			class="wrapper"
			style="
				height: 90%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
                text-align: center;
			"
		>
			<div
				class="details"
				style="
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 20px;
					padding: 1rem;
					border-radius: 5px;
					box-shadow: 0 0 8px 0px #44444444;
                    max-width: 80%;
				"
			>
				<h1 class="name" style="margin: 0"></h1>
				<div
					class="imageContainer"
					style="padding: 10px; height: 10rem; width: 10rem"
				>
					<img class="image" alt="profile picture" />
				</div>
				<h2 class="email" style="margin: 0"></h2>
			</div>
			<br><br>
			<button type="button" style="    min-width: 5rem;margin: 0 auto;padding: 0.5em 0.8em; color: #FFF; background-color: #0070f3; border-radius: 8px; font-size: 1.2rem; border: none; outline: none; font-family: system-ui; cursor: pointer;" id="logoutButton">Logout</button>
		</div>
		<script>
			let name = document.querySelector(".name")
			let image = document.querySelector(".image")
			let email = document.querySelector(".email")
			let userData = JSON.parse(localStorage.getItem("userData"))
			name.innerHTML = `Welcome ${userData.firstName} ${userData.lastName}!`
			image.src = userData.profilePic
			email.innerHTML = `Your email is: <a style="text-decoration: none;color: #0072B5;" href="mailto:${userData.email}">${userData.email}</a>`

			document.querySelector("#logoutButton").addEventListener("click", () => {
				localStorage.removeItem("userData")
				window.location.href = "/login.html"
			})

		</script>
	</body>
</html>