This commit is contained in:
nora 2025-07-13 01:04:41 +02:00
parent 0f46ff5a89
commit c789f7ad15
10 changed files with 406 additions and 9 deletions

27
idp/templates/2fa.html Normal file
View file

@ -0,0 +1,27 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2FA - IDP</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<h1>See 2FA devices for your account</h1>
<a href="/">home</a>
<ul>
{% for device in devices %}
<li>
{{device.name}} (added
{{jiff::Timestamp::from_millisecond(*device.created_time).unwrap()
.strftime("%A, %d %B %Y at %I:%M %Q")}})
<form method="post" action="/2fa/delete" class="fake-form">
<input type="hidden" name="device_id" value="{{device.id}}" />
<button type="submit">delete</button>
</form>
</li>
{% endfor %}
</ul>
</body>
</html>

View file

@ -0,0 +1,47 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add 2FA - IDP</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<h1>Add 2FA to your account</h1>
<a href="/">home</a>
<form method="post" action="/add-totp">
<p>
Copy this secret into your authenticator app and enter the code from it
below.
</p>
<p>
You can also add a name for your devide to help you identify it in the
future.
</p>
<dl>
<dt>2FA TOTP Secret</dt>
<dd>{{totp_secret}}</dd>
</dl>
<div>
<label for="name">Device name</label>
<input id="name" name="name" />
</div>
<div>
<label for="code">2FA Code</label>
<input id="code" name="code" />
</div>
<div style="display: none" aria-hidden="true">
<input id="secret" name="secret" value="{{totp_secret}}" />
</div>
<button type="submit">Confirm</button>
{% if error %}
<p>Invalid 2FA code</p>
{% endif %}
</form>
</body>
</html>

View file

@ -21,5 +21,13 @@
<div>
<a href="/users">List all users</a>
</div>
{% if let Some(username) = username %}
<div>
<a href="/add-totp">Add a new 2FA device to your account</a>
</div>
<div>
<a href="/2fa">List all 2FA devices for your account</a>
</div>
{% endif %}
</body>
</html>

View file

@ -3,6 +3,36 @@ body {
width: 100%;
}
@media (prefers-color-scheme: dark) {
body {
background-color: rgb(41, 41, 41);
color: white;
}
a {
color: lightblue;
}
input {
background-color: rgb(41, 41, 41);
border: 1px solid gray;
height: 1.8rem;
color: white;
}
}
button {
background-color: coral;
border-width: 0;
&:hover {
background-color: color-mix(in oklab, coral 80%, black 20%);
cursor: pointer;
}
height: 2rem;
}
body {
display: flex;
flex-direction: column;
@ -11,11 +41,15 @@ body {
/* Home Link */
a[href="/"] {
margin-bottom: 20px;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
gap: 10px;
}
form + :not(.fake-form) {
display: flex;
flex-direction: column;
gap: 10px;
}
.fake-form {
display: inline-block;
}