WIP webauthn - a dummy frontend

This commit is contained in:
Dusan Jakub committed 2023-09-20 17:52:42 +02:00
1 parent b0637e8541
commit 5a677721df
1 file changed
+118 -275
+118 -275
View File
@@ -1,280 +1,123 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>oauth-playground-server - 1.0.0-SNAPSHOT</title>
<style>
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}
code {
font-family: "Courier New", monospace;
color: #e83e8c;
word-break: break-word;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0.5rem;
font-weight: 400;
line-height: 1.5;
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.6rem }
h3 { font-size: 1.5rem }
h4 { font-size: 1.4rem }
h5 { font-size: 1.25rem }
h6 { font-size: 1rem }
p {
padding: .15rem 0;
margin: 0;
line-height: 1.3rem;
}
a {
text-decoration: underline;
color: #1259A5;
}
a:hover, a:active { color: #c00; }
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
clear: both;
}
.header-wrapper {
padding: 0 13rem;
background: black;
}
.banner-wrapper {
padding: 0 13rem;
background: url(data:image/png;base64,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 truncated
}
.content-wrapper {
padding: 0 13rem;
background: white;
}
.header {
background-position: 0 1rem;
min-height: 60px;
grid-column: span 12;
}
#quarkus-logo-svg {
width: 200px;
height: 30px;
padding-top: 1rem;
}
.banner {
grid-column: span 12;
padding: 2rem 0;
}
.callout {
color: white;
font-size: 3.5rem;
margin: 0;
padding-top: 5rem;
grid-column: span 8;
}
.app-details {
margin: 1rem 0;
border: 1px solid lightgrey;
padding: 1rem;
background: white;
font-size: .75rem;
font-weight: 300;
grid-column: span 4;
}
.app-details code { font-size: 87.5%; }
.app-details ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.app-details ul li { margin-bottom: 0.2rem; }
.app-details h5 {
margin: 0;
padding: 0;
}
.left-column {
grid-column: span 8;
padding-right: 3rem;
}
.left-column p {
padding: .15rem 0;
margin: 0;
font-weight: 300;
}
.left-column ul {
margin: 0;
padding: 10px 0 0 25px;
list-style-type: "\1F680";
font-weight: 300;
}
.left-column li { padding-left: 10px; }
.left-column .cta-button {
margin: 20px 0;
display: inline-block;
padding: 1rem 2rem;
background-color: #4695EB;
font-weight: 600;
color: white;
text-decoration: none;
text-transform: uppercase;
}
.right-column {
grid-column: span 4;
margin-top: 1rem;
font-weight: 200;
}
.right-column h5 {
padding: 1rem 0 .25rem 0;
margin: 0;
font-weight: 300;
}
.right-column h3 { font-weight: 400;}
.right-column ul {
margin: 0;
list-style-type: circle;
}
.right-column li {
padding: .5rem 0 0 0;
}
.provided-code {
line-height: 20px;
}
.provided-code b {
font-weight: 400;
margin-bottom: 15px;
}
@media screen and (max-width: 1023px) {
.header-wrapper {
padding: 0 1rem;
background: black;
}
.banner-wrapper { padding: 0 1rem; }
.content-wrapper {
padding: 0 1rem;
background: white;
}
.left-column {
grid-column: span 12;
}
.right-column {
grid-column: span 12;
margin: 3rem 0;
}
.callout {
color: white;
font-size: 3.5rem;
margin: 0;
padding: 1rem 0;
grid-column: span 12;
}
.app-details {
margin: 1rem 0;
border: 1px solid lightgrey;
padding: 1rem;
background: white;
font-size: 1rem;
font-weight: 300;
grid-column: span 12;
}
}
</style>
</head>
<body>
<div class="header-wrapper">
<div class="grid">
<div class="header">
<svg id="quarkus-logo-svg" data-name="Quarkus Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 195">
<defs>
<style>.cls-1 {
fill: #fff;
}
<head>
<meta charset="UTF-8">
<title>Login</title>
<script charset="UTF-8" src="/q/webauthn/webauthn.js" type="text/javascript"></script>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
}
.cls-2 {
fill: #4695eb;
}
button, input {
margin: 5px 0;
}
.cls-3 {
fill: #ff004a;
}</style>
</defs>
<title>quarkus_logo_horizontal_rgb_1280px_reverse</title>
<path class="cls-1"
d="M404,89.39q0,25.9-10.49,43.07a52.31,52.31,0,0,1-29.61,23.24l32.3,33.39H373.29l-26.45-30.44-5.11.19q-30,0-46.27-18.22T279.17,89.2q0-32.93,16.34-51.05T341.92,20q29.24,0,45.66,18.45T404,89.39Zm-108.14,0q0,27.39,11.74,41.55t34.11,14.15q22.56,0,34.07-14.11t11.51-41.59q0-27.21-11.47-41.27T341.92,34.05q-22.56,0-34.3,14.16T295.88,89.39Z"/>
<path class="cls-1"
d="M559.56,22.15V109.4q0,23.05-14,36.25T507,158.84q-24.51,0-37.92-13.29T455.7,109V22.15h15.78v88q0,16.88,9.28,25.91t27.29,9q17.16,0,26.45-9.08T543.78,110V22.15Z"/>
<path class="cls-1"
d="M703.6,157,686.7,114.1H632.31L615.6,157h-16L653.29,21.6h13.27L719.93,157Zm-21.82-57L666,58.21q-3.07-7.92-6.32-19.46a172.55,172.55,0,0,1-5.85,19.46l-16,41.78Z"/>
<path class="cls-1"
d="M777.19,100.92V157H761.4V22.15h37.23q25,0,36.89,9.5t11.93,28.59q0,26.74-27.29,36.16L857,157H838.35l-32.86-56.07Zm0-13.47h21.62q16.71,0,24.51-6.6t7.79-19.78q0-13.37-7.93-19.27T797.7,35.89H777.19Z"/>
<path class="cls-1"
d="M999.75,157H981.18L931.71,91.6l-14.2,12.54V157H901.73V22.15h15.78V89l61.54-66.87h18.66L943.13,80.72Z"/>
<path class="cls-1"
d="M1143.69,22.15V109.4q0,23.05-14,36.25t-38.52,13.19q-24.5,0-37.92-13.29T1039.82,109V22.15h15.78v88q0,16.88,9.28,25.91t27.29,9q17.17,0,26.46-9.08t9.28-26.06V22.15Z"/>
<path class="cls-1"
d="M1279,121.11q0,17.8-13,27.76t-35.28,10q-24.13,0-37.13-6.18V137.53a97.82,97.82,0,0,0,18.2,5.53,95.67,95.67,0,0,0,19.49,2q15.78,0,23.76-6t8-16.55q0-7-2.83-11.48t-9.46-8.26q-6.65-3.78-20.19-8.58-18.94-6.72-27.06-16t-8.12-24.07q0-15.58,11.79-24.81t31.18-9.22a92.55,92.55,0,0,1,37.22,7.37l-4.91,13.65q-16.82-7-32.68-7-12.53,0-19.58,5.35t-7.06,14.85q0,7,2.6,11.48t8.77,8.21q6.18,3.73,18.89,8.26,21.36,7.56,29.38,16.23T1279,121.11Z"/>
<polygon class="cls-2" points="126.05 34.6 96.61 51.59 126.05 68.59 126.05 34.6"/>
<polygon class="cls-3" points="67.17 34.6 67.17 68.59 96.61 51.59 67.17 34.6"/>
<polygon class="cls-1" points="126.05 68.59 96.61 51.59 67.17 68.59 96.61 85.59 126.05 68.59"/>
<polygon class="cls-2" points="36.13 88.36 65.57 105.36 65.57 71.37 36.13 88.36"/>
<polygon class="cls-3" points="65.57 139.35 95.01 122.36 65.57 105.36 65.57 139.35"/>
<polygon class="cls-1" points="65.57 71.37 65.57 105.36 95.01 122.36 95.01 88.36 65.57 71.37"/>
<polygon class="cls-2" points="127.65 139.35 127.65 105.36 98.21 122.36 127.65 139.35"/>
<polygon class="cls-3" points="157.09 88.36 127.65 71.37 127.65 105.36 157.09 88.36"/>
<polygon class="cls-1" points="98.21 122.36 127.65 105.36 127.65 71.37 98.21 88.36 98.21 122.36"/>
<path class="cls-2"
d="M160.5,1H32.72A31.81,31.81,0,0,0,1,32.72V160.5a31.81,31.81,0,0,0,31.72,31.72h87.51L96.61,134.85,79.48,171.07H32.72A10.71,10.71,0,0,1,22.15,160.5V32.72A10.71,10.71,0,0,1,32.72,22.15H160.5a10.71,10.71,0,0,1,10.57,10.57V160.5a10.71,10.71,0,0,1-10.57,10.57H132.77l8.71,21.15h19a31.81,31.81,0,0,0,31.72-31.72V32.72A31.81,31.81,0,0,0,160.5,1Z"/>
</svg>
</div>
</div>
</div>
<div class="banner-wrapper">
<div class="grid">
<div class="banner">
<div class="grid">
<div class="callout">Congratulations!</div>
<div class="app-details">
<h5>Application</h5>
<ul>
<li>GroupId: <code>com.ysoft.geecon</code></li>
<li>ArtifactId: <code>oauth-playground-server</code></li>
<li>Version: <code>1.0.0-SNAPSHOT</code></li>
<li>Quarkus Version: <code>3.3.2</code></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="content-wrapper">
<div class="grid">
<div class="left-column">
<h1>You just made a Quarkus application.</h1>
<p>This page is served by Quarkus.</p>
<a href="/q/dev-ui/" class="cta-button">Visit the Dev UI</a>
<p>This page: <code>src/main/resources/META-INF/resources/index.html</code></p>
<p>App configuration: <code>src/main/resources/application.properties</code></p>
<p>Static assets: <code>src/main/resources/META-INF/resources/</code></p>
<p>Code: <code>src/main/java</code></p>
<p>Dev UI V1: <a href="/q/dev-v1/">/q/dev-v1</a></p>
<p>Generated starter code:</p>
<ul class="provided-code">
<li class="provided-code">
<b>RESTEasy Reactive</b>&nbsp;Easily start your Reactive RESTful Web Services
<br />&rsaquo; <code>@Path: <a href="/hello" class="path-link" target="_blank">/hello</a></code>
<br />&rsaquo; <a href="https://quarkus.io/guides/getting-started-reactive#reactive-jax-rs-resources" class="guide-link" target="_blank">Related guide</a>
</li>
.item {
padding: 20px;
}
</ul>
</div>
<div class="right-column">
<h5><a href="https://quarkus.io/guides/">Documentation</a></h5>
<p>Practical step-by-step guides to help you achieve a specific goal. Use them to help get your work
done.</p>
<h5><a href="https://quarkus.io/guides/maven-tooling">Set up your IDE</a></h5>
<p>Everyone has a favorite IDE they like to use to code. Learn how to configure yours to maximize your
Quarkus productivity.</p>
</div>
</div>
</div>
</body>
</html>
nav > ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav > ul > li {
float: left;
}
nav > ul > li > a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav > ul > li > a:hover {
background-color: #111;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="/api/public">Public API</a></li>
<li><a href="/api/users/me">User API</a></li>
<li><a href="/api/admin">Admin API</a></li>
<li><a href="/q/webauthn/logout">Logout</a></li>
</nav>
<div class="container">
<div class="item">
<h1>Status</h1>
<div id="result"></div>
</div>
<div class="item">
<h1>Login</h1>
<p>
<input id="userNameLogin" placeholder="User name"/><br/>
<button id="login">Login</button>
</p>
</div>
<div class="item">
<h1>Register</h1>
<p>
<input id="userNameRegister" placeholder="User name"/><br/>
<input id="firstName" placeholder="First name"/><br/>
<input id="lastName" placeholder="Last name"/><br/>
<button id="register">Register</button>
</p>
</div>
</div>
<script type="text/javascript">
const webAuthn = new WebAuthn({
callbackPath: '/q/webauthn/callback',
registerPath: '/q/webauthn/register',
loginPath: '/q/webauthn/login'
});
const result = document.getElementById('result');
fetch('/api/public/me')
.then(response => response.text())
.then(name => result.append("User: " + name));
const loginButton = document.getElementById('login');
loginButton.onclick = () => {
var userName = document.getElementById('userNameLogin').value;
result.replaceChildren();
webAuthn.login({name: userName})
.then(body => {
result.append("User: " + userName);
})
.catch(err => {
result.append("Login failed: " + err);
});
return false;
};
const registerButton = document.getElementById('register');
registerButton.onclick = () => {
var userName = document.getElementById('userNameRegister').value;
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
result.replaceChildren();
webAuthn.register({name: userName, displayName: firstName + " " + lastName})
.then(body => {
result.append("User: " + userName);
})
.catch(err => {
result.append("Registration failed: " + err);
});
return false;
};
</script>
</body>
</html>