refactor(frontend): extract security, sessions, DID document styles #59

+2 -170

frontend/src/components/dashboard/DidDocumentContent.svelte

··· 150 150 </div> 151 151 <code class="item-key">{vm.publicKeyMultibase}</code> 152 152 </div> 153 153 - <button type="button" class="remove-btn" onclick={() => removeVerificationMethod(vm.id)}> 153 153 + <button type="button" class="sm danger-outline" onclick={() => removeVerificationMethod(vm.id)}> 154 154 {$_('didEditor.removeKey')} 155 155 </button> 156 156 </li> ··· 194 194 {#each alsoKnownAs as handle} 195 195 <li class="list-item"> 196 196 <span class="item-handle">{handle}</span> 197 197 - <button type="button" class="remove-btn" onclick={() => removeHandle(handle)}> 197 197 + <button type="button" class="sm danger-outline" onclick={() => removeHandle(handle)}> 198 198 {$_('didEditor.removeHandle')} 199 199 </button> 200 200 </li> ··· 245 245 </div> 246 246 {/if} 247 247 </div> 248 248 - 249 249 - <style> 250 250 - .did-editor { 251 251 - max-width: var(--width-lg); 252 252 - } 253 253 - 254 254 - .loading, 255 255 - .empty { 256 256 - color: var(--text-secondary); 257 257 - padding: var(--space-4); 258 258 - } 259 259 - 260 260 - section { 261 261 - background: var(--bg-secondary); 262 262 - padding: var(--space-5); 263 263 - border-radius: var(--radius-lg); 264 264 - margin-bottom: var(--space-5); 265 265 - } 266 266 - 267 267 - section h3 { 268 268 - margin: 0 0 var(--space-2) 0; 269 269 - font-size: var(--text-base); 270 270 - } 271 271 - 272 272 - .help-section { 273 273 - background: var(--bg-card); 274 274 - border: 1px solid var(--border-color); 275 275 - } 276 276 - 277 277 - .help-text { 278 278 - color: var(--text-secondary); 279 279 - font-size: var(--text-sm); 280 280 - margin: 0; 281 281 - line-height: 1.5; 282 282 - } 283 283 - 284 284 - .description { 285 285 - color: var(--text-secondary); 286 286 - font-size: var(--text-sm); 287 287 - margin: 0 0 var(--space-4) 0; 288 288 - } 289 289 - 290 290 - .list { 291 291 - list-style: none; 292 292 - padding: 0; 293 293 - margin: 0 0 var(--space-4) 0; 294 294 - display: flex; 295 295 - flex-direction: column; 296 296 - gap: var(--space-2); 297 297 - } 298 298 - 299 299 - .list-item { 300 300 - display: flex; 301 301 - justify-content: space-between; 302 302 - align-items: flex-start; 303 303 - padding: var(--space-3); 304 304 - background: var(--bg-card); 305 305 - border: 1px solid var(--border-color); 306 306 - border-radius: var(--radius-md); 307 307 - gap: var(--space-3); 308 308 - } 309 309 - 310 310 - .item-info { 311 311 - display: flex; 312 312 - flex-direction: column; 313 313 - gap: var(--space-1); 314 314 - min-width: 0; 315 315 - } 316 316 - 317 317 - .item-header { 318 318 - display: flex; 319 319 - align-items: center; 320 320 - gap: var(--space-2); 321 321 - } 322 322 - 323 323 - .item-id { 324 324 - font-weight: var(--font-medium); 325 325 - font-family: var(--font-mono); 326 326 - font-size: var(--text-sm); 327 327 - } 328 328 - 329 329 - .item-type { 330 330 - font-size: var(--text-xs); 331 331 - padding: var(--space-1) var(--space-2); 332 332 - background: var(--accent); 333 333 - color: var(--text-inverse); 334 334 - border-radius: var(--radius-sm); 335 335 - } 336 336 - 337 337 - .item-key { 338 338 - font-family: var(--font-mono); 339 339 - font-size: var(--text-xs); 340 340 - color: var(--text-secondary); 341 341 - word-break: break-all; 342 342 - } 343 343 - 344 344 - .item-handle { 345 345 - font-family: var(--font-mono); 346 346 - font-size: var(--text-sm); 347 347 - } 348 348 - 349 349 - .remove-btn { 350 350 - flex-shrink: 0; 351 351 - padding: var(--space-2) var(--space-3); 352 352 - font-size: var(--text-sm); 353 353 - background: transparent; 354 354 - border: 1px solid var(--error-border); 355 355 - color: var(--error-text); 356 356 - border-radius: var(--radius-md); 357 357 - cursor: pointer; 358 358 - } 359 359 - 360 360 - .remove-btn:hover { 361 361 - background: var(--error-bg); 362 362 - } 363 363 - 364 364 - .field { 365 365 - display: flex; 366 366 - flex-direction: column; 367 367 - gap: var(--space-1); 368 368 - } 369 369 - 370 370 - .field label { 371 371 - font-size: var(--text-sm); 372 372 - font-weight: var(--font-medium); 373 373 - color: var(--text-secondary); 374 374 - } 375 375 - 376 376 - .add-form { 377 377 - display: grid; 378 378 - grid-template-columns: 1fr 2fr auto; 379 379 - gap: var(--space-3); 380 380 - align-items: end; 381 381 - } 382 382 - 383 383 - .add-form.single { 384 384 - grid-template-columns: 1fr auto; 385 385 - } 386 386 - 387 387 - .preview-section pre { 388 388 - background: var(--bg-card); 389 389 - border: 1px solid var(--border-color); 390 390 - border-radius: var(--radius-md); 391 391 - padding: var(--space-4); 392 392 - overflow-x: auto; 393 393 - font-size: var(--text-xs); 394 394 - font-family: var(--font-mono); 395 395 - } 396 396 - 397 397 - .actions { 398 398 - display: flex; 399 399 - justify-content: flex-end; 400 400 - } 401 401 - 402 402 - @media (max-width: 600px) { 403 403 - .add-form { 404 404 - grid-template-columns: 1fr; 405 405 - } 406 406 - 407 407 - .list-item { 408 408 - flex-direction: column; 409 409 - } 410 410 - 411 411 - .remove-btn { 412 412 - width: 100%; 413 413 - } 414 414 - } 415 415 - </style>

+15 -632

frontend/src/components/dashboard/SecurityContent.svelte

··· 631 631 {#if editingPasskeyId === passkey.id} 632 632 <div class="passkey-edit"> 633 633 <input type="text" bind:value={editPasskeyName} placeholder={$_('security.passkeyName')} /> 634 634 - <button type="button" class="small" onclick={handleSavePasskeyName}>{$_('common.save')}</button> 635 635 - <button type="button" class="small secondary" onclick={cancelEditPasskey}>{$_('common.cancel')}</button> 634 634 + <button type="button" class="sm" onclick={handleSavePasskeyName}>{$_('common.save')}</button> 635 635 + <button type="button" class="sm secondary" onclick={cancelEditPasskey}>{$_('common.cancel')}</button> 636 636 </div> 637 637 {:else} 638 638 <div class="passkey-info"> ··· 645 645 </span> 646 646 </div> 647 647 <div class="passkey-actions"> 648 648 - <button type="button" class="small secondary" onclick={() => startEditPasskey(passkey)}>{$_('security.rename')}</button> 648 648 + <button type="button" class="sm secondary" onclick={() => startEditPasskey(passkey)}>{$_('security.rename')}</button> 649 649 {#if hasPassword || passkeys.length > 1} 650 650 - <button type="button" class="small danger" onclick={() => handleDeletePasskey(passkey.id)}>{$_('security.deletePasskey')}</button> 650 650 + <button type="button" class="sm danger-outline" onclick={() => handleDeletePasskey(passkey.id)}>{$_('security.deletePasskey')}</button> 651 651 {/if} 652 652 </div> 653 653 {/if} ··· 690 690 <form class="inline-form" onsubmit={handleRegenerateBackupCodes}> 691 691 <h4>{$_('security.regenerateBackupCodes')}</h4> 692 692 <p class="warning-text">{$_('security.regenerateConfirm')}</p> 693 693 - <div class="field"> 693 693 + <div> 694 694 <label for="regen-password">{$_('security.password')}</label> 695 695 <input 696 696 id="regen-password" ··· 701 701 required 702 702 /> 703 703 </div> 704 704 - <div class="field"> 704 704 + <div> 705 705 <label for="regen-code">{$_('security.totpCode')}</label> 706 706 <input 707 707 id="regen-code" ··· 729 729 <form class="inline-form danger-form" onsubmit={handleDisableTotp}> 730 730 <h4>{$_('security.disableTotp')}</h4> 731 731 <p class="warning-text">{$_('security.disableTotpWarning')}</p> 732 732 - <div class="field"> 732 732 + <div> 733 733 <label for="disable-password">{$_('security.password')}</label> 734 734 <input 735 735 id="disable-password" ··· 740 740 required 741 741 /> 742 742 </div> 743 743 - <div class="field"> 743 743 + <div> 744 744 <label for="disable-code">{$_('security.totpCode')}</label> 745 745 <input 746 746 id="disable-code" ··· 833 833 {#if showChangePasswordForm} 834 834 <form class="inline-form" onsubmit={handleChangePassword}> 835 835 <h4>{$_('security.changePassword')}</h4> 836 836 - <div class="field"> 836 836 + <div> 837 837 <label for="current-password">{$_('security.currentPassword')}</label> 838 838 <input 839 839 id="current-password" ··· 844 844 required 845 845 /> 846 846 </div> 847 847 - <div class="field"> 847 847 + <div> 848 848 <label for="new-password">{$_('security.newPassword')}</label> 849 849 <input 850 850 id="new-password" ··· 856 856 minlength="8" 857 857 /> 858 858 </div> 859 859 - <div class="field"> 859 859 + <div> 860 860 <label for="confirm-password">{$_('security.confirmPassword')}</label> 861 861 <input 862 862 id="confirm-password" ··· 902 902 {:else} 903 903 <form class="inline-form" onsubmit={handleSetPassword}> 904 904 <h4>{$_('security.setPassword')}</h4> 905 905 - <div class="field"> 905 905 + <div> 906 906 <label for="set-new-password">{$_('security.newPassword')}</label> 907 907 <input 908 908 id="set-new-password" ··· 914 914 minlength="8" 915 915 /> 916 916 </div> 917 917 - <div class="field"> 917 917 + <div> 918 918 <label for="set-confirm-password">{$_('security.confirmPassword')}</label> 919 919 <input 920 920 id="set-confirm-password" ··· 958 958 </div> 959 959 <button 960 960 type="button" 961 961 - class="small danger" 961 961 + class="sm danger-outline" 962 962 onclick={() => handleUnlinkAccount(account.id)} 963 963 disabled={unlinkingId === account.id} 964 964 > ··· 1064 1064 </div> 1065 1065 {:else} 1066 1066 <span class="device-name">{device.friendlyName || parseUserAgent(device.userAgent)}</span> 1067 1067 - <button type="button" class="icon-btn" onclick={() => startEditDevice(device)} title={$_('security.rename')}> 1067 1067 + <button type="button" class="icon" onclick={() => startEditDevice(device)} title={$_('security.rename')}> 1068 1068 &#9998; 1069 1069 </button> 1070 1070 {/if} ··· 1109 1109 onSuccess={handleReauthSuccess} 1110 1110 onCancel={handleReauthCancel} 1111 1111 /> 1112 1112 - 1113 1113 - <style> 1114 1114 - .security { 1115 1115 - max-width: var(--width-lg); 1116 1116 - } 1117 1117 - 1118 1118 - .loading { 1119 1119 - color: var(--text-secondary); 1120 1120 - padding: var(--space-4); 1121 1121 - } 1122 1122 - 1123 1123 - section { 1124 1124 - background: var(--bg-secondary); 1125 1125 - padding: var(--space-5); 1126 1126 - border-radius: var(--radius-lg); 1127 1127 - margin-bottom: var(--space-5); 1128 1128 - } 1129 1129 - 1130 1130 - section h3 { 1131 1131 - margin: 0 0 var(--space-4) 0; 1132 1132 - font-size: var(--text-base); 1133 1133 - } 1134 1134 - 1135 1135 - .status { 1136 1136 - display: block; 1137 1137 - padding: var(--space-2) var(--space-3); 1138 1138 - border-radius: var(--radius-md); 1139 1139 - font-size: var(--text-sm); 1140 1140 - margin-bottom: var(--space-4); 1141 1141 - width: fit-content; 1142 1142 - } 1143 1143 - 1144 1144 - .status.success { 1145 1145 - background: var(--success-bg); 1146 1146 - color: var(--success-text); 1147 1147 - } 1148 1148 - 1149 1149 - .status.warning { 1150 1150 - background: var(--warning-bg); 1151 1151 - color: var(--warning-text); 1152 1152 - } 1153 1153 - 1154 1154 - .status.info { 1155 1155 - background: var(--accent-muted); 1156 1156 - color: var(--accent); 1157 1157 - } 1158 1158 - 1159 1159 - .passkey-list { 1160 1160 - list-style: none; 1161 1161 - padding: 0; 1162 1162 - margin: 0 0 var(--space-4) 0; 1163 1163 - display: flex; 1164 1164 - flex-direction: column; 1165 1165 - gap: var(--space-2); 1166 1166 - } 1167 1167 - 1168 1168 - .passkey-item { 1169 1169 - display: flex; 1170 1170 - justify-content: space-between; 1171 1171 - align-items: center; 1172 1172 - padding: var(--space-3); 1173 1173 - background: var(--bg-card); 1174 1174 - border: 1px solid var(--border-color); 1175 1175 - border-radius: var(--radius-md); 1176 1176 - gap: var(--space-3); 1177 1177 - } 1178 1178 - 1179 1179 - .passkey-info { 1180 1180 - display: flex; 1181 1181 - flex-direction: column; 1182 1182 - gap: var(--space-1); 1183 1183 - min-width: 0; 1184 1184 - } 1185 1185 - 1186 1186 - .passkey-name { 1187 1187 - font-weight: var(--font-medium); 1188 1188 - } 1189 1189 - 1190 1190 - .passkey-meta { 1191 1191 - font-size: var(--text-xs); 1192 1192 - color: var(--text-secondary); 1193 1193 - } 1194 1194 - 1195 1195 - .passkey-actions { 1196 1196 - display: flex; 1197 1197 - gap: var(--space-2); 1198 1198 - flex-shrink: 0; 1199 1199 - } 1200 1200 - 1201 1201 - .passkey-edit { 1202 1202 - display: flex; 1203 1203 - gap: var(--space-2); 1204 1204 - align-items: center; 1205 1205 - width: 100%; 1206 1206 - } 1207 1207 - 1208 1208 - .passkey-edit input { 1209 1209 - flex: 1; 1210 1210 - } 1211 1211 - 1212 1212 - .add-passkey { 1213 1213 - display: flex; 1214 1214 - gap: var(--space-2); 1215 1215 - margin-top: var(--space-4); 1216 1216 - padding-top: var(--space-4); 1217 1217 - border-top: 1px solid var(--border-color); 1218 1218 - } 1219 1219 - 1220 1220 - .add-passkey input { 1221 1221 - flex: 1; 1222 1222 - } 1223 1223 - 1224 1224 - .password-actions { 1225 1225 - display: flex; 1226 1226 - gap: var(--space-2); 1227 1227 - flex-wrap: wrap; 1228 1228 - } 1229 1229 - 1230 1230 - .remove-password-form { 1231 1231 - background: var(--error-bg); 1232 1232 - border: 1px solid var(--error-border); 1233 1233 - border-radius: var(--radius-lg); 1234 1234 - padding: var(--space-4); 1235 1235 - } 1236 1236 - 1237 1237 - .remove-password-form .warning-text { 1238 1238 - color: var(--error-text); 1239 1239 - font-size: var(--text-sm); 1240 1240 - margin: 0 0 var(--space-4) 0; 1241 1241 - } 1242 1242 - 1243 1243 - .remove-password-form .actions { 1244 1244 - display: flex; 1245 1245 - gap: var(--space-2); 1246 1246 - } 1247 1247 - 1248 1248 - button.small { 1249 1249 - padding: var(--space-2) var(--space-3); 1250 1250 - font-size: var(--text-sm); 1251 1251 - } 1252 1252 - 1253 1253 - button.small.danger { 1254 1254 - background: transparent; 1255 1255 - border: 1px solid var(--error-border); 1256 1256 - color: var(--error-text); 1257 1257 - } 1258 1258 - 1259 1259 - button.small.danger:hover { 1260 1260 - background: var(--error-bg); 1261 1261 - } 1262 1262 - 1263 1263 - .setup-step { 1264 1264 - background: var(--bg-card); 1265 1265 - border: 1px solid var(--border-color); 1266 1266 - border-radius: var(--radius-md); 1267 1267 - padding: var(--space-4); 1268 1268 - } 1269 1269 - 1270 1270 - .setup-step p { 1271 1271 - color: var(--text-secondary); 1272 1272 - font-size: var(--text-sm); 1273 1273 - margin: 0 0 var(--space-4) 0; 1274 1274 - } 1275 1275 - 1276 1276 - .setup-step h4 { 1277 1277 - margin: 0 0 var(--space-2) 0; 1278 1278 - } 1279 1279 - 1280 1280 - .qr-container { 1281 1281 - display: flex; 1282 1282 - justify-content: center; 1283 1283 - margin: var(--space-4) 0; 1284 1284 - } 1285 1285 - 1286 1286 - .qr-code { 1287 1287 - width: 180px; 1288 1288 - height: 180px; 1289 1289 - image-rendering: pixelated; 1290 1290 - } 1291 1291 - 1292 1292 - .manual-entry { 1293 1293 - margin-bottom: var(--space-4); 1294 1294 - font-size: var(--text-sm); 1295 1295 - } 1296 1296 - 1297 1297 - .manual-entry summary { 1298 1298 - cursor: pointer; 1299 1299 - color: var(--accent); 1300 1300 - } 1301 1301 - 1302 1302 - .secret-code { 1303 1303 - display: block; 1304 1304 - margin-top: var(--space-2); 1305 1305 - padding: var(--space-2); 1306 1306 - background: var(--bg-input); 1307 1307 - border-radius: var(--radius-md); 1308 1308 - word-break: break-all; 1309 1309 - font-size: var(--text-xs); 1310 1310 - } 1311 1311 - 1312 1312 - .code-input { 1313 1313 - font-size: var(--text-xl); 1314 1314 - letter-spacing: 0.3em; 1315 1315 - text-align: center; 1316 1316 - max-width: 180px; 1317 1317 - margin: 0 auto var(--space-4) auto; 1318 1318 - display: block; 1319 1319 - } 1320 1320 - 1321 1321 - .actions { 1322 1322 - display: flex; 1323 1323 - gap: var(--space-2); 1324 1324 - margin-top: var(--space-4); 1325 1325 - } 1326 1326 - 1327 1327 - .warning-text { 1328 1328 - color: var(--error-text); 1329 1329 - font-size: var(--text-sm); 1330 1330 - margin-bottom: var(--space-4); 1331 1331 - } 1332 1332 - 1333 1333 - .backup-codes { 1334 1334 - display: grid; 1335 1335 - grid-template-columns: repeat(2, 1fr); 1336 1336 - gap: var(--space-2); 1337 1337 - margin-bottom: var(--space-4); 1338 1338 - } 1339 1339 - 1340 1340 - .backup-code { 1341 1341 - padding: var(--space-2); 1342 1342 - background: var(--bg-input); 1343 1343 - border-radius: var(--radius-md); 1344 1344 - text-align: center; 1345 1345 - font-size: var(--text-sm); 1346 1346 - font-family: var(--font-mono); 1347 1347 - } 1348 1348 - 1349 1349 - .totp-actions { 1350 1350 - display: flex; 1351 1351 - gap: var(--space-2); 1352 1352 - flex-wrap: wrap; 1353 1353 - } 1354 1354 - 1355 1355 - .inline-form { 1356 1356 - background: var(--bg-card); 1357 1357 - border: 1px solid var(--border-color); 1358 1358 - border-radius: var(--radius-md); 1359 1359 - padding: var(--space-4); 1360 1360 - margin-top: var(--space-4); 1361 1361 - } 1362 1362 - 1363 1363 - .inline-form.danger-form { 1364 1364 - border-color: var(--error-border); 1365 1365 - } 1366 1366 - 1367 1367 - .inline-form h4 { 1368 1368 - margin: 0 0 var(--space-3) 0; 1369 1369 - font-size: var(--text-base); 1370 1370 - } 1371 1371 - 1372 1372 - .field { 1373 1373 - margin-bottom: var(--space-3); 1374 1374 - } 1375 1375 - 1376 1376 - .field label { 1377 1377 - display: block; 1378 1378 - font-size: var(--text-sm); 1379 1379 - font-weight: var(--font-medium); 1380 1380 - margin-bottom: var(--space-1); 1381 1381 - } 1382 1382 - 1383 1383 - .field input { 1384 1384 - width: 100%; 1385 1385 - } 1386 1386 - 1387 1387 - .danger-outline { 1388 1388 - background: transparent; 1389 1389 - border: 1px solid var(--error-border); 1390 1390 - color: var(--error-text); 1391 1391 - } 1392 1392 - 1393 1393 - .danger-outline:hover { 1394 1394 - background: var(--error-bg); 1395 1395 - } 1396 1396 - 1397 1397 - button.danger { 1398 1398 - background: var(--error-text); 1399 1399 - border: 1px solid var(--error-text); 1400 1400 - color: white; 1401 1401 - } 1402 1402 - 1403 1403 - button.danger:hover:not(:disabled) { 1404 1404 - background: var(--error-border); 1405 1405 - } 1406 1406 - 1407 1407 - .empty { 1408 1408 - color: var(--text-secondary); 1409 1409 - font-size: var(--text-sm); 1410 1410 - margin-bottom: var(--space-4); 1411 1411 - } 1412 1412 - 1413 1413 - .sso-list { 1414 1414 - list-style: none; 1415 1415 - padding: 0; 1416 1416 - margin: 0 0 var(--space-4) 0; 1417 1417 - display: flex; 1418 1418 - flex-direction: column; 1419 1419 - gap: var(--space-2); 1420 1420 - } 1421 1421 - 1422 1422 - .sso-item { 1423 1423 - display: flex; 1424 1424 - justify-content: space-between; 1425 1425 - align-items: center; 1426 1426 - padding: var(--space-3); 1427 1427 - background: var(--bg-card); 1428 1428 - border: 1px solid var(--border-color); 1429 1429 - border-radius: var(--radius-md); 1430 1430 - gap: var(--space-3); 1431 1431 - } 1432 1432 - 1433 1433 - .sso-info { 1434 1434 - display: flex; 1435 1435 - flex-direction: column; 1436 1436 - gap: var(--space-1); 1437 1437 - } 1438 1438 - 1439 1439 - .sso-provider { 1440 1440 - font-weight: var(--font-medium); 1441 1441 - } 1442 1442 - 1443 1443 - .sso-id { 1444 1444 - font-size: var(--text-xs); 1445 1445 - color: var(--text-secondary); 1446 1446 - } 1447 1447 - 1448 1448 - .sso-meta { 1449 1449 - font-size: var(--text-xs); 1450 1450 - color: var(--text-secondary); 1451 1451 - } 1452 1452 - 1453 1453 - .sso-providers { 1454 1454 - padding-top: var(--space-4); 1455 1455 - border-top: 1px solid var(--border-color); 1456 1456 - } 1457 1457 - 1458 1458 - .sso-providers h4 { 1459 1459 - margin: 0 0 var(--space-3) 0; 1460 1460 - font-size: var(--text-sm); 1461 1461 - color: var(--text-secondary); 1462 1462 - } 1463 1463 - 1464 1464 - .provider-buttons { 1465 1465 - display: flex; 1466 1466 - flex-wrap: wrap; 1467 1467 - gap: var(--space-2); 1468 1468 - } 1469 1469 - 1470 1470 - .provider-btn { 1471 1471 - display: flex; 1472 1472 - align-items: center; 1473 1473 - gap: var(--space-2); 1474 1474 - padding: var(--space-2) var(--space-4); 1475 1475 - background: var(--bg-card); 1476 1476 - border: 1px solid var(--border-color); 1477 1477 - border-radius: var(--radius-md); 1478 1478 - cursor: pointer; 1479 1479 - color: var(--text-primary); 1480 1480 - } 1481 1481 - 1482 1482 - .provider-btn:hover:not(:disabled) { 1483 1483 - border-color: var(--accent); 1484 1484 - } 1485 1485 - 1486 1486 - .provider-btn:disabled { 1487 1487 - opacity: 0.6; 1488 1488 - cursor: not-allowed; 1489 1489 - } 1490 1490 - 1491 1491 - .linked-badge { 1492 1492 - font-size: var(--text-xs); 1493 1493 - padding: var(--space-1) var(--space-2); 1494 1494 - background: var(--success-bg); 1495 1495 - color: var(--success-text); 1496 1496 - border-radius: var(--radius-sm); 1497 1497 - } 1498 1498 - 1499 1499 - .section-description { 1500 1500 - color: var(--text-secondary); 1501 1501 - font-size: var(--text-sm); 1502 1502 - margin: 0 0 var(--space-4) 0; 1503 1503 - } 1504 1504 - 1505 1505 - .toggle-row { 1506 1506 - display: flex; 1507 1507 - justify-content: space-between; 1508 1508 - align-items: center; 1509 1509 - padding: var(--space-3); 1510 1510 - background: var(--bg-card); 1511 1511 - border: 1px solid var(--border-color); 1512 1512 - border-radius: var(--radius-md); 1513 1513 - margin-bottom: var(--space-4); 1514 1514 - } 1515 1515 - 1516 1516 - .toggle-info { 1517 1517 - display: flex; 1518 1518 - flex-direction: column; 1519 1519 - gap: var(--space-1); 1520 1520 - } 1521 1521 - 1522 1522 - .toggle-label { 1523 1523 - font-weight: var(--font-medium); 1524 1524 - } 1525 1525 - 1526 1526 - .toggle-description { 1527 1527 - font-size: var(--text-sm); 1528 1528 - color: var(--text-secondary); 1529 1529 - } 1530 1530 - 1531 1531 - .toggle-button { 1532 1532 - position: relative; 1533 1533 - width: 52px; 1534 1534 - height: 28px; 1535 1535 - padding: 0; 1536 1536 - background: var(--border-color); 1537 1537 - border: none; 1538 1538 - border-radius: 14px; 1539 1539 - cursor: pointer; 1540 1540 - transition: background 0.2s ease; 1541 1541 - flex-shrink: 0; 1542 1542 - } 1543 1543 - 1544 1544 - .toggle-button.on { 1545 1545 - background: var(--accent); 1546 1546 - } 1547 1547 - 1548 1548 - .toggle-button:disabled { 1549 1549 - opacity: 0.6; 1550 1550 - cursor: not-allowed; 1551 1551 - } 1552 1552 - 1553 1553 - .toggle-slider { 1554 1554 - position: absolute; 1555 1555 - top: 2px; 1556 1556 - left: 2px; 1557 1557 - width: 24px; 1558 1558 - height: 24px; 1559 1559 - background: white; 1560 1560 - border-radius: 50%; 1561 1561 - transition: transform 0.2s ease; 1562 1562 - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 1563 1563 - } 1564 1564 - 1565 1565 - .toggle-button.on .toggle-slider { 1566 1566 - transform: translateX(24px); 1567 1567 - } 1568 1568 - 1569 1569 - .warning-box { 1570 1570 - background: var(--warning-bg); 1571 1571 - border: 1px solid var(--warning-border); 1572 1572 - border-radius: var(--radius-md); 1573 1573 - padding: var(--space-3); 1574 1574 - margin-bottom: var(--space-4); 1575 1575 - } 1576 1576 - 1577 1577 - .warning-box strong { 1578 1578 - color: var(--warning-text); 1579 1579 - font-size: var(--text-sm); 1580 1580 - } 1581 1581 - 1582 1582 - .info-box { 1583 1583 - background: var(--bg-card); 1584 1584 - border: 1px solid var(--border-color); 1585 1585 - border-radius: var(--radius-md); 1586 1586 - padding: var(--space-3); 1587 1587 - } 1588 1588 - 1589 1589 - .info-box strong { 1590 1590 - font-size: var(--text-sm); 1591 1591 - display: block; 1592 1592 - margin-bottom: var(--space-1); 1593 1593 - } 1594 1594 - 1595 1595 - .info-box p { 1596 1596 - font-size: var(--text-sm); 1597 1597 - color: var(--text-secondary); 1598 1598 - margin: 0; 1599 1599 - } 1600 1600 - 1601 1601 - .empty-hint { 1602 1602 - color: var(--text-secondary); 1603 1603 - font-size: var(--text-sm); 1604 1604 - margin: 0; 1605 1605 - } 1606 1606 - 1607 1607 - .hint-text { 1608 1608 - color: var(--text-secondary); 1609 1609 - font-size: var(--text-sm); 1610 1610 - margin: var(--space-2) 0 0 0; 1611 1611 - } 1612 1612 - 1613 1613 - .device-list { 1614 1614 - display: flex; 1615 1615 - flex-direction: column; 1616 1616 - gap: var(--space-3); 1617 1617 - } 1618 1618 - 1619 1619 - .device-card { 1620 1620 - display: flex; 1621 1621 - align-items: center; 1622 1622 - gap: var(--space-3); 1623 1623 - padding: var(--space-3); 1624 1624 - background: var(--bg-card); 1625 1625 - border: 1px solid var(--border-color); 1626 1626 - border-radius: var(--radius-md); 1627 1627 - } 1628 1628 - 1629 1629 - .device-header { 1630 1630 - display: flex; 1631 1631 - align-items: center; 1632 1632 - gap: var(--space-2); 1633 1633 - flex: 1; 1634 1634 - min-width: 0; 1635 1635 - } 1636 1636 - 1637 1637 - .device-name { 1638 1638 - font-weight: var(--font-medium); 1639 1639 - white-space: nowrap; 1640 1640 - overflow: hidden; 1641 1641 - text-overflow: ellipsis; 1642 1642 - } 1643 1643 - 1644 1644 - .edit-name-input { 1645 1645 - flex: 1; 1646 1646 - padding: var(--space-2); 1647 1647 - font-size: var(--text-sm); 1648 1648 - min-width: 0; 1649 1649 - } 1650 1650 - 1651 1651 - .edit-actions { 1652 1652 - display: flex; 1653 1653 - gap: var(--space-2); 1654 1654 - flex-shrink: 0; 1655 1655 - } 1656 1656 - 1657 1657 - .icon-btn { 1658 1658 - background: none; 1659 1659 - border: none; 1660 1660 - padding: var(--space-1); 1661 1661 - cursor: pointer; 1662 1662 - color: var(--text-secondary); 1663 1663 - font-size: var(--text-sm); 1664 1664 - } 1665 1665 - 1666 1666 - .icon-btn:hover { 1667 1667 - color: var(--accent); 1668 1668 - } 1669 1669 - 1670 1670 - .device-details { 1671 1671 - display: flex; 1672 1672 - gap: var(--space-3); 1673 1673 - flex-shrink: 0; 1674 1674 - } 1675 1675 - 1676 1676 - .device-details .detail { 1677 1677 - font-size: var(--text-xs); 1678 1678 - color: var(--text-secondary); 1679 1679 - white-space: nowrap; 1680 1680 - } 1681 1681 - 1682 1682 - .device-details .expiring-soon { 1683 1683 - color: var(--warning-text); 1684 1684 - } 1685 1685 - 1686 1686 - button.danger-outline { 1687 1687 - background: transparent; 1688 1688 - border: 1px solid var(--error-border); 1689 1689 - color: var(--error-text); 1690 1690 - } 1691 1691 - 1692 1692 - button.danger-outline:hover { 1693 1693 - background: var(--error-bg); 1694 1694 - } 1695 1695 - 1696 1696 - @media (max-width: 500px) { 1697 1697 - .passkey-item { 1698 1698 - flex-direction: column; 1699 1699 - align-items: stretch; 1700 1700 - } 1701 1701 - 1702 1702 - .passkey-actions { 1703 1703 - width: 100%; 1704 1704 - } 1705 1705 - 1706 1706 - .passkey-actions button { 1707 1707 - flex: 1; 1708 1708 - } 1709 1709 - 1710 1710 - .add-passkey { 1711 1711 - flex-direction: column; 1712 1712 - } 1713 1713 - 1714 1714 - .device-card { 1715 1715 - flex-direction: column; 1716 1716 - align-items: stretch; 1717 1717 - } 1718 1718 - 1719 1719 - .device-details { 1720 1720 - flex-direction: column; 1721 1721 - gap: var(--space-1); 1722 1722 - } 1723 1723 - 1724 1724 - .device-card > button { 1725 1725 - width: 100%; 1726 1726 - } 1727 1727 - } 1728 1728 - </style>

+3 -169

frontend/src/components/dashboard/SessionsContent.svelte

··· 127 127 </div> 128 128 <button 129 129 type="button" 130 130 - class="revoke-btn" 130 130 + class="sm secondary" 131 131 class:danger={!s.isCurrent} 132 132 onclick={() => revokeSession(s.id, s.isCurrent)} 133 133 > ··· 137 137 {/each} 138 138 </div> 139 139 <div class="actions-bar"> 140 140 - <button type="button" class="refresh-btn" onclick={loadSessions}>{$_('common.refresh')}</button> 140 140 + <button type="button" class="sm tertiary" onclick={loadSessions}>{$_('common.refresh')}</button> 141 141 {#if sessions.filter(s => !s.isCurrent).length > 0} 142 142 - <button type="button" class="revoke-all-btn" onclick={revokeAllSessions}>{$_('sessions.revokeAll')}</button> 142 142 + <button type="button" class="sm danger-outline" onclick={revokeAllSessions}>{$_('sessions.revokeAll')}</button> 143 143 {/if} 144 144 </div> 145 145 {/if} 146 146 </div> 147 147 - 148 148 - <style> 149 149 - .sessions { 150 150 - max-width: var(--width-lg); 151 151 - } 152 152 - 153 153 - .loading, 154 154 - .empty { 155 155 - color: var(--text-secondary); 156 156 - padding: var(--space-6); 157 157 - text-align: center; 158 158 - } 159 159 - 160 160 - .sessions-list { 161 161 - display: flex; 162 162 - flex-direction: column; 163 163 - gap: var(--space-4); 164 164 - } 165 165 - 166 166 - .session-card { 167 167 - background: var(--bg-secondary); 168 168 - border: 1px solid var(--border-color); 169 169 - border-radius: var(--radius-xl); 170 170 - padding: var(--space-4); 171 171 - display: flex; 172 172 - justify-content: space-between; 173 173 - align-items: center; 174 174 - gap: var(--space-4); 175 175 - } 176 176 - 177 177 - .session-card.current { 178 178 - border-color: var(--accent); 179 179 - background: var(--bg-card); 180 180 - } 181 181 - 182 182 - .session-info { 183 183 - flex: 1; 184 184 - min-width: 0; 185 185 - } 186 186 - 187 187 - .session-header { 188 188 - margin-bottom: var(--space-2); 189 189 - display: flex; 190 190 - align-items: center; 191 191 - gap: var(--space-2); 192 192 - flex-wrap: wrap; 193 193 - } 194 194 - 195 195 - .client-name { 196 196 - font-weight: var(--font-medium); 197 197 - color: var(--text-primary); 198 198 - } 199 199 - 200 200 - .badge { 201 201 - display: inline-block; 202 202 - padding: var(--space-1) var(--space-2); 203 203 - border-radius: var(--radius-md); 204 204 - font-size: var(--text-xs); 205 205 - font-weight: var(--font-medium); 206 206 - } 207 207 - 208 208 - .badge.current { 209 209 - background: var(--accent); 210 210 - color: var(--text-inverse); 211 211 - } 212 212 - 213 213 - .badge.type { 214 214 - background: var(--bg-secondary); 215 215 - color: var(--text-secondary); 216 216 - border: 1px solid var(--border-color); 217 217 - } 218 218 - 219 219 - .badge.type.oauth { 220 220 - background: var(--success-bg); 221 221 - color: var(--success-text); 222 222 - border-color: var(--success-border); 223 223 - } 224 224 - 225 225 - .session-details { 226 226 - display: flex; 227 227 - flex-direction: column; 228 228 - gap: var(--space-1); 229 229 - } 230 230 - 231 231 - .detail { 232 232 - font-size: var(--text-sm); 233 233 - } 234 234 - 235 235 - .detail .label { 236 236 - color: var(--text-secondary); 237 237 - margin-right: var(--space-2); 238 238 - } 239 239 - 240 240 - .detail .value { 241 241 - color: var(--text-primary); 242 242 - } 243 243 - 244 244 - .revoke-btn { 245 245 - flex-shrink: 0; 246 246 - padding: var(--space-2) var(--space-4); 247 247 - border: 1px solid var(--border-color); 248 248 - border-radius: var(--radius-md); 249 249 - background: transparent; 250 250 - color: var(--text-primary); 251 251 - cursor: pointer; 252 252 - font-size: var(--text-sm); 253 253 - } 254 254 - 255 255 - .revoke-btn:hover { 256 256 - background: var(--bg-card); 257 257 - } 258 258 - 259 259 - .revoke-btn.danger { 260 260 - border-color: var(--error-text); 261 261 - color: var(--error-text); 262 262 - } 263 263 - 264 264 - .revoke-btn.danger:hover { 265 265 - background: var(--error-bg); 266 266 - } 267 267 - 268 268 - .actions-bar { 269 269 - margin-top: var(--space-4); 270 270 - display: flex; 271 271 - gap: var(--space-2); 272 272 - flex-wrap: wrap; 273 273 - } 274 274 - 275 275 - .refresh-btn { 276 276 - padding: var(--space-2) var(--space-4); 277 277 - background: transparent; 278 278 - border: 1px solid var(--border-color); 279 279 - border-radius: var(--radius-md); 280 280 - cursor: pointer; 281 281 - color: var(--text-primary); 282 282 - } 283 283 - 284 284 - .refresh-btn:hover { 285 285 - background: var(--bg-card); 286 286 - border-color: var(--accent); 287 287 - } 288 288 - 289 289 - .revoke-all-btn { 290 290 - padding: var(--space-2) var(--space-4); 291 291 - background: transparent; 292 292 - border: 1px solid var(--error-text); 293 293 - border-radius: var(--radius-md); 294 294 - cursor: pointer; 295 295 - color: var(--error-text); 296 296 - } 297 297 - 298 298 - .revoke-all-btn:hover { 299 299 - background: var(--error-bg); 300 300 - } 301 301 - 302 302 - @media (max-width: 500px) { 303 303 - .session-card { 304 304 - flex-direction: column; 305 305 - align-items: stretch; 306 306 - } 307 307 - 308 308 - .revoke-btn { 309 309 - width: 100%; 310 310 - } 311 311 - } 312 312 - </style>