Index cleanup

src/css/style.css

@@ -172,3 +172,20 @@ pre {
 .card-stacked {
     width: 100%;
 }
+
+.list>li {
+    list-style-type: circle !important;
+    margin-left: 20px;
+}
+
+.underConstruction {
+    color:#999999;
+}
+
+.flow-card {
+    height: 550px;
+}
+
+.section-header {
+    text-align: center;
+}

src/flow/code-1.html

@@ -109,7 +109,7 @@
                                 </ul>
                                 <div class="row" style="text-align: center; margin-top: 25px;">
                                     <a id="sendRequestBtn" style="width: 20%" class="waves-effect waves-light btn"
-                                        href="#">Send request</a>
+                                        href="#">Authenticate</a>
                                 </div>
                             </div>
                         </div>
@@ -119,10 +119,8 @@
         </div>
     </main>
     <footer class="page-footer"></footer>
+    <script src="js/load-layout.js"></script>
     <script>
-        $(".page-footer").load("../layout/footer.html");
-        $("#page-header").load("../layout/header.html");
-
         function setCookie(name, value, minutes) {
             const date = new Date();
             date.setTime(date.getTime() + (minutes * 60 * 1000));

src/flow/code-2.html

@@ -88,10 +88,8 @@
         </div>
     </main>
     <footer class="page-footer"></footer>
+    <script src="js/load-layout.js"></script>
     <script>
-        $(".page-footer").load("../layout/footer.html");
-        $("#page-header").load("../layout/header.html");
-
         $("#queryParams").text(window.location.search)
 
         const urlParams = new URLSearchParams(window.location.search);

src/flow/code-3.html

@@ -100,10 +100,8 @@
         </div>
     </main>
     <footer class="page-footer"></footer>
+    <script src="js/load-layout.js"></script>
     <script>
-        $(".page-footer").load("../layout/footer.html");
-        $("#page-header").load("../layout/header.html");
-
         const tokenEndpoint = 'https://sso.rumbuddy.cz/realms/OAuthPlayground/protocol/openid-connect/token';
         const clientID = 'oauth-playground';
         const code = new URLSearchParams(window.location.search).get('code');

src/index.html

@@ -21,7 +21,7 @@
     <main>
         <div class="container">
             <div class="section">
-                <h3 class="header" style="text-align: center;">Welcome to OAuth 2.0 Playground</h3>
+                <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
                 insights into the OAuth token exchange,
@@ -29,16 +29,23 @@
                 is to bolster
                 understanding and confidence in implementing OAuth, ensuring secure and efficient user authentication and authorization
                 in modern web applications.</p>
+                <p>This project is an open-source initiative by Y Soft, as such we welcome any feedback or contributions at:</p>
+                <ul class="list">
+                    <li><b>Client side: </b><a 
+                        href="https://github.com/ysoftdevs/oauth-playground-client" target="_blank">ysoftdevs/oauth-playground-client</a></li>
+                    <li><b>Server side: </b><a
+                        href="https://github.com/ysoftdevs/oauth-playground-server" target="_blank">ysoftdevs/oauth-playground-server</a></li>
+                </ul>
             </div>
 
             <div class="section">
-                <h3 class="header" style="text-align: center;">Flows</h3>
+                <h3 class="header section-header">Flows</h3>
                 <div class="divider" style="margin-bottom: 10px;"></div>
                 
                 <div class="row">
                     <div class="col s4">
                         <div class="card horizontal">
-                            <div class="card-stacked" style="height: 500px">
+                            <div class="card-stacked flow-card">
                                 <div class="card-content">
                                     <h5>Authorization Code Flow</h5>
                                     <p>OAuth 2.0 protocol designed for web applications that can securely store client secrets.
@@ -56,7 +63,25 @@
                     </div>
                     <div class="col s4">
                         <div class="card horizontal">
-                            <div class="card-stacked" style="height: 500px">
+                            <div class="card-stacked flow-card">
+                                <div class="card-content">
+                                    <h5>PKCE</h5>
+                                    <p>Proof Key for Code Exchange is a security protocol for the OAuth 2.0 authorization framework, designed to prevent
+                                    interception attacks in the authorization code flow. It's especially crucial for mobile or single-page applications
+                                    where storing a client secret securely is challenging. In PKCE, the client creates a dynamic "code verifier" and its
+                                    transformed "code challenge." The server remembers this challenge, and when the authorization code is exchanged for an
+                                    access token, the client provides the original verifier. The server validates it against the stored challenge, ensuring
+                                    added security against malicious interceptions.</p>
+                                </div>
+                                <div class="card-action underConstruction">
+                                    <i class="tiny material-icons">build</i> Under construction
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col s4">
+                        <div class="card horizontal">
+                            <div class="card-stacked flow-card">
                                 <div class="card-content">
                                     <h5>Device Authorization Grant</h5>
                                     <p>OAuth 2.0 flow optimized for devices that either lack a browser or have limited input
@@ -67,15 +92,35 @@
                                     streamlined user experience for devices with restricted input or display capabilities, allowing them to access protected
                                     resources without the need for intricate user interactions.</p>
                                 </div>
-                                <div class="card-action">
+                                <div class="card-action underConstruction">
-                                    <!--<a onclick="loadWebAuthNPage()">Try it</a>-->
+                                    <i class="tiny material-icons">build</i> Under construction
                                 </div>
                             </div>
                         </div>
                     </div>
                     <div class="col s4">
                         <div class="card horizontal">
-                            <div class="card-stacked" style="height: 500px">
+                            <div class="card-stacked flow-card">
+                                <div class="card-content">
+                                    <h5>CIBA</h5>
+                                    <p>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 s4">
+                        <div class="card horizontal">
+                            <div class="card-stacked flow-card">
                                 <div class="card-content">
                                     <h5>WebAuthN</h5>
                                     <p>This protocol leverages public key cryptography and allows users to authenticate using biometrics, mobile devices, or
@@ -85,8 +130,8 @@
                                     biometric or a physical action on a security key. WebAuthn enhances user security by reducing reliance on easily
                                     compromised passwords and defending against phishing attacks.</p>
                                 </div>
-                                <div class="card-action">
+                                <div class="card-action underConstruction">
-                                    <!--<a onclick="loadWebAuthNPage()">Try it</a>-->
+                                    <i class="tiny material-icons">build</i> Under construction
                                 </div>
                             </div>
                         </div>
@@ -96,9 +141,6 @@
         </div>
     </main>
     <footer class="page-footer"></footer>
-    <script>
+    <script src="js/load-layout.js"></script>
-        $(".page-footer").load("layout/footer.html");
-        $("#page-header").load("layout/header.html");
-    </script>
 </body>
 </html>

src/js/load-layout.js

@@ -0,0 +1,2 @@
+$(".page-footer").load("layout/footer.html");
+$("#page-header").load("layout/header.html");

src/layout/footer.html

@@ -18,7 +18,6 @@
             <ul>
                 <li><a class="grey-text text-lighten-3" href="https://www.oauth.com/" target="_blank">OAuth 2.0
                         Simplified</a></li>
-                <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
                 <li><a class="grey-text text-lighten-3" href="https://en.wikipedia.org/wiki/OAuth" target="_blank">OAuth
                         Wikipedia</a></li>
                 <li><a class="grey-text text-lighten-3" href="https://www.ietf.org/rfc/rfc6749.txt"
@@ -29,7 +28,10 @@
 </div>
 <div class="footer-copyright">
     <div class="container">
-        © 2023 Y Soft Corporation
+        © 2023 Y Soft Corporation (
+            <a class="grey-text text-lighten-4" style="color:#FF6600 !important; font-weight:bold;" href="https://github.com/m0rsalis" target="_blank">m0rsalis</a> and 
+            <a class="grey-text text-lighten-4" style="color:#FF6600 !important; font-weight:bold;"
+                href="https://github.com/xRodney/" target="_blank">xRodney</a>)
         <a class="grey-text text-lighten-4 right" style="color:#FF6600 !important; font-weight:bold;"
             href="https://www.daretothinkbyg.com" target="_blank">Join us today!</a>
     </div>