-
Notifications
You must be signed in to change notification settings - Fork 69
Expand file tree
/
Copy path2fa-manage.html
More file actions
239 lines (226 loc) · 11.4 KB
/
2fa-manage.html
File metadata and controls
239 lines (226 loc) · 11.4 KB
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2FA Management - ExpenseFlow</title>
<link rel="stylesheet" href="2fa-manage.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>🔐 Two-Factor Authentication</h1>
<p>Manage your account security</p>
</div>
<div class="content">
<!-- 2FA Status Section -->
<div class="card" id="status-card">
<div class="card-header">
<h2>2FA Status</h2>
</div>
<div class="card-body">
<div class="status-info" id="status-info">
<div class="loading">Loading...</div>
</div>
</div>
</div>
<!-- Enable/Disable 2FA Section -->
<div class="card" id="enable-disable-card" style="display: none;">
<div class="card-header">
<h2>Enable Two-Factor Authentication</h2>
</div>
<div class="card-body">
<p>Protect your account with two-factor authentication. Choose how you want to verify your identity when logging in.</p>
<button class="btn btn-primary" onclick="startTwoFASetup()">Start Setup</button>
</div>
</div>
<!-- Disable 2FA Section -->
<div class="card" id="disable-card" style="display: none;">
<div class="card-header">
<h2>Disable Two-Factor Authentication</h2>
</div>
<div class="card-body">
<p class="warning">⚠️ Disabling 2FA will reduce your account security. Your account will no longer require 2FA verification during login.</p>
<button class="btn btn-danger" onclick="showDisableConfirm()">Disable 2FA</button>
</div>
</div>
<!-- Backup Codes Section -->
<div class="card" id="backup-codes-card" style="display: none;">
<div class="card-header">
<h2>Backup Codes</h2>
</div>
<div class="card-body">
<p>Use backup codes to access your account if you lose access to your 2FA device.</p>
<div id="backup-codes-info"></div>
<div class="button-group">
<button class="btn btn-secondary" onclick="downloadBackupCodes()">📥 Download</button>
<button class="btn btn-secondary" onclick="printBackupCodes()">🖨️ Print</button>
<button class="btn btn-secondary" onclick="regenerateBackupCodes()">🔄 Regenerate</button>
</div>
</div>
</div>
<!-- 2FA Method Section -->
<div class="card" id="method-card" style="display: none;">
<div class="card-header">
<h2>2FA Method</h2>
</div>
<div class="card-body">
<div class="method-info" id="method-info"></div>
<button class="btn btn-secondary" onclick="switchTwoFAMethod()">Change Method</button>
</div>
</div>
<!-- Adaptive MFA Section -->
<div class="card" id="adaptive-mfa-card" style="display: none;">
<div class="card-header">
<h2>🤖 Adaptive MFA Orchestrator</h2>
<span class="beta-badge">BETA</span>
</div>
<div class="card-body">
<p>Enable adaptive multi-factor authentication that selects challenges based on risk assessment and user behavior patterns.</p>
<div id="adaptive-status" class="adaptive-status">
<div class="loading">Loading adaptive settings...</div>
</div>
<div class="adaptive-controls" id="adaptive-controls" style="display: none;">
<div class="adaptive-toggle">
<label class="toggle-label">
<input type="checkbox" id="adaptive-enabled" onchange="toggleAdaptiveMFA()">
<span class="toggle-slider"></span>
Enable Adaptive MFA
</label>
</div>
<div class="adaptive-settings" id="adaptive-settings" style="display: none;">
<h3>Risk Thresholds</h3>
<div class="threshold-controls">
<div class="threshold-item">
<label for="high-threshold">High Risk Threshold:</label>
<input type="range" id="high-threshold" min="0.5" max="1.0" step="0.1" value="0.8" onchange="updateThresholdDisplay('high')">
<span id="high-threshold-value">0.8</span>
</div>
<div class="threshold-item">
<label for="medium-threshold">Medium Risk Threshold:</label>
<input type="range" id="medium-threshold" min="0.2" max="0.8" step="0.1" value="0.5" onchange="updateThresholdDisplay('medium')">
<span id="medium-threshold-value">0.5</span>
</div>
</div>
<button class="btn btn-primary" onclick="saveAdaptiveSettings()">Save Settings</button>
</div>
<div class="adaptive-methods" id="adaptive-methods">
<h3>Available Challenge Methods</h3>
<div class="method-grid" id="method-grid">
<div class="loading">Loading methods...</div>
</div>
</div>
<div class="adaptive-test">
<h3>Test Confidence Scoring</h3>
<button class="btn btn-secondary" onclick="testConfidenceScoring()">🧪 Test Current Session</button>
<div id="confidence-result" class="confidence-result" style="display: none;"></div>
</div>
</div>
</div>
</div>
<!-- Trusted Devices Section -->
<div class="card">
<div class="card-header">
<h2>Trusted Devices</h2>
</div>
<div class="card-body">
<p>Devices you've verified on this network. Verified devices can skip 2FA verification.</p>
<div id="devices-list" class="devices-list">
<div class="loading">Loading devices...</div>
</div>
<button class="btn btn-secondary" onclick="addNewDevice()">+ Add Device</button>
</div>
</div>
<!-- Recovery Settings Section -->
<div class="card">
<div class="card-header">
<h2>Recovery Options</h2>
</div>
<div class="card-body">
<div class="recovery-option">
<h3>Recovery Email</h3>
<p>An additional email address to receive recovery codes</p>
<div id="recovery-email-info"></div>
<button class="btn btn-secondary" onclick="setRecoveryEmail()">Set Recovery Email</button>
</div>
</div>
</div>
<!-- Activity Log Section -->
<div class="card">
<div class="card-header">
<h2>Security Activity</h2>
</div>
<div class="card-body">
<div id="activity-log" class="activity-log">
<div class="loading">Loading activity...</div>
</div>
</div>
</div>
</div>
</div>
<!-- Disable Confirmation Modal -->
<div id="disable-modal" class="modal" style="display: none;">
<div class="modal-content">
<div class="modal-header">
<h2>Confirm Disable 2FA</h2>
<button class="modal-close" onclick="closeModal()">×</button>
</div>
<div class="modal-body">
<p class="warning">⚠️ <strong>Warning:</strong> Disabling 2FA will make your account less secure.</p>
<p>Are you sure you want to disable two-factor authentication?</p>
<div class="form-group">
<label for="disable-password">Enter your password to confirm:</label>
<input type="password" id="disable-password" placeholder="Your password" />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
<button class="btn btn-danger" onclick="confirmDisable()">Disable 2FA</button>
</div>
</div>
</div>
<!-- Verify Device Modal -->
<div id="verify-device-modal" class="modal" style="display: none;">
<div class="modal-content">
<div class="modal-header">
<h2>Verify Device</h2>
<button class="modal-close" onclick="closeModal()">×</button>
</div>
<div class="modal-body">
<p>Check your email for a verification code, then enter it below:</p>
<div class="form-group">
<label for="verify-code">Verification Code:</label>
<input type="text" id="verify-code" placeholder="000000" maxlength="6" />
</div>
<div id="verify-error" class="error-message"></div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
<button class="btn btn-primary" onclick="confirmVerifyDevice()">Verify</button>
</div>
</div>
</div>
<!-- Recovery Email Modal -->
<div id="recovery-email-modal" class="modal" style="display: none;">
<div class="modal-content">
<div class="modal-header">
<h2>Set Recovery Email</h2>
<button class="modal-close" onclick="closeModal()">×</button>
</div>
<div class="modal-body">
<p>Set an additional email address to receive recovery codes:</p>
<div class="form-group">
<label for="recovery-email">Recovery Email:</label>
<input type="email" id="recovery-email" placeholder="your.backup@email.com" />
</div>
<div id="recovery-error" class="error-message"></div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
<button class="btn btn-primary" onclick="confirmRecoveryEmail()">Save</button>
</div>
</div>
</div>
<script src="2fa-manage.js"></script>
</body>
</html>