mirror of
https://github.com/ysoftdevs/oauth-playground-client.git
synced 2026-01-11 22:41:29 +01:00
Mobile optimization
This commit is contained in:
konarfil
@@ -75,15 +75,13 @@ body {
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.btn-large:hover,
|
||||
.btn-small:hover {
|
||||
.btn:active,
|
||||
.btn:focus {
|
||||
background-color: #FF6600;
|
||||
}
|
||||
|
||||
/* For raised buttons */
|
||||
.btn:not(.disabled):hover,
|
||||
.btn-large:not(.disabled):hover,
|
||||
.btn-small:not(.disabled):hover {
|
||||
.btn:not(.disabled):hover {
|
||||
background-color: #FF6600;
|
||||
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
@@ -230,3 +228,46 @@ pre {
|
||||
.qr-container {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
font-size: 2.1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.page-header {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.flow-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-footer .footer-copyright {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.intro-section {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.circle-3 {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.circle-4 {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
@@ -139,11 +139,11 @@
|
||||
|
||||
function fillExample() {
|
||||
const requestExample = baseUrl + "\n"
|
||||
+ " ?response_type=" + responseType + "\n"
|
||||
+ " &client_id=" + getClientId() + "\n"
|
||||
+ " &redirect_uri=" + redirectUri + "\n"
|
||||
+ " &scope=" + scope + "\n"
|
||||
+ " &state=" + state;
|
||||
+ "?response_type=" + responseType + "\n"
|
||||
+ "&client_id=" + getClientId() + "\n"
|
||||
+ "&redirect_uri=" + redirectUri + "\n"
|
||||
+ "&scope=" + scope + "\n"
|
||||
+ "&state=" + state;
|
||||
|
||||
$("#requestUriExample").text(requestExample);
|
||||
$("#baseUrl").text(baseUrl);
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row section">
|
||||
<div class="col s6">
|
||||
<div class="col m6 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked">
|
||||
<div class="card-content">
|
||||
@@ -97,7 +97,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="user-panel" class="col s6" style="display: none;">
|
||||
<div id="user-panel" class="col m6 s12" style="display: none;">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked">
|
||||
<div class="card-content">
|
||||
@@ -105,18 +105,18 @@
|
||||
<p>Device would typically show the user code on it's display (or in console output when connection to display-less device via SSH for example) and where possible, also the URL that the user should visit. Based on the capabilities the URL could be shown as a simple text, or QR code, or if the device didn't have display capable enough, than the URL could be written in a manual distributed with the device.</p>
|
||||
|
||||
<div class="row col s12" style="margin-top: 15px;">
|
||||
<div class="col s2"></div>
|
||||
<div class="col s3" style="padding-top: 5px;">
|
||||
<div class="col m2 s0"></div>
|
||||
<div class="col m3 s12" style="padding-top: 5px;">
|
||||
<h6>User code:</h6>
|
||||
</div>
|
||||
<div class="col s3">
|
||||
<div class="col m3 s9">
|
||||
<input id="user-code" type="text" disabled>
|
||||
</div>
|
||||
<div class="col s2" style="padding-top: 5px;">
|
||||
<div class="col m2 s3" style="padding-top: 5px;">
|
||||
<button title="Copy to clipboard" class="btn-floating waves-effect waves-light" style="background-color: #000000;" onclick="copyUserCodeToClipboard()"><i
|
||||
class="material-icons" style="font-size:18px;">content_copy</i></button>
|
||||
</div>
|
||||
<div class="col s2"></div>
|
||||
<div class="col m2 s0"></div>
|
||||
</div>
|
||||
|
||||
<p>Now that we have the user code, we can for example scan a QR code and finalize this flow on our mobile device:</p>
|
||||
@@ -127,7 +127,7 @@
|
||||
Or for the purposes of this demo, you can click on the button below to open a new window, and finalize this flow there (<i>If no windows pops up, make sure that the pop-up window is not blocked</i>);
|
||||
</p>
|
||||
<div class="row flow-submit-container">
|
||||
<a class="waves-effect waves-light btn full-width" onclick="initiateAuthentication()">Authenticate</a>
|
||||
<a id="auth-btn" class="waves-effect waves-light btn full-width" onclick="initiateAuthentication()">Authenticate</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -271,6 +271,7 @@
|
||||
|
||||
function processCodeFlowResult(data) {
|
||||
$("#start-polling-btn").text("Token obtained");
|
||||
$("#auth-btn").addClass("disabled");
|
||||
$("#result-panel").show();
|
||||
$("#token").text(JSON.stringify(data, null, 2));
|
||||
$([document.documentElement, document.body]).animate({
|
||||
|
||||
@@ -157,13 +157,13 @@
|
||||
|
||||
function fillExample() {
|
||||
const requestExample = baseUrl + "\n"
|
||||
+ " ?response_type=" + responseType + "\n"
|
||||
+ " &client_id=" + getClientId() + "\n"
|
||||
+ " &redirect_uri=" + redirectUri + "\n"
|
||||
+ " &scope=" + scope + "\n"
|
||||
+ " &state=" + state + "\n"
|
||||
+ " &code_challenge=" + codeChallenge + "\n"
|
||||
+ " &code_challenge_method=S256";
|
||||
+ "?response_type=" + responseType + "\n"
|
||||
+ "&client_id=" + getClientId() + "\n"
|
||||
+ "&redirect_uri=" + redirectUri + "\n"
|
||||
+ "&scope=" + scope + "\n"
|
||||
+ "&state=" + state + "\n"
|
||||
+ "&code_challenge=" + codeChallenge + "\n"
|
||||
+ "&code_challenge_method=S256";
|
||||
|
||||
$("#requestUriExample").text(requestExample);
|
||||
$("#baseUrl").text(baseUrl);
|
||||
|
||||
@@ -65,10 +65,10 @@
|
||||
<p>Before we can start the authorization process, we need to create a <b>code verifier</b> and a <b>code challenge</b>. The code verifier is a cryptographically random string that is used to verify the identity of the client. The code challenge is a hashed version of the code verifier, which is sent to the authorization server. The authorization server will then compare the code challenge with the code verifier to verify the identity of the client.</p>
|
||||
</p>
|
||||
<div class="row" style="margin-top: 20px;">
|
||||
<div class="col s3">
|
||||
<div class="col m3 s12">
|
||||
<div class="waves-effect waves-light btn full-width" onclick="generateCodeVerifier()">Generate Code Verifier</div>
|
||||
</div>
|
||||
<div class="col s9">
|
||||
<div class="col m9 s12">
|
||||
<input id="codeVerifier" style="height: 30px;" type="text" disabled/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -76,10 +76,10 @@
|
||||
<p>Now that we habe the code verified, we need to create the code challenge. We do so by hashing the code verifier using the SHA256 algorithm and then encoding it using the URL-safe Base64 encoding.</p>
|
||||
|
||||
<div class="row" style="margin-top: 20px;">
|
||||
<div class="col s3">
|
||||
<div class="col m3 s12">
|
||||
<div id="code-challenge-btn" class="waves-effect waves-light btn full-width disabled" onclick="generateCodeChallenge()">Generate Code Challenge</div>
|
||||
</div>
|
||||
<div class="col s9">
|
||||
<div class="col m9 s12">
|
||||
<input id="codeChallenge" style="height: 30px;" type="text" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
</header>
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="section">
|
||||
<div class="section intro-section">
|
||||
<h3 class="header section-header">Welcome to OAuth 2.0 Playground</h3>
|
||||
<p>This playground serves as an interactive platform designed to familiarize developers and students with the
|
||||
intricacies of OAuth authentication processes. Beyond just theoretical knowledge, this playground provides practical
|
||||
@@ -46,7 +46,7 @@
|
||||
<h3 class="header section-header">Flows</h3>
|
||||
<div class="divider" style="margin-bottom: 10px;"></div>
|
||||
<div class="row">
|
||||
<div class="col s4">
|
||||
<div class="col m4 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
@@ -64,7 +64,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s4">
|
||||
<div class="col m4 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
@@ -82,7 +82,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s4">
|
||||
<div class="col m4 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
@@ -101,7 +101,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s4">
|
||||
<div class="col m4 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
@@ -124,7 +124,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s4">
|
||||
<div class="col m4 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
@@ -151,7 +151,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s4">
|
||||
<div class="col m4 s12">
|
||||
<div class="card horizontal">
|
||||
<div class="card-stacked flow-card">
|
||||
<div class="card-content">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<nav>
|
||||
<div class="nav-wrapper">
|
||||
<a href="/" class="brand-logo center">
|
||||
<div class="nav-wrapper page-header">
|
||||
<a href="/" class="">
|
||||
OAuth 2.0 Playground
|
||||
<span style="font-size: 15px; color:#FF6600; font-weight:bold;">by Y Soft</span>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user