Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance forms and other improvements #362

Merged
merged 1 commit into from
Nov 20, 2023
Merged

Enhance forms and other improvements #362

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 40 additions & 31 deletions static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,13 @@
</nav>
</header>
<main>
<h1 id="device-integrity-monitoring">
<a href="#device-integrity-monitoring">Device integrity monitoring</a>
</h1>
<p>Hardware-based remote attestation service for monitoring the security of Android devices using <a href="https://play.google.com/store/apps/details?id=app.attestation.auditor.play">the Auditor app</a>. For more details, see the <a href="/about">detailed description of the app and service</a> and the <a href="/tutorial">usage instructions</a>.</p>
<hr/>
<noscript><p><strong>JavaScript is required to use the device integrity monitoring application.</strong></p></noscript>
<span id="login_status" hidden="">Logged in as <strong id="username"></strong>.</span>
<span id="login_status" hidden="">You are logged in as <strong id="username"></strong>.<br/><br/></span>
<span id="logged_out_buttons" hidden="">
<button id="create">Create account</button>
<button id="login">Log in</button>
Expand All @@ -55,49 +60,53 @@
<button id="logout_everywhere" class="logout">Log out everywhere</button>
<button id="change_password">Change password</button>
</span>
<form id="create_form" hidden="">
<h3>Create account:</h3>
<label>Username: <input id="create_username" type="text" autocomplete="username" maxlength="32" pattern="[a-zA-Z0-9]+" required="required"/></label><br/>
<label>Password: <input id="create_password" type="password" autocomplete="new-password" maxlength="256" minlength="8" required="required"/></label><br/>
<label>Confirm password: <input id="create_password_confirm" type="password" autocomplete="new-password" maxlength="256" minlength="8" required="required"/></label><br/>
<p>For security reasons, accounts are not tied to email addresses. Adding an alert email to your account does not provide a recovery method. If you forget your password, you'll need to make a new account and move your devices over to it.</p>
<p>Accounts with no paired devices are deleted after 365 days without a successful login. Paired devices expire after 90 days without submitting a valid attestation.</p>
<button name="submit">Create account</button>
<button type="button" class="cancel">Cancel</button>
</form>
<form id="login_form" hidden="">
<h3>Login:</h3>
<label>Username: <input id="login_username" type="text" autocomplete="username" maxlength="32" pattern="[a-zA-Z0-9]+" required="required"/></label><br/>
<label>Password: <input id="login_password" type="password" autocomplete="current-password" maxlength="256" minlength="8" required="required"/></label><br/>
<div id="create_form_content" hidden="">
<form id="create_form" class="centered-box">
<h2>Create account</h2>
<label>Username<br/><input id="create_username" type="text" autocomplete="username" maxlength="32" pattern="[a-zA-Z0-9]+" required="required"/></label><br/>
<label>Password<br/><input id="create_password" type="password" autocomplete="new-password" maxlength="256" minlength="8" required="required"/></label><br/>
<label>Confirm password<br/><input id="create_password_confirm" type="password" autocomplete="new-password" maxlength="256" minlength="8" required="required"/></label><br/><br/>
<button name="submit">Create account</button>
<button type="button" class="cancel">Cancel</button>
</form><br/>
<details>
<summary class="centered-text">Further information about accounts</summary>
<div>
<p>For security reasons, accounts are not tied to email addresses. Adding an alert email to your account does not provide a recovery method. If you forget your password, you'll need to make a new account and move your devices over to it.</p>
<p>Accounts with no paired devices are deleted after 365 days without a successful login. Paired devices expire after 90 days without submitting a valid attestation.</p>
</div>
</details>
</div>
<form id="login_form" class="centered-box" hidden="">
<h2>Login</h2>
<label>Username<br/><input id="login_username" type="text" autocomplete="username" maxlength="32" pattern="[a-zA-Z0-9]+" required="required"/></label><br/>
<label>Password<br/><input id="login_password" type="password" autocomplete="current-password" maxlength="256" minlength="8" required="required"/></label><br/><br/>
<button name="submit">Log in</button>
<button type="button" class="cancel">Cancel</button>
</form>
<form id="change_password_form" hidden="">
<h3>Change password:</h3>
<form id="change_password_form" class="centered-box" hidden="">
<h2>Change password</h2>
<!-- hint for password managers per https://www.chromium.org/developers/design-documents/create-amazing-password-forms -->
<input hidden="" id="current_username" type="text" autocomplete="username"/>
<label>Current password: <input id="current_password" type="password" autocomplete="current-password" maxlength="256" minlength="8" required="required"/></label><br/>
<label>New Password: <input id="new_password" type="password" autocomplete="new-password" maxlength="256" minlength="8" required="required"/></label><br/>
<label>Confirm new password: <input id="new_password_confirm" type="password" autocomplete="new-password" maxlength="256" minlength="8" required="required"/></label><br/>
<label>Current password<br/><input id="current_password" type="password" autocomplete="current-password" maxlength="256" minlength="8" required="required"/></label><br/>
<label>New Password<br/><input id="new_password" type="password" autocomplete="new-password" maxlength="256" minlength="8" required="required"/></label><br/>
<label>Confirm new password<br/><input id="new_password_confirm" type="password" autocomplete="new-password" maxlength="256" minlength="8" required="required"/></label><br/><br/>
<button name="submit">Change password</button>
<button type="button" class="cancel_account">Cancel</button>
</form>
<h1 id="device-integrity-monitoring">
<a href="#device-integrity-monitoring">Device integrity monitoring</a>
</h1>
<p>Hardware-based remote attestation service for monitoring the security of Android devices using <a href="https://play.google.com/store/apps/details?id=app.attestation.auditor.play">the Auditor app</a>. For more details, see the <a href="/about">detailed description of the app and service</a> and the <a href="/tutorial">usage instructions</a>.</p>
<div id="account_content" hidden="">
<p>Subscribe a device to regularly submitting attestations to this account by pressing 'Enable remote verification' in the Auditor app menu and scanning the QR code for this account:</p>
<section id="pairing">
<p>Subscribe a device to regularly submitting attestations to this account by pressing "Enable remote verification" in the Auditor app menu and scanning the QR code for this account.</p>
<section id="pairing" class="centered-box">
<h2><a href="#pairing">Pair devices</a></h2>
<img id="qr" height="300" width="300" alt="" src="/placeholder.gif"/>
<img id="qr" height="300" width="300" alt="" src="/placeholder.gif"/><br/>
<button id="rotate">Rotate device subscription key</button>
</section>
<form id="configuration">
<br/>
<form id="configuration" class="centered-box">
<h2><a href="#configuration">Configuration</a></h2>
<label>Verify interval (hours): <input name="verify_interval" type="number" min="1" max="168" required="required"/></label><br/>
<label>Permitted delay until alerts (hours): <input name="alert_delay" type="number" min="32" max="336" required="required"/></label><br/>
<label>Alert email: <input name="email" type="email"/></label><br/>
<label>Verify interval (hours)<br/><input name="verify_interval" type="number" min="1" max="168" required="required"/></label><br/>
<label>Permitted delay until alerts (hours)<br/><input name="alert_delay" type="number" min="32" max="336" required="required"/></label><br/>
<label>Alert email<br/><input name="email" type="email"/></label><br/><br/>
<button name="submit">Set configuration</button>
</form>
<div id="devices"></div>
Expand Down
38 changes: 37 additions & 1 deletion static/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ body {
margin: 0;
padding: 0;
overflow-y: scroll;
padding-bottom: 3em;
}

a {
Expand Down Expand Up @@ -65,6 +66,7 @@ pre {
display: block;
text-decoration: none;
padding: 1em;
white-space: nowrap;
}

#site-menu ul li a:visited {
Expand Down Expand Up @@ -119,7 +121,37 @@ button::-moz-focus-inner {
}

input {
margin: 2px;
border: #9e9e9e 1.5px solid;
border-radius: 4px;
font-size: 0.9em;
margin-top: 0.5em;
margin-bottom: 0.5em;
padding: 0.4rem;
}

summary:hover {
text-decoration: underline;
cursor: pointer;
}

hr {
border-color: #9e9e9e;
margin-bottom: 1em;
}

.centered-box {
border: #757575 2.5px solid;
border-radius: 14px;
width: fit-content;
white-space: nowrap;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 1em;
}

.centered-text {
text-align: center;
}

.coin-address {
Expand Down Expand Up @@ -215,4 +247,8 @@ input {
button:focus {
background-color: #1c1c1c;
}

.centered-box {
border-color: #424242;
}
}
11 changes: 8 additions & 3 deletions static/monitoring.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

const fingerprintSplitInterval = 4;
const createForm = document.getElementById("create_form");
const createFormContent = document.getElementById("create_form_content");
const createUsername = document.getElementById("create_username");
const createPassword = document.getElementById("create_password");
const createPasswordConfirm = document.getElementById("create_password_confirm");
Expand Down Expand Up @@ -354,7 +355,7 @@ post("/api/account").then(response => {

document.getElementById("create").onclick = () => {
loggedOutButtons.hidden = true;
createForm.hidden = false;
createFormContent.hidden = false;
};

createPasswordConfirm.oninput = () => {
Expand Down Expand Up @@ -444,7 +445,7 @@ createForm.onsubmit = event => {
}
return Promise.reject(new Error(response.status));
}
createForm.hidden = true;
createFormContent.hidden = true;
createForm.reset();
createForm.submit.disabled = false;
loggedOutButtons.hidden = false;
Expand All @@ -469,7 +470,11 @@ loginForm.onsubmit = event => {

for (const cancel of document.getElementsByClassName("cancel")) {
cancel.onclick = function() {
this.parentElement.hidden = true;
if (createFormContent.contains(this.parentElement)) {
createFormContent.hidden = true;
} else {
this.parentElement.hidden = true;
}
this.parentElement.reset();
loggedOutButtons.hidden = false;
};
Expand Down