Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Simplify social event support in internal landing page #456

Merged
merged 2 commits into from
Aug 30, 2024
Merged

Simplify social event support in internal landing page #456

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c51469e
Activation code field in internal landing page
alexeykazakov Aug 30, 2024
43c4c3c
tests
alexeykazakov Aug 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions pkg/assets/assets_test.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions pkg/assets/static/OpenShift-RGB.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions pkg/assets/static/OpenShift_Data_Science-RGB.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
84 changes: 55 additions & 29 deletions pkg/assets/static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<link rel="stylesheet" href="https://unpkg.com/@patternfly/[email protected]/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">
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
32 changes: 32 additions & 0 deletions pkg/assets/static/landingpage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
22 changes: 21 additions & 1 deletion pkg/assets/static/landingpage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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";
}
});
}
Loading