From ada25da0a04a418a8e69532d0cf359ab14b5d8c2 Mon Sep 17 00:00:00 2001
From: Alexey Kazakov <alkazako@redhat.com>
Date: Fri, 30 Aug 2024 11:39:26 -0700
Subject: [PATCH] Simplify social event support in internal landing page (#456)

* Activation code field in internal landing page
---
 pkg/assets/assets_test.go                     |  5 +-
 pkg/assets/static/OpenShift-RGB.svg           |  1 +
 .../static/OpenShift_Data_Science-RGB.svg     |  1 +
 pkg/assets/static/index.html                  | 84 ++++++++++++-------
 pkg/assets/static/landingpage.css             | 32 +++++++
 pkg/assets/static/landingpage.js              | 22 ++++-
 6 files changed, 113 insertions(+), 32 deletions(-)
 create mode 100644 pkg/assets/static/OpenShift-RGB.svg
 create mode 100644 pkg/assets/static/OpenShift_Data_Science-RGB.svg

diff --git a/pkg/assets/assets_test.go b/pkg/assets/assets_test.go
index 266a66fe..f4196aad 100644
--- a/pkg/assets/assets_test.go
+++ b/pkg/assets/assets_test.go
@@ -26,12 +26,13 @@ func TestContent(t *testing.T) {
 
 	// then
 	require.NoError(t, err)
-	require.Len(t, entries, 9)
-	names := make([]string, 9)
+	require.Len(t, entries, 11)
+	names := make([]string, 11)
 	for i, e := range entries {
 		names[i] = e.Name()
 	}
 	assert.ElementsMatch(t, []string{
+		"OpenShift-RGB.svg", "OpenShift_Data_Science-RGB.svg",
 		"codereadyws-logo.svg", "index.html", "landingpage.js",
 		"redhat-logo.svg", "silent-check-sso.html", "favicon.ico",
 		"landingpage.css", "openshift-logo.svg", "rhdeveloper-logo.svg",
diff --git a/pkg/assets/static/OpenShift-RGB.svg b/pkg/assets/static/OpenShift-RGB.svg
new file mode 100644
index 00000000..021a8d66
--- /dev/null
+++ b/pkg/assets/static/OpenShift-RGB.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38"><defs><style>.a{fill:#fff;}.b{fill:#e00;}</style></defs><path d="M28,1H10a9,9,0,0,0-9,9V28a9,9,0,0,0,9,9H28a9,9,0,0,0,9-9V10a9,9,0,0,0-9-9Z"/><path class="a" d="M10.09863,22.18994a.625.625,0,0,1-.25488-1.1958l2.74072-1.22021a.62492.62492,0,1,1,.50879,1.1416l-2.74072,1.22021A.619.619,0,0,1,10.09863,22.18994Z"/><path class="a" d="M8.832,25.49072a.625.625,0,0,1-.25488-1.1958l2.74023-1.22021a.62492.62492,0,1,1,.50879,1.1416L9.08594,25.43652A.61731.61731,0,0,1,8.832,25.49072Z"/><path class="a" d="M26.42773,14.91943a.62473.62473,0,0,1-.2539-1.1958L28.915,12.50342a.62472.62472,0,1,1,.50781,1.1416l-2.74121,1.22021A.61563.61563,0,0,1,26.42773,14.91943Z"/><path class="a" d="M25.16113,18.22021a.62473.62473,0,0,1-.2539-1.1958l2.74023-1.22021a.62472.62472,0,1,1,.50781,1.1416L25.415,18.166A.61581.61581,0,0,1,25.16113,18.22021Z"/><path class="b" d="M18.95166,28.63379A9.593,9.593,0,0,1,12.8291,26.4165a.625.625,0,0,1,.7959-.96386,8.37943,8.37943,0,0,0,13.71289-6.1045.61006.61006,0,0,1,.65039-.59814.6249.6249,0,0,1,.59766.65088,9.65521,9.65521,0,0,1-9.63428,9.23291Z"/><path class="b" d="M9.97461,19.22607l-.02881-.00048a.62539.62539,0,0,1-.59619-.65284A9.6291,9.6291,0,0,1,25.10547,11.5835a.62531.62531,0,0,1-.79688.96386,8.37815,8.37815,0,0,0-13.71,6.082A.62532.62532,0,0,1,9.97461,19.22607Z"/></svg>
\ No newline at end of file
diff --git a/pkg/assets/static/OpenShift_Data_Science-RGB.svg b/pkg/assets/static/OpenShift_Data_Science-RGB.svg
new file mode 100644
index 00000000..c0f413db
--- /dev/null
+++ b/pkg/assets/static/OpenShift_Data_Science-RGB.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38"><defs><style>.a{fill:#fff;}.b{fill:#e00;}</style></defs><path d="M28.0144.9712H9.9856A9.0144,9.0144,0,0,0,.9712,9.9856V28.0144a9.0144,9.0144,0,0,0,9.0144,9.0144H28.0144a9.0144,9.0144,0,0,0,9.0144-9.0144V9.9856A9.0144,9.0144,0,0,0,28.0144.9712Z"/><path class="a" d="M27.9365,25.1621l-4.343-10.4169a.6006.6006,0,0,0,.0315-.1558V10.625H24.5a.625.625,0,0,0,0-1.25H23a.6253.6253,0,0,0-.625.625c0,.0107.0055.02.006.03s-.006.0194-.006.03v4.5293a.6086.6086,0,0,0,.0355.1756.6148.6148,0,0,0,.0124.4225l2.1632,5.1875H20.4785a.625.625,0,1,0,0,1.25h4.6289L26.78,25.6367a1.3089,1.3089,0,0,1,.0947.4883,1.2511,1.2511,0,0,1-1.25,1.25h-9.75a1.2511,1.2511,0,0,1-1.25-1.25,1.2919,1.2919,0,0,1,.0928-.4824l1.0166-2.44a.6251.6251,0,0,0-1.1543-.48L13.5615,25.168a2.5345,2.5345,0,0,0-.1865.957,2.5023,2.5023,0,0,0,2.5,2.5h9.75a2.5023,2.5023,0,0,0,2.5-2.5A2.55,2.55,0,0,0,27.9365,25.1621Z"/><path class="a" d="M17,10.625h.875v4.3218a.625.625,0,0,0,1.25,0V10.06c0-.0107-.0055-.02-.006-.03s.006-.0193.006-.03a.6253.6253,0,0,0-.625-.625H17a.625.625,0,0,0,0,1.25Z"/><path class="b" d="M14.6924,15.5718A2.4214,2.4214,0,1,1,17.1143,13.15,2.4239,2.4239,0,0,1,14.6924,15.5718Zm0-3.5928A1.1714,1.1714,0,1,0,15.8643,13.15,1.1725,1.1725,0,0,0,14.6924,11.979Z"/><path class="b" d="M10.8965,15.5718a.6253.6253,0,0,1-.625-.625V11.354a.625.625,0,0,1,1.25,0v3.5928A.6253.6253,0,0,1,10.8965,15.5718Z"/><path class="b" d="M12.1426,21.625a2.4214,2.4214,0,1,1,2.4219-2.4214A2.4239,2.4239,0,0,1,12.1426,21.625Zm0-3.5928a1.1714,1.1714,0,1,0,1.1719,1.1714A1.1725,1.1725,0,0,0,12.1426,18.0322Z"/><path class="b" d="M18.4893,21.625a.6252.6252,0,0,1-.625-.625V17.4072a.625.625,0,0,1,1.25,0V21A.6253.6253,0,0,1,18.4893,21.625Z"/><path class="b" d="M16.2168,21.625a.6253.6253,0,0,1-.625-.625V17.4072a.625.625,0,1,1,1.25,0V21A.6253.6253,0,0,1,16.2168,21.625Z"/></svg>
\ No newline at end of file
diff --git a/pkg/assets/static/index.html b/pkg/assets/static/index.html
index ba463fa3..4eb684fa 100644
--- a/pkg/assets/static/index.html
+++ b/pkg/assets/static/index.html
@@ -6,7 +6,7 @@
   <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@4.6.3/patternfly.css" crossorigin="anonymous">
   <link rel="stylesheet" href="landingpage.css">
   <script src="https://www.google.com/recaptcha/enterprise.js?render=6LdL7aMlAAAAALvuuAZWjwlOLRKMCIrWjOpv-U3G"></script>
-  <title>OpenShift Developer Sandbox</title>
+  <title>Developer Sandbox for Red Hat OpenShift</title>
 </head>
 <body>
   <div class="pf-c-page" id="page-layout-horizontal-nav">
@@ -24,9 +24,14 @@
             <div class="pf-l-stack__item">
                 <span id="user-loggedin"><span id="username"></span> <button class="logoutbutton" onclick="keycloak.logout()">Logout</button></span>
             </div>
-            <div class="pf-l-stack__item"><span id="userid"></span></div>
-            <div class="pf-l-stack__item"><span id="originalsub"></span></div>
-            <div class="pf-l-stack__item"><button class="pf-c-button pf-m-inline pf-m-link pf-m-small" type="button"id="login-command" onclick="showLoginCommand()">Proxy login command</button></div>
+            <div class="pf-l-stack__item">
+              <button class="collapsible"></button>
+              <div class="collapsible-content">
+                <div class="pf-l-stack__item"><span id="userid"></span></div>
+                <div class="pf-l-stack__item"><span id="originalsub"></span></div>
+                <div class="pf-l-stack__item"><button class="pf-c-button pf-m-inline pf-m-link pf-m-small" type="button"id="login-command" onclick="showLoginCommand()">Proxy login command</button></div>
+              </div>
+            </div>
             <div class="pf-l-stack__item" id="oc-login" style="display:none">
               <div class="pf-c-clipboard-copy">
                 <div class="pf-c-clipboard-copy__group">
@@ -78,7 +83,7 @@
         <table>
           <tr>
             <td><img class="pf-c-brand rhd-logo" src="rhdeveloper-logo.svg" alt="Red Hat Developer Logo" /></td>
-            <td style="padding-left: 0.8em; padding-bottom: 10px; font-size: 1.5em;">OpenShift Developer Sandbox</td>
+            <td style="padding-left: 0.8em; padding-bottom: 10px; font-size: 1.5em;">Developer Sandbox for Red Hat OpenShift</td>
           </tr>
         </table>
       </div>
@@ -98,22 +103,19 @@ <h4 class="pf-c-alert__title">
       </div>
       <div class="pf-c-content">
         <div class="toolchain-state" id="state-getstarted">
-          <button id="loginbutton" class="getstartedbutton-disabled" onclick="login()">Get Started with OpenShift Developer Sandbox</button>
-          <p class="terms">
-            <input onchange="termsAgreed(this)" style="display: table-cell; vertical-align: middle;" type="checkbox">
-            <span>I agree to the <a href="https://www.openshift.com/legal/terms/">Terms and Conditions</a></span>
-          </p>
-          <p class="terms">&copy; 2020, Red Hat Inc.</p>
+          <button id="loginbutton" class="getstartedbutton-enabled" onclick="login()">Get Started with Developer Sandbox</button>
         </div>
         <div class="toolchain-state" id="state-initiate-phone-verification">
-          <p>You need to confirm your account using a mobile phone. Please enter you phone number including country code:</p>
-          <p>
-            Country Code and Phone Number: <input type="text" name="countrycode" id="phone-countrycode" required minlength="1" maxlength="4" size="4" placeholder="+01">
-            - <input type="text" name="phonenumber" id="phone-phonenumber" required minlength="6" maxlength="32" size="15" placeholder="123-4567890">
-            <button class="phone-button" onclick="initiatePhoneVerification()">Send Code</button>
-          </p>
-          <p class="terms">Cost may apply for receiving texts outside of the United States. Please consult with your service provider for details.</p>
-          <p>Alternatively you may confirm your account using an activation code:</p>
+          <div hidden="hidden">
+            <p>You need to confirm your account using a mobile phone. Please enter you phone number including country code:</p>
+            <p>
+              Country Code and Phone Number: <input type="text" name="countrycode" id="phone-countrycode" required minlength="1" maxlength="4" size="4" placeholder="+01">
+              - <input type="text" name="phonenumber" id="phone-phonenumber" required minlength="6" maxlength="32" size="15" placeholder="123-4567890">
+              <button class="phone-button" onclick="initiatePhoneVerification()">Send Code</button>
+            </p>
+            <p class="terms">Cost may apply for receiving texts outside of the United States. Please consult with your service provider for details.</p>
+          </div>
+          <p>Please provide an activation code:</p>
           <p>
             Activation Code: <input type="text" name="activationcode" id="activationcode" required minlength="5" maxlength="5" size="10" placeholder="XXXXX">
             <button class="activationcode-button" onclick="submitActivationCode()">Send Code</button>
@@ -131,36 +133,60 @@ <h4 class="pf-c-alert__title">
           </p>
         </div>
         <div class="toolchain-state" id="state-waiting-for-approval">
-          <h1><i class="fas fa-spinner fa-pulse"></i> Your OpenShift Developer Sandbox account is waiting for approval</h1>
+          <h1><i class="fas fa-spinner fa-pulse"></i> Your Developer Sandbox account is waiting for approval</h1>
         </div>
         <div class="toolchain-state" id="state-waiting-for-provisioning">
-          <h1><i class="fas fa-spinner fa-pulse"></i> Your OpenShift Developer Sandbox account is waiting for provisioning</h1>
+          <h1><i class="fas fa-spinner fa-pulse"></i> Your Developer Sandbox account is waiting for provisioning</h1>
         </div>
         <div class="toolchain-state" id="state-provisioned">
-          <h1><i class="fas fa-spinner fa-pulse"></i> Your OpenShift Developer Sandbox account has been provisioned</h1>
+          <h1><i class="fas fa-spinner fa-pulse"></i> Your Developer Sandbox account has been provisioned</h1>
         </div>
         <div class="toolchain-dashboard" id="dashboard">
           <div class="pf-c-content">
             <div class="pf-l-gallery pf-m-gutter">
               <div class="pf-l-gallery__item">
                 <div class="pf-c-card">
+                  <div class="pf-c-card__header">
+                    <img class="pf-c-brand box-logo" src="OpenShift-RGB.svg" alt="OpenShift Logo" />
+                    <h1>OpenShift</h1>
+                  </div>
                   <div class="pf-c-card__body">
-                    <img class="pf-c-brand box-logo" src="openshift-logo.svg" alt="OpenShift Logo" />
-                    <h1>Red Hat OpenShift Dev Experience</h1>
-                    <span><a id="stateConsole" href="#" class="pf-c-nav__link">Start using your Sandbox..</a></span>
+                    <p>A cloud-native application platform with everything you need to manage your development life cycle securely, including standardized workflows, support for multiple environments, continuous integration, and release management.</p>
+                  </div>
+                  <div class="pf-c-card__footer">
+                    <span><a id="stateConsole" href="#" class="pf-c-nav__link">Launch...</a></span>
                   </div>
                 </div>
               </div>
               <div class="pf-l-gallery__item" style="display:none">
                 <div class="pf-c-card">
-                  <div class="pf-c-card__body">
+                  <div class="pf-c-card__header">
                     <img class="pf-c-brand box-logo" src="codereadyws-logo.svg" alt="CodeReady Workspaces Logo" />
-                    <h1>CodeReady&nbsp;Workspaces<br>&nbsp;</h1>
-                    <span><a id="cheDashboard" href="#" class="pf-c-nav__link">Start Coding..</a></span>
+                    <h1>Dev Spaces</h1>
+                  </div>
+                  <div class="pf-c-card__body">
+                    <p>A collaborative Kubernetes-native solution for rapid application development that delivers consistent developer environments on Red Hat OpenShift to allow anyone with a browser to contribute code in under two minutes.</p>
+                  </div>
+                  <div class="pf-c-card__footer">
+                    <span><a id="cheDashboard" href="#" class="pf-c-nav__link">Launch..</a></span>
                   </div>
                 </div>
               </div>
-            </div>    
+              <div class="pf-l-gallery__item">
+                <div class="pf-c-card">
+                  <div class="pf-c-card__header">
+                    <img class="pf-c-brand box-logo" src="OpenShift_Data_Science-RGB.svg" alt="OpenShift AI Logo" />
+                    <h1>OpenShift AI</h1>
+                  </div>
+                  <div class="pf-c-card__body">
+                    <p>OpenShift AI gives data scientists and developers a powerful AI/ML platform for building AI-enabled applications.<br><br><br><br><br><br></p>
+                  </div>
+                  <div class="pf-c-card__footer">
+                    <span><a id="rhoaiDashboard" href="#" class="pf-c-nav__link">Launch...</a></span>
+                  </div>
+                </div>
+              </div>
+            </div>
             <div class="pf-l-gallery pf-m-gutter">
             </div>
           </div>    
diff --git a/pkg/assets/static/landingpage.css b/pkg/assets/static/landingpage.css
index f04f7132..db460666 100644
--- a/pkg/assets/static/landingpage.css
+++ b/pkg/assets/static/landingpage.css
@@ -114,4 +114,36 @@
   color: #069;
   text-decoration: underline;
   cursor: pointer;
+}
+
+.collapsible {
+	background-color: transparent;
+	color: white;
+	cursor: pointer;
+	padding: 18px;
+	width: 100%;
+	border: none;
+	text-align: left;
+	outline: none;
+	font-size: 15px;
+}
+.active, .collapsible:hover {
+	background-color: transparent;
+}
+.collapsible:after {
+	content: '\002B';
+	color: white;
+	font-weight: bold;
+	float: right;
+	margin-left: 5px;
+}
+.active:after {
+	content: "\2212";
+}
+.collapsible-content {
+	padding: 0 18px;
+	max-height: 0;
+	overflow: hidden;
+	transition: max-height 0.2s ease-out;
+	background-color: transparent;
 }
\ No newline at end of file
diff --git a/pkg/assets/static/landingpage.js b/pkg/assets/static/landingpage.js
index 0cdb4082..bb4a9c47 100644
--- a/pkg/assets/static/landingpage.js
+++ b/pkg/assets/static/landingpage.js
@@ -161,17 +161,22 @@ function updateSignupState() {
       } else {
         consoleURL = data.consoleURL + 'topology/ns/' + data.compliantUsername + '-dev';
       }
-      cheDashboardURL = data.cheDashboardURL;
       proxyURL = 'oc login --token='+idToken+' --server=' +data.proxyURL;
       document.getElementById('expandable-not-expanded-readonly-text-input').value = proxyURL;
+      cheDashboardURL = data.cheDashboardURL;
       if (cheDashboardURL === undefined) {
         cheDashboardURL = 'n/a'
       }
+      rhoaiDashboardURL = data.rhodsMemberURL;
+      if (rhoaiDashboardURL === undefined) {
+        rhoaiDashboardURL = 'n/a'
+      }
       console.log('showing dashboard..');
       hideAll();
       show('dashboard');
       document.getElementById('stateConsole').href = consoleURL;
       document.getElementById('cheDashboard').href = cheDashboardURL;
+      document.getElementById('rhoaiDashboard').href = rhoaiDashboardURL;
     } else if (data.status.ready === false && data.status.reason === 'Provisioning') {
       console.log('account is provisioning..');
       // account is provisioning; start polling.
@@ -422,3 +427,18 @@ getJSON('GET', configURL, null, function(err, data) {
     });
   }
 });
+
+var coll = document.getElementsByClassName("collapsible");
+var i;
+
+for (i = 0; i < coll.length; i++) {
+  coll[i].addEventListener("click", function() {
+    this.classList.toggle("active");
+    var content = this.nextElementSibling;
+    if (content.style.maxHeight){
+      content.style.maxHeight = null;
+    } else {
+      content.style.maxHeight = content.scrollHeight + "px";
+    }
+  });
+}