From 7e4e38cc887d3ab772237678bdbff87513705b5d Mon Sep 17 00:00:00 2001
From: konarfil <filip.konarik@ysoft.com>
Date: Fri, 22 Sep 2023 12:30:23 +0200
Subject: [PATCH] Index cleanup

---
 src/css/style.css      | 17 ++++++++++
 src/flow/code-1.html   |  6 ++--
 src/flow/code-2.html   |  4 +--
 src/flow/code-3.html   |  4 +--
 src/index.html         | 70 +++++++++++++++++++++++++++++++++---------
 src/js/load-layout.js  |  2 ++
 src/layout/footer.html |  6 ++--
 7 files changed, 83 insertions(+), 26 deletions(-)
 create mode 100644 src/js/load-layout.js

diff --git a/src/css/style.css b/src/css/style.css
index fb2a5fe..9a21c9d 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -171,4 +171,21 @@ 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;
 }
\ No newline at end of file
diff --git a/src/flow/code-1.html b/src/flow/code-1.html
index 12d467a..d820959 100644
--- a/src/flow/code-1.html
+++ b/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));
diff --git a/src/flow/code-2.html b/src/flow/code-2.html
index b80d0a9..63cf2f2 100644
--- a/src/flow/code-2.html
+++ b/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);
diff --git a/src/flow/code-3.html b/src/flow/code-3.html
index 7d306f3..5e7f549 100644
--- a/src/flow/code-3.html
+++ b/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');
diff --git a/src/index.html b/src/index.html
index ea9443d..e2deb09 100644
--- a/src/index.html
+++ b/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">
-                                    <!--<a onclick="loadWebAuthNPage()">Try it</a>-->
+                                <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" 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">
-                                    <!--<a onclick="loadWebAuthNPage()">Try it</a>-->
+                                <div class="card-action underConstruction">
+                                    <i class="tiny material-icons">build</i> Under construction
                                 </div>
                             </div>
                         </div>
@@ -96,9 +141,6 @@
         </div>
     </main>
     <footer class="page-footer"></footer>
-    <script>
-        $(".page-footer").load("layout/footer.html");
-        $("#page-header").load("layout/header.html");
-    </script>
+    <script src="js/load-layout.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/js/load-layout.js b/src/js/load-layout.js
new file mode 100644
index 0000000..b47dd02
--- /dev/null
+++ b/src/js/load-layout.js
@@ -0,0 +1,2 @@
+$(".page-footer").load("layout/footer.html");
+$("#page-header").load("layout/header.html");
\ No newline at end of file
diff --git a/src/layout/footer.html b/src/layout/footer.html
index 55ff65b..19fb74c 100644
--- a/src/layout/footer.html
+++ b/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>