diff --git a/services/web/frontend/js/features/form-helpers/password-visibility.js b/services/web/frontend/js/features/form-helpers/password-visibility.js
new file mode 100644
index 0000000000..487c45952f
--- /dev/null
+++ b/services/web/frontend/js/features/form-helpers/password-visibility.js
@@ -0,0 +1,28 @@
+const visibilityOnQuery = '[data-ol-password-visibility-toggle="visibilityOn"]'
+const visibilityOffQuery =
+ '[data-ol-password-visibility-toggle="visibilityOff"]'
+
+const visibilityOnButton = document.querySelector(visibilityOnQuery)
+const visibilityOffButton = document.querySelector(visibilityOffQuery)
+
+if (visibilityOffButton && visibilityOnButton) {
+ visibilityOnButton.addEventListener('click', function () {
+ const passwordInput = document.querySelector(
+ '[data-ol-password-visibility-target]'
+ )
+ passwordInput.type = 'text'
+ visibilityOnButton.hidden = true
+ visibilityOffButton.hidden = false
+ visibilityOffButton.focus()
+ })
+
+ visibilityOffButton.addEventListener('click', function () {
+ const passwordInput = document.querySelector(
+ '[data-ol-password-visibility-target]'
+ )
+ passwordInput.type = 'password'
+ visibilityOffButton.hidden = true
+ visibilityOnButton.hidden = false
+ visibilityOnButton.focus()
+ })
+}
diff --git a/services/web/frontend/js/marketing.js b/services/web/frontend/js/marketing.js
index e90287ad29..3cb12be43a 100644
--- a/services/web/frontend/js/marketing.js
+++ b/services/web/frontend/js/marketing.js
@@ -3,6 +3,7 @@ import './infrastructure/error-reporter'
import 'jquery'
import 'bootstrap'
import './features/form-helpers/hydrate-form'
+import './features/form-helpers/password-visibility'
import './features/link-helpers/slow-link'
import './features/bookmarkable-tab'
import './features/contact-form'
diff --git a/services/web/frontend/stylesheets/app/base.less b/services/web/frontend/stylesheets/app/base.less
index 58a7d03e27..846b56828c 100644
--- a/services/web/frontend/stylesheets/app/base.less
+++ b/services/web/frontend/stylesheets/app/base.less
@@ -183,3 +183,20 @@
}
}
}
+
+.website-redesign {
+ .recaptcha-branding {
+ padding: @padding-sm 0;
+ text-align: left;
+ font-size: @font-size-extra-small;
+
+ & > a {
+ color: var(--emerald-green);
+
+ &:hover {
+ color: var(--emerald-green-dark);
+ }
+ text-decoration: underline;
+ }
+ }
+}
diff --git a/services/web/frontend/stylesheets/app/homepage.less b/services/web/frontend/stylesheets/app/homepage.less
index c79c4db070..4e5e28493d 100644
--- a/services/web/frontend/stylesheets/app/homepage.less
+++ b/services/web/frontend/stylesheets/app/homepage.less
@@ -183,26 +183,6 @@
}
}
-.hp-login-btn {
- .login-btn;
- min-width: 220px;
-}
-
-.hp-login-btn-large {
- .hp-login-btn;
-
- min-width: 256px;
- padding-left: 30px;
- font-size: 20px;
-}
-
-.hp-login-btn-icon-large {
- .login-btn-icon;
-
- width: 32px;
- height: 32px;
-}
-
.hp-register-form-email-pwd {
position: relative;
}
@@ -432,7 +412,18 @@
.form-group {
.hp-login-btn {
+ .login-btn;
+
width: 100%;
+ min-width: 220px;
+
+ .login-btn-icon {
+ position: absolute;
+ left: 6px;
+ top: 7px;
+ width: 20px;
+ height: 20px;
+ }
}
}
}
diff --git a/services/web/frontend/stylesheets/app/login-register.less b/services/web/frontend/stylesheets/app/login-register.less
index 95b6e2faff..af0edfbfc9 100644
--- a/services/web/frontend/stylesheets/app/login-register.less
+++ b/services/web/frontend/stylesheets/app/login-register.less
@@ -48,6 +48,7 @@
.login-register-text {
padding-bottom: 25px;
+ font-size: 90%;
&:last-child {
padding-bottom: 0;
}
@@ -125,3 +126,119 @@
.registration-block-separator {
margin-bottom: 0px;
}
+
+.website-redesign {
+ .login-register-container {
+ max-width: 320px;
+ }
+
+ .login-overleaf-logo-container {
+ padding: 15px;
+ width: 65px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .login-overleaf-logo {
+ width: 35px;
+ }
+
+ @media (max-width: @screen-xs-max) {
+ margin-top: @margin-lg;
+ }
+ }
+
+ .login-register-text {
+ font-size: 0.875rem;
+ line-height: 1.4;
+ text-align: left;
+
+ &.login-register-text-center {
+ text-align: center;
+ }
+ }
+
+ .login-register-other-links {
+ padding: @line-height-computed 0;
+ a {
+ color: var(--emerald-green);
+ text-decoration: underline;
+ // text-decoration-;skip-ink is for letter with descender (like 'g' and 'y')
+ // this will force underline to not skip the descender
+ text-decoration-skip-ink: none;
+
+ &:hover {
+ color: var(--emerald-green-dark);
+ }
+
+ // for accessibility with keyboard navigation
+ &:focus {
+ outline: 2px solid var(--emerald-green);
+ outline-offset: 1px;
+ }
+ }
+ }
+
+ .login-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 4px 0;
+ }
+
+ .login-btn-icon {
+ position: relative;
+ top: unset;
+ left: unset;
+ background: unset;
+ border-radius: unset;
+ width: 20px;
+ height: 20px;
+ margin-right: 5px;
+
+ &::before {
+ content: unset;
+ }
+ }
+
+ .form-group {
+ text-align: left;
+ position: relative;
+
+ label {
+ font-size: @font-size-small;
+ }
+ }
+
+ .form-group-password {
+ display: flex;
+ position: relative;
+
+ input.form-control {
+ padding-right: 35px;
+ }
+
+ .visibility-toggle {
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: @input-height-base;
+ height: @input-height-base;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: unset;
+ background-color: unset;
+
+ #visibility-icon-off {
+ margin-top: 2px; // workaround for the icon not having the same center as the non-slashed one
+ }
+ }
+ }
+
+ .form-group-password-input {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ }
+}
diff --git a/services/web/frontend/stylesheets/app/register.less b/services/web/frontend/stylesheets/app/register.less
index 5e102af6d3..f0aafa10b8 100644
--- a/services/web/frontend/stylesheets/app/register.less
+++ b/services/web/frontend/stylesheets/app/register.less
@@ -25,3 +25,10 @@
border-bottom-width: 0;
}
}
+
+.website-redesign {
+ .login-register-form-focus {
+ padding: @line-height-computed 0 0 0;
+ border-bottom: unset;
+ }
+}
diff --git a/services/web/frontend/stylesheets/app/website-redesign.less b/services/web/frontend/stylesheets/app/website-redesign.less
index bcefe47e20..6c5d602b5a 100644
--- a/services/web/frontend/stylesheets/app/website-redesign.less
+++ b/services/web/frontend/stylesheets/app/website-redesign.less
@@ -944,11 +944,20 @@
.inline-green-link {
color: var(--emerald-green);
+ text-decoration: underline;
+ // text-decoration-;skip-ink is for letter with descender (like 'g' and 'y')
+ // this will force underline to not skip the descender
+ text-decoration-skip-ink: none;
&:hover {
color: var(--emerald-green-dark);
}
- text-decoration: underline;
+
+ // for accessibility with keyboard navigation
+ &:focus {
+ outline: 2px solid var(--emerald-green);
+ outline-offset: 1px;
+ }
}
.white-link {
diff --git a/services/web/frontend/stylesheets/core/type.less b/services/web/frontend/stylesheets/core/type.less
index 036813d2e0..d4236640af 100755
--- a/services/web/frontend/stylesheets/core/type.less
+++ b/services/web/frontend/stylesheets/core/type.less
@@ -124,7 +124,6 @@ small,
color: @text-small-color;
}
-.login-register-text,
.login-register-hr-text-container,
.text-small {
font-size: 90%;
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 834f6fba59..feda7d1493 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -637,6 +637,7 @@
"for_teaching": "For teaching",
"for_universities": "For universities",
"for_visa_mastercard_and_discover": "For <0>Visa, MasterCard and Discover, the <1>3 digits on the <2>back of your card.",
+ "forgot_password": "Forgot password?",
"forgot_your_password": "Forgot your password",
"format": "Format",
"found_matching_deleted_users": "Found __deletedUserCount__ matching deleted users",
@@ -1031,6 +1032,7 @@
"log_in_with": "Log in with __provider__",
"log_in_with_a_different_account": "Log in with a different account",
"log_in_with_email": "Log in with __email__",
+ "log_in_with_email_raw": "Log in with email",
"log_in_with_existing_institution_email": "Please log in with your existing __appName__ account in order to get your __appName__ and __institutionName__ institutional accounts linked.",
"log_in_with_primary_email_address": "This will be the email address to use if you log in with an email address and password. Important __appName__ notifications will be sent to this email address.",
"log_in_with_sso": "Log in with SSO",
diff --git a/services/web/public/img/material-icons/visibility-slashed-18.svg b/services/web/public/img/material-icons/visibility-slashed-18.svg
new file mode 100644
index 0000000000..1a042aa31e
--- /dev/null
+++ b/services/web/public/img/material-icons/visibility-slashed-18.svg
@@ -0,0 +1,3 @@
+
diff --git a/services/web/public/img/material-icons/visibility-unslashed-18.svg b/services/web/public/img/material-icons/visibility-unslashed-18.svg
new file mode 100644
index 0000000000..b2864fa133
--- /dev/null
+++ b/services/web/public/img/material-icons/visibility-unslashed-18.svg
@@ -0,0 +1,3 @@
+
diff --git a/services/web/public/img/ol-brand/overleaf-o-dark.svg b/services/web/public/img/ol-brand/overleaf-o-dark.svg
new file mode 100644
index 0000000000..c4d2a9c220
--- /dev/null
+++ b/services/web/public/img/ol-brand/overleaf-o-dark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file