github-mirrors/oauth-playground-client
1
0
Fork 0
mirror of https://github.com/ysoftdevs/oauth-playground-client.git synced 2026-01-11 14:30:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Rewrite front page to flexbox

Browse Source
This commit is contained in:
konarfil
2023-10-10 14:14:45 +02:00
parent c18e79ff22
commit eabb7dbf6b
2 changed files with 44 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/css/style.css
View File

@@ -188,7 +188,7 @@ pre {
}
.flow-card {
height: 550px;
height: 100%;
}
.section-header {
@@ -239,10 +239,22 @@ pre {
font-weight: bold;
}
@media screen and (max-width: 1200px) {
.flow-card {
height: 575px;
}
.flows-container {
display: flex;
flex-wrap: wrap;
}
.flows-container .col {
display: flex;
}
.flows-container .col .card {
display: flex;
flex-direction: column;
}
.flows-container .col .card .card-content {
flex: 1;
}
@media screen and (max-width: 600px) {
@@ -250,10 +262,6 @@ pre {
font-size: 1.5rem;
}
.flow-card {
height: 100%;
}
.page-footer .footer-copyright {
min-height: 0;
}

33
src/index.html
View File

@@ -44,10 +44,10 @@
<div class="section">
<h3 class="header section-header">Flows</h3>
<div class="divider" style="margin-bottom: 10px;"></div>
<div class="row">
<div class="row flows-container">
<div class="col xl4 m6 s12">
<div class="card horizontal">
<div class="card-stacked flow-card">
<div class="card-stacked">
<div class="card-content">
<h5>Authorization Code Flow</h5>
<p class="justified">
@@ -67,7 +67,7 @@
</div>
<div class="col xl4 m6 s12">
<div class="card horizontal">
<div class="card-stacked flow-card">
<div class="card-stacked">
<div class="card-content">
<h5>PKCE</h5>
<p class="justified">
@@ -87,7 +87,7 @@
</div>
<div class="col xl4 m6 s12">
<div class="card horizontal">
<div class="card-stacked flow-card">
<div class="card-stacked">
<div class="card-content">
<h5>Device Authorization Grant</h5>
<p class="justified">
@@ -108,7 +108,7 @@
</div>
<div class="col xl4 m6 s12">
<div class="card horizontal">
<div class="card-stacked flow-card">
<div class="card-stacked">
<div class="card-content">
<h5>WebAuthn</h5>
<p class="justified">
@@ -128,7 +128,28 @@
</div>
<div class="col xl4 m6 s12">
<div class="card horizontal">
<div class="card-stacked flow-card">
<div class="card-stacked">
<div class="card-content">
<h5>CIBA</h5>
<p class="justified">
Client Initiated Backchannel Authentication is a protocol extension for OAuth 2.0, tailored for scenarios where
the client, such as a financial institution or IoT device, initiates the authentication process without direct user
interaction on the client's platform. This is useful for "decoupled" authentication experiences, where, for instance, a
user might authenticate on their smartphone when prompted by a smart TV app. In CIBA, once the client requests
authentication, the authorization server prompts the user on a previously registered device, such as their mobile phone.
Upon successful authentication, the authorization server sends a token back to the client. This flow provides a seamless
and secure user experience, especially in contexts where traditional OAuth 2.0 interactions might be cumbersome or impractical.
</p>
</div>
<div class="card-action underConstruction">
<i class="tiny material-icons">build</i> Under construction
</div>
</div>
</div>
</div>
<div class="col xl4 m6 s12">
<div class="card horizontal">
<div class="card-stacked">
<div class="card-content">
<h5>Implicit Flow (deprecated)</h5>
<p class="justified">