Skip to content

Instantly share code, notes, and snippets.

@Stwissel
Last active February 7, 2023 04:49
Show Gist options
  • Save Stwissel/5ccb2a0020655cbcb23f38b3c3d5462b to your computer and use it in GitHub Desktop.
Save Stwissel/5ccb2a0020655cbcb23f38b3c3d5462b to your computer and use it in GitHub Desktop.
Simple CSS /JS for TOTP Demo site
html {
font-family: 'Futura', Roboto, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
margin: 0;
font-family: 'Futura', 'Jetbrains Mono', Roboto, 'Segoe UI', Tahoma, Geneva,
Verdana, sans-serif;
background: white;
}
header {
color: white;
background-image: linear-gradient(to right, #5f1ebe, #3c91ff);
height: 100px;
margin: 10px 20px;
border-radius: 5px;
}
h1 {
text-align: center;
line-height: 100px;
font-weight: normal;
margin: 0;
}
.hero {
font-size: large;
margin: 10px 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
border-radius: 8px;
background-image: linear-gradient(to right, #3c91ff, #8cc8fa);
padding: 15px;
}
article {
padding: 5px;
padding-left: 10px;
padding-right: 10px;
margin: 10px;
flex: 420px;
max-width: 420px;
overflow: auto;
word-break: break-word;
border-radius: 8px;
border: 1px solid #cccccc;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
}
article h2 {
margin: 4px;
}
a {
text-decoration: none;
color: black;
display: block;
}
article:hover {
border: 2px solid #411482;
}
article p {
margin-block: 0;
}
h2 {
text-align: center;
}
article img {
display: block;
margin-left: auto;
margin-right: auto;
}
article button {
margin: 15px;
padding: 5px;
border-radius: 3px;
text-align: center;
}
button,
input,
label {
display: block;
font-size: xx-large;
}
.container {
margin: 0px 10px;
}
section {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
footer {
background-image: linear-gradient(to right, #5f1ebe, #3c91ff);
margin: 10px 20px;
border-radius: 5px;
padding: 10px;
text-align: center;
}
footer a {
color: white;
display: inline;
}
const updateForm = (imageElement, callback, label) => {
const form = document.getElementById('totp');
const button = document.getElementById('emailnext');
form.removeChild(button);
const codeLabel = document.createElement('label');
codeLabel.setAttribute('for', 'code');
codeLabel.innerText = 'TOTP Code';
const code = document.createElement('input');
code.setAttribute('id', 'code');
code.setAttribute('type', 'number');
const codeButton = document.createElement('button');
codeButton.setAttribute('id', 'codeButton');
codeButton.innerText = label;
codeButton.addEventListener('click', function (event) {
event.preventDefault();
callback();
});
if (imageElement) {
form.appendChild(imageElement);
}
form.appendChild(codeLabel);
form.appendChild(code);
form.appendChild(codeButton);
};
const verifyUser = () => {
const form = document.getElementById('totp');
const email = document.getElementById('email');
const code = document.getElementById('code');
const query = { email: email.value, code: code.value };
document.body.style.cursor = 'wait';
fetch('/verify', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(query)
})
.then((response) => {
const status = document.createElement('label');
if (response.ok) {
status.innerText = 'Code OK';
} else {
status.innerText = 'Code fail';
}
form.append(status);
})
.catch((err) => console.error(err))
.finally(() => (document.body.style.cursor = 'default'));
};
const saveUser = () => {
const form = document.getElementById('totp');
const email = document.getElementById('email');
const code = document.getElementById('code');
const query = { email: email.value, code: code.value };
document.body.style.cursor = 'wait';
fetch('/save', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(query)
})
.then((response) => {
const status = document.createElement('label');
let codeButton = document.getElementById('codeButton');
const totpimg = document.getElementById('totpimg');
if (response.ok) {
codeButton.remove();
totpimg.remove();
code.value = '';
codeButton = document.createElement('button');
codeButton.innerText = 'Verify';
codeButton.addEventListener('click', function (event) {
event.preventDefault();
verifyUser();
});
form.append(codeButton);
status.innerText = 'Secret saved';
} else {
status.innerText = 'Save failed:' + response.statusText;
}
form.append(status);
})
.catch((err) => console.error(err))
.finally(() => (document.body.style.cursor = 'default'));
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment