From 6d8427103a542ad433020a85fc0260261c21cbc6 Mon Sep 17 00:00:00 2001
From: konarfil <filip.konarik@ysoft.com>
Date: Mon, 25 Sep 2023 18:15:59 +0200
Subject: [PATCH] Config extracted

---
 src/flow/code-3.html | 10 +++++-----
 src/flow/code.html   |  9 ++++-----
 src/flow/pkce-2.html |  9 ++++-----
 src/flow/pkce-4.html | 10 +++++-----
 src/js/env-config.js |  9 +++++++++
 5 files changed, 27 insertions(+), 20 deletions(-)
 create mode 100644 src/js/env-config.js

diff --git a/src/flow/code-3.html b/src/flow/code-3.html
index c2cedf2..0001d4a 100644
--- a/src/flow/code-3.html
+++ b/src/flow/code-3.html
@@ -151,15 +151,15 @@
     </main>
     <footer class="page-footer"></footer>
     <script src="../js/load-layout.js"></script>
+    <script src="../js/env-config.js"></script>
     <script>
-        const tokenEndpoint = 'https://www.sso.oauth-playground.online/auth/token';
-        const clientID = 'oauth-playground';
+        const tokenEndpoint = baseUrl + "/token";
         const code = new URLSearchParams(window.location.search).get('code');
 
         function fillRequestExample() {
             const requestExample = 
                 "grant_type=authorization_code" + "\n"
-                + "&client_id=" + clientID + "\n"
+                + "&client_id=" + getClientId() + "\n"
                 + "&redirect_uri=" + getRedirectUri() + "\n"
                 + "&code=" + code;
 
@@ -168,7 +168,7 @@
 
             $("#tokenUrl").text(tokenEndpoint);
             $("#grantType").text("authorization_code");
-            $("#clientId").text(clientID);
+            $("#clientId").text(getClientId());
             $("#redirectUri").text(getRedirectUri());
             $("#code").text(code);
         }
@@ -182,7 +182,7 @@
 
             const bodyData = new URLSearchParams();
             bodyData.append('grant_type', 'authorization_code');
-            bodyData.append('client_id', clientID);
+            bodyData.append('client_id', getClientId());
             bodyData.append('redirect_uri', getRedirectUri());
             bodyData.append('code', code);
 
diff --git a/src/flow/code.html b/src/flow/code.html
index 3d2e75a..5f884b5 100644
--- a/src/flow/code.html
+++ b/src/flow/code.html
@@ -118,6 +118,7 @@
     </main>
     <footer class="page-footer"></footer>
     <script src="../js/load-layout.js"></script>
+    <script src="../js/env-config.js"></script>
     <script>
         function generateSessionState () {
             return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
@@ -126,7 +127,7 @@
         function constructRequestUrl () {
             return baseUrl 
                 + "?" + "response_type=" + responseType 
-                + "&" + "client_id=" + clientId 
+                + "&" + "client_id=" + getClientId() 
                 + "&" + "redirect_uri=" + redirectUri 
                 + "&" + "scope=" + scope 
                 + "&" + "state=" + state;
@@ -135,7 +136,7 @@
         function fillExample() {
             const requestExample = baseUrl + "\n"
                 + "    ?response_type=" + responseType + "\n"
-                + "    &client_id=" + clientId + "\n"
+                + "    &client_id=" + getClientId() + "\n"
                 + "    &redirect_uri=" + redirectUri + "\n"
                 + "    &scope=" + scope + "\n"
                 + "    &state=" + state;
@@ -143,7 +144,7 @@
             $("#requestUriExample").text(requestExample);
             $("#baseUrl").text(baseUrl);
             $("#responseType").text(responseType);
-            $("#clientId").text(clientId);
+            $("#clientId").text(getClientId());
             $("#redirectUri").text(redirectUri);
             $("#scope").text(scope);
             $("#state").text(state);
@@ -153,9 +154,7 @@
             return window.location.protocol + "//" + window.location.host + "/flow/code-2";
         }
 
-        const baseUrl = "https://www.sso.oauth-playground.online/auth";
         const responseType = "code";
-        const clientId = "oauth-playground";
         const redirectUri = getRedirectUri();
         const scope = "offline_access";
         const state = generateSessionState();
diff --git a/src/flow/pkce-2.html b/src/flow/pkce-2.html
index fcb87be..8e4dfd4 100644
--- a/src/flow/pkce-2.html
+++ b/src/flow/pkce-2.html
@@ -134,6 +134,7 @@
     <footer class="page-footer"></footer>
     <script src="../js/load-layout.js"></script>
     <script src="../js/cookies.js"></script>
+    <script src="../js/env-config.js"></script>
     <script>
         function generateSessionState () {
             return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
@@ -142,7 +143,7 @@
         function constructRequestUrl () {
             return baseUrl 
                 + "?" + "response_type=" + responseType 
-                + "&" + "client_id=" + clientId 
+                + "&" + "client_id=" + getClientId() 
                 + "&" + "redirect_uri=" + redirectUri 
                 + "&" + "scope=" + scope 
                 + "&" + "state=" + state
@@ -153,7 +154,7 @@
         function fillExample() {
             const requestExample = baseUrl + "\n"
                 + "    ?response_type=" + responseType + "\n"
-                + "    &client_id=" + clientId + "\n"
+                + "    &client_id=" + getClientId() + "\n"
                 + "    &redirect_uri=" + redirectUri + "\n"
                 + "    &scope=" + scope + "\n"
                 + "    &state=" + state + "\n"
@@ -163,7 +164,7 @@
             $("#requestUriExample").text(requestExample);
             $("#baseUrl").text(baseUrl);
             $("#responseType").text(responseType);
-            $("#clientId").text(clientId);
+            $("#clientId").text(getClientId());
             $("#redirectUri").text(redirectUri);
             $("#scope").text(scope);
             $("#state").text(state);
@@ -175,9 +176,7 @@
             return window.location.protocol + "//" + window.location.host + "/flow/pkce-3";
         }
 
-        const baseUrl = "https://www.sso.oauth-playground.online/auth";
         const responseType = "code";
-        const clientId = "oauth-playground";
         const redirectUri = getRedirectUri();
         const scope = "offline_access";
         const state = generateSessionState();
diff --git a/src/flow/pkce-4.html b/src/flow/pkce-4.html
index 252c898..6e4872b 100644
--- a/src/flow/pkce-4.html
+++ b/src/flow/pkce-4.html
@@ -165,16 +165,16 @@
     <footer class="page-footer"></footer>
     <script src="../js/load-layout.js"></script>
     <script src="../js/cookies.js"></script>
+    <script src="../js/env-config.js"></script>
     <script>
-        const tokenEndpoint = 'https://www.sso.oauth-playground.online/auth/token';
-        const clientID = 'oauth-playground';
+        const tokenEndpoint = baseUrl + "/token";
         const code = new URLSearchParams(window.location.search).get('code');
         const codeVerifier = getCookie("code_verifier");
 
         function fillRequestExample() {
             const requestExample = 
                 "grant_type=authorization_code" + "\n"
-                + "&client_id=" + clientID + "\n"
+                + "&client_id=" + getClientId() + "\n"
                 + "&redirect_uri=" + getRedirectUri() + "\n"
                 + "&code=" + code + "\n"
                 + "&code_verifier=" + codeVerifier;
@@ -184,7 +184,7 @@
 
             $("#tokenUrl").text(tokenEndpoint);
             $("#grantType").text("authorization_code");
-            $("#clientId").text(clientID);
+            $("#clientId").text(getClientId());
             $("#redirectUri").text(getRedirectUri());
             $("#code").text(code);
             $("#codeVerifier").text(codeVerifier);
@@ -199,7 +199,7 @@
 
             const bodyData = new URLSearchParams();
             bodyData.append('grant_type', 'authorization_code');
-            bodyData.append('client_id', clientID);
+            bodyData.append('client_id', getClientId());
             bodyData.append('redirect_uri', getRedirectUri());
             bodyData.append('code', code);
             bodyData.append('code_verifier', codeVerifier);
diff --git a/src/js/env-config.js b/src/js/env-config.js
new file mode 100644
index 0000000..2ac0398
--- /dev/null
+++ b/src/js/env-config.js
@@ -0,0 +1,9 @@
+const baseUrl = "https://www.sso.oauth-playground.online/auth";
+
+function getClientId() {
+    if (window.location.hostname === "localhost") {
+        return "oauth-playground-localhost";
+    }
+
+    return "oauth-playground";
+}
\ No newline at end of file