github-mirrors/oauth-playground-client
1
0
Fork 0
mirror of https://github.com/ysoftdevs/oauth-playground-client.git synced 2026-04-18 14:49:47 +02: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 { .flow-card {
height: 550px; height: 100%;
} }
.section-header { .section-header {
@@ -239,10 +239,22 @@ pre {
font-weight: bold; font-weight: bold;
} }
@media screen and (max-width: 1200px) { .flows-container {
.flow-card { display: flex;
height: 575px; 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) { @media screen and (max-width: 600px) {
@@ -250,10 +262,6 @@ pre {
font-size: 1.5rem; font-size: 1.5rem;
} }
.flow-card {
height: 100%;
}
.page-footer .footer-copyright { .page-footer .footer-copyright {
min-height: 0; min-height: 0;
} }

33
src/index.html
View File

@@ -44,10 +44,10 @@
<div class="section"> <div class="section">
<h3 class="header section-header">Flows</h3> <h3 class="header section-header">Flows</h3>
<div class="divider" style="margin-bottom: 10px;"></div> <div class="divider" style="margin-bottom: 10px;"></div>
<div class="row"> <div class="row flows-container">
<div class="col xl4 m6 s12"> <div class="col xl4 m6 s12">
<div class="card horizontal"> <div class="card horizontal">
<div class="card-stacked flow-card"> <div class="card-stacked">
<div class="card-content"> <div class="card-content">
<h5>Authorization Code Flow</h5> <h5>Authorization Code Flow</h5>
<p class="justified"> <p class="justified">
@@ -67,7 +67,7 @@
</div> </div>
<div class="col xl4 m6 s12"> <div class="col xl4 m6 s12">
<div class="card horizontal"> <div class="card horizontal">
<div class="card-stacked flow-card"> <div class="card-stacked">
<div class="card-content"> <div class="card-content">
<h5>PKCE</h5> <h5>PKCE</h5>
<p class="justified"> <p class="justified">
@@ -87,7 +87,7 @@
</div> </div>
<div class="col xl4 m6 s12"> <div class="col xl4 m6 s12">
<div class="card horizontal"> <div class="card horizontal">
<div class="card-stacked flow-card"> <div class="card-stacked">
<div class="card-content"> <div class="card-content">
<h5>Device Authorization Grant</h5> <h5>Device Authorization Grant</h5>
<p class="justified"> <p class="justified">
@@ -108,7 +108,7 @@
</div> </div>
<div class="col xl4 m6 s12"> <div class="col xl4 m6 s12">
<div class="card horizontal"> <div class="card horizontal">
<div class="card-stacked flow-card"> <div class="card-stacked">
<div class="card-content"> <div class="card-content">
<h5>WebAuthn</h5> <h5>WebAuthn</h5>
<p class="justified"> <p class="justified">
@@ -128,7 +128,28 @@
</div> </div>
<div class="col xl4 m6 s12"> <div class="col xl4 m6 s12">
<div class="card horizontal"> <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"> <div class="card-content">
<h5>Implicit Flow (deprecated)</h5> <h5>Implicit Flow (deprecated)</h5>
<p class="justified"> <p class="justified">