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

Revamp the sign in and register pages #7872

Merged
merged 21 commits into from
May 6, 2023
Merged

Revamp the sign in and register pages #7872

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
5a4dbc4
Init
janfaracik Apr 19, 2023
c97c95f
Tidy up
janfaracik Apr 19, 2023
bd64741
Implement starburst
janfaracik Apr 20, 2023
15003f7
Revamp aurora
janfaracik Apr 20, 2023
848dd3c
Revamp colours using vars
janfaracik Apr 20, 2023
27ca26b
Fixing position
janfaracik Apr 20, 2023
5afe395
Merge branch 'master' into new-sign-in
janfaracik Apr 21, 2023
ca6254e
Simplify pages
janfaracik Apr 21, 2023
bd163c6
Naming
janfaracik Apr 21, 2023
fc806e7
Cleanup classes
janfaracik Apr 21, 2023
be0f37e
Linting
janfaracik Apr 21, 2023
fb6eab8
Remove CSS, restore changes to simple-page
janfaracik Apr 21, 2023
91f7fe0
Tidy up SCSS, add favicon
janfaracik Apr 21, 2023
2f1b218
Use simple-header
janfaracik Apr 21, 2023
483514d
Update login.jelly
janfaracik Apr 21, 2023
99b61b4
Restore link back to sign in page on register
janfaracik Apr 21, 2023
b0101f3
Fix linting
janfaracik Apr 23, 2023
ff2a650
Merge branch 'master' into new-sign-in
janfaracik Apr 25, 2023
45dd851
Fix tests
janfaracik Apr 26, 2023
fab7dbf
Move JS into its own file
janfaracik Apr 28, 2023
288d05f
Merge branch 'master' into new-sign-in
janfaracik Apr 28, 2023
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
373 changes: 132 additions & 241 deletions core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/signup.jelly
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions core/src/main/resources/jenkins/model/DefaultSimplePageDecorator/simple-head.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,7 @@ THE SOFTWARE.
-->
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core">
<link rel="icon" href="${resURL}/favicon.svg" type="image/svg+xml" />
<link rel="alternate icon" href="${resURL}/favicon.ico" sizes="any" />
<link rel="stylesheet" href="${resURL}/jsbundles/simple-page.css" type="text/css" />
</j:jelly>
10 changes: 4 additions & 6 deletions core/src/main/resources/jenkins/model/DefaultSimplePageDecorator/simple-header.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,8 @@ THE SOFTWARE.
-->
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core">
<div id="loginIntroDefault">
<div class="logo">
<img src="${imagesURL}/svgs/logo.svg" alt="Jenkins logo" />
</div>
<h1>${%Welcome to Jenkins!}</h1>
</div>
<section class="app-sign-in-register__branding">
<div class="app-sign-in-register__branding__starburst"></div>
<img src="${imagesURL}/svgs/logo.svg" alt="${%logo}"/>
</section>
</j:jelly>
221 changes: 110 additions & 111 deletions core/src/main/resources/jenkins/model/Jenkins/login.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,126 +23,125 @@ THE SOFTWARE.
-->

<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:f="/lib/form" xmlns:x="jelly:xml" xmlns:st="jelly:stapler">
<j:jelly xmlns:j="jelly:core" xmlns:x="jelly:xml" xmlns:st="jelly:stapler">
<l:view xmlns:l="/lib/layout" contentType="text/html;charset=UTF-8">
<!-- deactivate all caching -->
<st:setHeader name="Expires" value="0" />
<st:setHeader name="Cache-Control" value="no-cache,no-store,must-revalidate" />
<!-- needed for cli -->
<j:if test="${request.servletPath=='/' || request.servletPath==''}">
${h.advertiseHeaders(response)}
<j:forEach var="pd" items="${h.pageDecorators}">
<st:include it="${pd}" page="httpHeaders.jelly" optional="true"/>
</j:forEach>
</j:if>
<!--
needed to generate a session if non exists,
without it we would add ";jsessionid=" to the url which will result in a 404
-->
<j:set var="_" value="${request.getSession()}"/>
<!-- get default/common page variable -->
${h.initPageVariables(context)}
<x:doctype name="html" />
<!-- needed for the redirect after login -->
<j:set var="from" value="${error ? request.session.getAttribute('from') : request.getParameter('from')}"/>
<!-- in case of error we want to surround the form elements with an error hint -->
<j:set var="inputClass" value="${error ? 'danger' : 'normal'}"/>
<j:set var="simpleDecorator" value="${h.simplePageDecorator}"/>
<j:set var="simpleDecorators" value="${h.simplePageDecorators}"/>
<!-- real deal starting here -->
<html lang="${request.getLocale().toLanguageTag()}">
<head data-rooturl="${rootURL}" data-resurl="${resURL}" data-imagesurl="${imagesURL}" resURL="${resURL}">
<title>${%signIn} [Jenkins]</title>
<!-- we do not want bots on this page -->
<meta name="ROBOTS" content="NOFOLLOW" />
<!-- mobile friendly layout -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- css styling, will fallback to default implementation -->
<st:include it="${simpleDecorator}" page="simple-head.jelly" optional="true"/>
</head>
<body>
<j:choose>
<j:when test="${it.setupWizard.isUsingSecurityToken()}">
<st:include it="${it.setupWizard}" page="authenticate-security-token"/>
</j:when>
<j:otherwise>
<div class="simple-page" role="main">
<div class="modal login">
<st:include it="${simpleDecorator}" page="simple-header.jelly" optional="true"/>
<!-- login form -->
<form name="login" action="${it.securityRealm.authenticationGatewayUrl}" method="post">
<j:if test="${it.securityRealm.allowsSignup()}">
<p class="signupTag simple-page--description">
${%signUp}
</p>
</j:if>
<j:if test="${error}">
<div class="alert alert-danger">
${%Invalid username or password}
</div>
</j:if>
<div class="jenkins-form-item jenkins-form-item--tight">
<input
aria-label="${%Username}"
class="jenkins-input ${inputClass}"
type="text"
name="j_username"
id="j_username"
autocorrect="off"
autocomplete="off"
autocapitalize="off"
autofocus="autofocus"
placeholder="${%Username}"
/>
</div>
<div class="jenkins-form-item jenkins-form-item--tight">
<input
aria-label="${%Password}"
class="jenkins-input ${inputClass}"
type="password"
name="j_password"
placeholder="${%Password}"
/>
</div>
<!-- deactivate all caching -->
<st:setHeader name="Expires" value="0" />
<st:setHeader name="Cache-Control" value="no-cache,no-store,must-revalidate" />
<!-- needed for cli -->
<j:if test="${request.servletPath=='/' || request.servletPath==''}">
${h.advertiseHeaders(response)}
<j:forEach var="pd" items="${h.pageDecorators}">
<st:include it="${pd}" page="httpHeaders.jelly" optional="true"/>
</j:forEach>
</j:if>
<!--
needed to generate a session if non exists,
without it we would add ";jsessionid=" to the url which will result in a 404
-->
<j:set var="_" value="${request.getSession()}"/>
<!-- get default/common page variable -->
${h.initPageVariables(context)}
<x:doctype name="html" />
<!-- needed for the redirect after login -->
<j:set var="from" value="${error ? request.session.getAttribute('from') : request.getParameter('from')}"/>
<!-- in case of error we want to surround the form elements with an error hint -->
<j:set var="inputClass" value="${error ? 'jenkins-input--error' : ''}"/>
<j:set var="simpleDecorator" value="${h.simplePageDecorator}"/>
<j:set var="simpleDecorators" value="${h.simplePageDecorators}"/>

<!-- real deal starting here -->
<html lang="${request.getLocale().toLanguageTag()}">
<head data-rooturl="${rootURL}" data-resurl="${resURL}" data-imagesurl="${imagesURL}" resURL="${resURL}">
<title>${%signIn} [Jenkins]</title>
<!-- we do not want bots on this page -->
<meta name="ROBOTS" content="NOFOLLOW" />
<!-- mobile friendly layout -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- css styling, will fallback to default implementation -->
<st:include it="${simpleDecorator}" page="simple-head.jelly" optional="true"/>
</head>
<body class="app-sign-in-register">
<j:choose>
<j:when test="${it.setupWizard.isUsingSecurityToken()}">
<st:include it="${it.setupWizard}" page="authenticate-security-token"/>
</j:when>
<j:otherwise>
<st:include it="${simpleDecorator}" page="simple-header.jelly" optional="true" />
<main id="main-panel" class="app-sign-in-register__content">
<div class="app-sign-in-register__content-inner">
<h1>Sign in to Jenkins</h1>

<j:if test="${app.security.name()=='SECURED' and !app.disableRememberMe}">
<!-- remember me service only available for Spring Security -->
<div class="jenkins-checkbox jenkins-form-item jenkins-form-item--tight jenkins-!-margin-bottom-3">
<input
type="checkbox"
id="remember_me"
name="remember_me"
<form name="login" action="${it.securityRealm.authenticationGatewayUrl}"
method="post">
<j:if test="${error}">
<div class="app-sign-in-register__error">
${%Invalid username or password}
</div>
</j:if>
<div>
<label class="app-sign-in-register__form-label" for="j_username">${%Username}
</label>
<input class="jenkins-input ${inputClass}"
type="text"
name="j_username"
id="j_username"
autocorrect="off"
autocomplete="off"
autocapitalize="off"
autofocus="autofocus"
/>
<label for="remember_me">${%Keep me signed in}</label>
</div>
</j:if>
<input type="hidden" name="from" value="${from}" />
<div class="submit">
<div>
<label class="app-sign-in-register__form-label" for="j_password">
${%Password}
</label>
<input id="j_password"
class="jenkins-input ${inputClass}"
type="password"
name="j_password"
/>
</div>

<j:if test="${app.security.name()=='SECURED' and !app.disableRememberMe}">
<!-- remember me service only available for Spring Security -->
<div class="jenkins-checkbox">
<input type="checkbox"
id="remember_me"
name="remember_me"
/>
<label for="remember_me">${%Keep me signed in}</label>
</div>
</j:if>
<input type="hidden" name="from" value="${from}"/>
<button type="submit"
name="Submit"
class="jenkins-button jenkins-button--primary">
name="Submit"
class="jenkins-button jenkins-button--primary">
${%signIn}
</button>
</div>
</form>

<j:forEach var="fls" items="${it.getFederatedLoginServices()}">
<div>
<st:include page="loginFragment.jelly" it="${fls}"/>
</div>
</j:forEach>
<j:if test="${it.securityRealm.allowsSignup()}">
<div class="app-sign-in-register__switcher">
<a href="signup">${%or register}</a>
</div>
</j:if>
</form>

<div class="footer">
<j:forEach var="decorator" items="${simpleDecorators}">
<st:include it="${decorator}" page="simple-footer.jelly" optional="true"/>
<j:forEach var="fls" items="${it.getFederatedLoginServices()}">
<div>
<st:include page="loginFragment.jelly" it="${fls}"/>
</div>
</j:forEach>
</div>

</div>
</div>
</j:otherwise>
</j:choose>
</body>
</html>
<div class="footer">
<j:forEach var="decorator" items="${simpleDecorators}">
<st:include it="${decorator}" page="simple-footer.jelly" optional="true"/>
</j:forEach>
</div>
</div>
</main>
</j:otherwise>
</j:choose>
</body>
</html>
</l:view>
</j:jelly>
93 changes: 93 additions & 0 deletions war/src/main/js/pages/register/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import { getI18n } from "@/util/i18n";

const passwordField = document.querySelector("#password1");
const password2Field = document.querySelector("#password2");
const showPasswordField = document.querySelector("#showPassword");
const passwordStrengthWrapper = document.querySelector(
"#passwordStrengthWrapper"
);
const passwordStrengthIndicator = document.querySelector("#passwordStrength");

updatePasswordStrength();

passwordField.addEventListener("input", updatePasswordStrength);

function updatePasswordStrength() {
if (passwordField.value.length === 0) {
passwordStrengthWrapper.hidden = true;
return;
}

passwordStrengthWrapper.hidden = false;
const score = passwordScore(passwordField.value);
passwordStrengthIndicator.innerText = passwordStrength(score);
passwordStrengthIndicator.style.color = passwordStrengthColor(score);
password2Field.value = passwordField.value;
}

// Toggle password visibility
showPasswordField.addEventListener("change", () => {
if (showPasswordField.checked) {
passwordField.type = "text";
} else {
passwordField.type = "password";
}
});

function passwordScore(password) {
let score = 0;

if (!password) {
return score;
}

// Award every unique letter until 5 repetitions
const letters = {};

for (let i = 0; i < password.length; i++) {
letters[password[i]] = (letters[password[i]] || 0) + 1;
score += 5.0 / letters[password[i]];
}

// Bonus points for mixing it up
const variations = {
digits: /\d/.test(password),
lower: /[a-z]/.test(password),
upper: /[A-Z]/.test(password),
nonWords: /\W/.test(password),
};

let variationCount = 0;
for (const check in variations) {
variationCount += variations[check] === true ? 1 : 0;
}
score += (variationCount - 1) * 10;

return score;
}

function passwordStrength(score) {
if (score > 80) {
return getI18n("strength-strong");
}
if (score > 60) {
return getI18n("strength-moderate");
}
if (score >= 30) {
return getI18n("strength-weak");
}
return getI18n("strength-poor");
}

function passwordStrengthColor(score) {
if (score > 80) {
return "var(--green)";
}
if (score > 60) {
return "var(--yellow)";
}
if (score >= 30) {
return "var(--orange)";
}
return "var(--error-color)";
}
4 changes: 4 additions & 0 deletions war/src/main/js/util/i18n.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export function getI18n(text) {
const i18n = document.querySelector("#i18n");
return i18n.getAttribute("data-" + text);
}
2 changes: 1 addition & 1 deletion war/src/main/scss/form/input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
width: 100%;
box-shadow: var(--form-input-glow);
// Set height transition to 0s as vertical resizing has a delay/lag otherwise
transition: all var(--standard-transition), height 0s;
transition: all var(--standard-transition), height 0s, padding 0s;

&:hover {
border-color: var(--input-border-hover);
Expand Down
Loading