-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsettings.html
147 lines (128 loc) · 4.7 KB
/
settings.html
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
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="settings.css">
<title>Settings</title>
</head>
<body>
<!-- Exit Image in the top-right corner -->
<a href="home.html">
<img src="pngs\exit.png" alt="Exit" class="exit-icon">
</a>
<section>
<!-- Background -->
<div class="greyBG"></div>
<!-- Title -->
<div class="settingsTitle">
<p>Settings</p>
</div>
<!-- Username Field -->
<div class="field-container username">
<label for="username-display">Username</label>
<input type="text" id="username-display" placeholder="N/A" readonly>
<button class="change-button" id="username-btn" onclick="toggleEdit('username')">Change</button>
</div>
<!-- Password Field -->
<div class="field-container password">
<label for="password-display">Password</label>
<input type="text" id="password-display" placeholder="N/A" readonly>
<button class="change-button" id="password-btn" onclick="toggleEdit('password')">Change</button>
</div>
<!-- Notifications Header -->
<div class="notificationHeader">
<p>Notifications</p>
</div>
<!-- Notifications Description -->
<div class="notification-description">
<p>Send daily notifications on habits</p>
</div>
<!-- Notifications Toggle Switch -->
<div class="notification-switch-container">
<div class="toggle-wrapper">
<label class="switch">
<input type="checkbox" id="notification-toggle" onclick="toggleNotification()">
<span class="slider"></span>
</label>
</div>
</div>
<!-- Social Header -->
<div class="socialHeader">
<p>Social</p>
</div>
<!-- Social Description -->
<div class="social-description">
<p>Share habits with friends</p>
</div>
<!-- Social Toggle Switch -->
<div class="social-switch-container">
<div class="toggle-wrapper">
<label class="switch">
<input type="checkbox" id="social-toggle" onclick="toggleSocial()">
<span class="slider"></span>
</label>
</div>
</div>
</section>
<script>
// Load stored data into fields
window.onload = function() {
const email = localStorage.getItem('userEmail');
const password = localStorage.getItem('userPassword');
// Display stored data or default to "N/A"
document.getElementById('username-display').value = email || '';
document.getElementById('username-display').placeholder = email ? '' : 'N/A';
document.getElementById('password-display').value = password || '';
document.getElementById('password-display').placeholder = password ? '' : 'N/A';
// Set notification switch state
const isNotificationEnabled = localStorage.getItem('sendDailyNotifications') === 'true';
document.getElementById('notification-toggle').checked = isNotificationEnabled;
// Set social switch state
const isSocialEnabled = localStorage.getItem('shareWithFriends') === 'true';
document.getElementById('social-toggle').checked = isSocialEnabled;
};
// Toggle editing for username and password
function toggleEdit(field) {
const input = document.getElementById(`${field}-display`);
const button = document.getElementById(`${field}-btn`);
if (input.readOnly) {
// Enable editing
input.readOnly = false;
input.focus();
button.textContent = 'Save';
} else {
// Save changes and disable editing
const value = input.value;
if (field === 'username') {
localStorage.setItem('userEmail', value);
} else if (field === 'password') {
localStorage.setItem('userPassword', value);
}
input.readOnly = true;
button.textContent = 'Change';
}
}
// Toggle the setting for daily notifications
function toggleNotification() {
const isChecked = document.getElementById('notification-toggle').checked;
if (isChecked) {
console.log("Daily notifications enabled.");
localStorage.setItem('sendDailyNotifications', 'true');
} else {
console.log("Daily notifications disabled.");
localStorage.setItem('sendDailyNotifications', 'false');
}
}
// Toggle the setting for sharing habits with friends
function toggleSocial() {
const isChecked = document.getElementById('social-toggle').checked;
if (isChecked) {
console.log("Sharing habits with friends enabled.");
localStorage.setItem('shareWithFriends', 'true');
} else {
console.log("Sharing habits with friends disabled.");
localStorage.setItem('shareWithFriends', 'false');
}
}
</script>
</body>
</html>