mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-05-30 20:31:34 +02:00
Merge pull request #29900 from overleaf/td-ciam-login
Implement unified access login page GitOrigin-RevId: 9973565099e1e88dd9d6b232d8f5c545dc73e6f7
This commit is contained in:
Tim Down
@@ -1,42 +0,0 @@
|
||||
include terms_of_service
|
||||
include recaptcha
|
||||
|
||||
mixin ciamLogo
|
||||
header.ciam-logo
|
||||
a.brand.overleaf-ds-logo(href='/')
|
||||
span.visually-hidden Overleaf
|
||||
|
||||
mixin ciamCardSeparator
|
||||
hr.ciam-card-separator
|
||||
|
||||
mixin ciamCardFooter
|
||||
section.ciam-card-footer
|
||||
+ciamCardSeparator
|
||||
.ciam-footer-ds-logo
|
||||
img(
|
||||
src=buildImgPath('digital-science/digital-science.svg')
|
||||
alt='Digital Science'
|
||||
)
|
||||
p
|
||||
| !{translate('advancing_research_with', { linkOverleaf: 'https://www.overleaf.com', linkPapers: 'https://www.papersapp.com/', linkDS: 'https://www.digital-science.com/products/' })}
|
||||
|
||||
mixin ciamTermsOfServiceAgreement
|
||||
p
|
||||
+termsOfServiceAgreementContent
|
||||
|
||||
mixin ciamRecaptchaConditions
|
||||
p
|
||||
+recaptchaConditionsContent
|
||||
|
||||
mixin ciamCustomFormDangerMessage(key)
|
||||
div(
|
||||
class='notification ciam-notification notification-type-error'
|
||||
hidden
|
||||
data-ol-custom-form-message=key
|
||||
role='alert'
|
||||
aria-live='polite'
|
||||
)
|
||||
.notification-icon
|
||||
ph-warning-circle(aria-hidden='true')
|
||||
.notification-content.text-left
|
||||
block
|
||||
@@ -106,6 +106,7 @@
|
||||
"address_second_line_optional": "",
|
||||
"adjust_column_width": "",
|
||||
"advanced_reference_search_mode": "",
|
||||
"advancing_research_with": "",
|
||||
"after_that_well_bill_you_x_total_y_subtotal_z_tax_annually_on_date_unless_you_cancel": "",
|
||||
"aggregate_changed": "",
|
||||
"aggregate_to": "",
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
// These are used in the CIAM registration form
|
||||
// These are used in the CIAM registration and login flows
|
||||
import '@phosphor-icons/webcomponents/PhBank'
|
||||
import '@phosphor-icons/webcomponents/PhEye'
|
||||
import '@phosphor-icons/webcomponents/PhInfo'
|
||||
import '@phosphor-icons/webcomponents/PhEyeSlash'
|
||||
import '@phosphor-icons/webcomponents/PhWarningCircle'
|
||||
|
||||
@@ -4,6 +4,7 @@ import { canSkipCaptcha, validateCaptchaV2 } from './captcha'
|
||||
import inputValidator from './input-validator'
|
||||
import { disableElement, enableElement } from '../utils/disableElement'
|
||||
import { materialIcon as createMaterialIcon } from '@/features/utils/material-icon'
|
||||
import { ciamIcon } from '@/features/utils/ciam-icon'
|
||||
|
||||
// Form helper(s) to handle:
|
||||
// - Attaching to the relevant form elements
|
||||
@@ -343,12 +344,20 @@ function showMessagesNewStyle(
|
||||
}
|
||||
|
||||
// create the left icon
|
||||
const icon = createMaterialIcon(
|
||||
message.type === 'error' ? 'error' : 'check_circle'
|
||||
)
|
||||
const isDsBranded = formEl.dataset.ciamForm !== undefined
|
||||
const messageIcon = document.createElement('div')
|
||||
messageIcon.className = 'notification-icon'
|
||||
messageIcon.appendChild(icon)
|
||||
if (
|
||||
isDsBranded &&
|
||||
(message.type === 'error' || message.type === 'info')
|
||||
) {
|
||||
messageIcon.append(ciamIcon(message.type))
|
||||
} else {
|
||||
const icon = createMaterialIcon(
|
||||
message.type === 'error' ? 'error' : 'check_circle'
|
||||
)
|
||||
messageIcon.appendChild(icon)
|
||||
}
|
||||
|
||||
// append icon first so it's on the left
|
||||
messageElContainer.appendChild(messageIcon)
|
||||
@@ -379,23 +388,43 @@ function showMessagesNewStyle(
|
||||
})
|
||||
}
|
||||
|
||||
function querySelectorAllWithSelf(el: HTMLElement, selector: string) {
|
||||
const nodeList = el.querySelectorAll<HTMLElement>(selector)
|
||||
return el.matches(selector) ? [el, ...nodeList] : Array.from(nodeList)
|
||||
}
|
||||
|
||||
export function inflightHelper(el: HTMLElement) {
|
||||
const disabledInflight = el.querySelectorAll('[data-ol-disabled-inflight]')
|
||||
const disabledInflight = querySelectorAllWithSelf(
|
||||
el,
|
||||
'[data-ol-disabled-inflight]'
|
||||
)
|
||||
const showWhenNotInflight = el.querySelectorAll<HTMLElement>(
|
||||
'[data-ol-inflight="idle"]'
|
||||
)
|
||||
const showWhenInflight = el.querySelectorAll<HTMLElement>(
|
||||
'[data-ol-inflight="pending"]'
|
||||
)
|
||||
const spinnerInflight = querySelectorAllWithSelf(
|
||||
el,
|
||||
'[data-ol-spinner-inflight]'
|
||||
)
|
||||
|
||||
el.addEventListener('pending', () => {
|
||||
disabledInflight.forEach(disableElement)
|
||||
toggleDisplay(showWhenNotInflight, showWhenInflight)
|
||||
spinnerInflight.forEach(loadingEl => {
|
||||
loadingEl.setAttribute('data-ol-loading', 'true')
|
||||
loadingEl.classList.add('button-loading')
|
||||
})
|
||||
})
|
||||
|
||||
el.addEventListener('idle', () => {
|
||||
disabledInflight.forEach(enableElement)
|
||||
toggleDisplay(showWhenInflight, showWhenNotInflight)
|
||||
spinnerInflight.forEach(loadingEl => {
|
||||
loadingEl.removeAttribute('data-ol-loading')
|
||||
loadingEl.classList.remove('button-loading')
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,7 @@
|
||||
import { materialIcon } from '@/features/utils/material-icon'
|
||||
import classNames from 'classnames'
|
||||
import '@phosphor-icons/webcomponents/PhWarningCircle'
|
||||
|
||||
function dsErrorIcon() {
|
||||
const icon = document.createElement('ph-warning-circle')
|
||||
icon.className = 'ciam-form-text-icon'
|
||||
icon.ariaHidden = 'true'
|
||||
return icon
|
||||
}
|
||||
import { ciamIcon } from '@/features/utils/ciam-icon'
|
||||
|
||||
export default function inputValidator(
|
||||
inputEl: HTMLInputElement | HTMLTextAreaElement
|
||||
@@ -30,7 +24,9 @@ export default function inputValidator(
|
||||
|
||||
const messageTextNode = document.createTextNode('')
|
||||
|
||||
const iconEl = isDsBranded ? dsErrorIcon() : materialIcon('error')
|
||||
const iconEl = isDsBranded
|
||||
? ciamIcon('error', 'ciam-form-text-icon')
|
||||
: materialIcon('error')
|
||||
messageInnerEl.append(iconEl)
|
||||
messageInnerEl.append(messageTextNode)
|
||||
|
||||
|
||||
@@ -37,6 +37,8 @@ const CIAMSixDigitsInput = forwardRef<
|
||||
)}
|
||||
maxLength={7}
|
||||
inputMode="numeric"
|
||||
autocomplete="off"
|
||||
data-1p-ignore
|
||||
/>
|
||||
<span className="ciam-six-digits-dash" aria-hidden>
|
||||
-
|
||||
|
||||
9
services/web/frontend/js/features/utils/ciam-icon.ts
Normal file
9
services/web/frontend/js/features/utils/ciam-icon.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export function ciamIcon(type: 'error' | 'info', className?: string) {
|
||||
const elName = type === 'error' ? 'ph-warning-circle' : 'ph-info'
|
||||
const icon = document.createElement(elName)
|
||||
if (className) {
|
||||
icon.className = className
|
||||
}
|
||||
icon.ariaHidden = 'true'
|
||||
return icon
|
||||
}
|
||||
@@ -1,22 +1,43 @@
|
||||
import React, { FC, ReactNode } from 'react'
|
||||
import { Trans } from 'react-i18next'
|
||||
import dsLogo from '@/shared/svgs/digital-science.svg'
|
||||
|
||||
type Props = { children: ReactNode }
|
||||
|
||||
const CiamLayout: FC<Props> = ({ children }: Props) => (
|
||||
<div className="ciam-layout ciam-enabled">
|
||||
<header className="ciam-logo">
|
||||
<a href="/" className="brand overleaf-ds-logo">
|
||||
<a href="/" className="brand overleaf-ds-logo ciam-image-link">
|
||||
<span className="visually-hidden">Overleaf</span>
|
||||
</a>
|
||||
</header>
|
||||
<div className="ciam-container">
|
||||
<main className="ciam-card" id="main-content">
|
||||
{children}
|
||||
<section className="ciam-card-footer">
|
||||
<hr className="ciam-card-separator" />
|
||||
<div className="ciam-footer-ds-logo">
|
||||
<img src={dsLogo} alt="Digital Science — home" />
|
||||
</div>
|
||||
<p>
|
||||
<Trans
|
||||
i18nKey="advancing_research_with"
|
||||
components={[
|
||||
// eslint-disable-next-line jsx-a11y/anchor-has-content,react/jsx-key
|
||||
<a href="https://www.overleaf.com" />,
|
||||
// eslint-disable-next-line jsx-a11y/anchor-has-content,react/jsx-key
|
||||
<a href="https://www.papersapp.com/" />,
|
||||
]}
|
||||
/>
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<footer>
|
||||
<a href="https://www.overleaf.com/legal#Privacy">Privacy</a>
|
||||
<a href="https://www.overleaf.com/legal#Terms">Terms</a>
|
||||
<div className="footer-links">
|
||||
<a href="https://www.overleaf.com/legal#Privacy">Privacy</a>
|
||||
<a href="https://www.overleaf.com/legal#Terms">Terms</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
|
||||
1
services/web/frontend/js/shared/svgs/digital-science.svg
Normal file
1
services/web/frontend/js/shared/svgs/digital-science.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="103" height="29" fill="none"><g fill="#383838" clip-path="url(#a)"><path d="M28.143 15.424h-5.31V.285h5.222c5.267 0 8.008 3.05 8.008 7.548s-2.807 7.593-7.92 7.593v-.002m-.199-12.222h-1.36v9.304h1.36c2.678 0 4.344-1.405 4.344-4.652s-1.777-4.652-4.344-4.652M38.392 15.424V.285h3.753v15.141h-3.753v-.002M51.91 15.71c-4.806 0-7.46-3.16-7.46-7.834C44.45 3.202 47.324 0 51.996 0c1.867 0 3.423.44 4.63 1.12l-.504 3.268c-1.142-.724-2.48-1.295-4.038-1.295-2.612 0-3.883 1.931-3.883 4.763s1.316 4.848 3.927 4.848a4.26 4.26 0 0 0 2.04-.482V9.524h-2.633l-.44-2.787h6.343v7.372c-1.581 1.03-3.446 1.6-5.53 1.6h.001M60.053 15.424V.285h3.752v15.141h-3.752v-.002M73.878 3.467v11.959h-3.774V3.467h-4.279V.285h11.981l.527 3.182h-4.455M82.393.219h4.126l5.266 14.744-3.773.614-1.12-3.292h-5.266l-1.008 3.138h-3.664L82.394.219m.132 9.127h3.423l-1.69-5.267-1.733 5.267M93.455 15.424V.285h3.751v11.892h4.652l.506 3.247h-8.909M25.963 28.152c-1.268 0-2.517-.383-3.365-.846l.181-.926c.887.504 2.034.926 3.281.926 1.412 0 2.338-.625 2.338-1.73 0-.989-.584-1.491-2.618-2.057-1.994-.543-2.9-1.228-2.9-2.678 0-1.449 1.25-2.496 3.122-2.496 1.068 0 2.015.261 2.779.644l-.16.906c-.867-.443-1.752-.684-2.66-.684-1.49 0-2.155.706-2.155 1.57 0 .865.564 1.332 2.256 1.793 2.157.585 3.264 1.33 3.264 2.92 0 1.713-1.39 2.66-3.363 2.66v-.002M35.392 28.193c-2.316 0-4.168-1.813-4.168-4.933s1.873-4.934 4.23-4.934c1.187 0 2.234.422 3.062 1.048l-.183.967c-.947-.807-1.832-1.188-2.92-1.188-2.014 0-3.202 1.672-3.202 4.109 0 2.436 1.149 4.108 3.283 4.108 1.027 0 1.976-.363 2.962-1.209l.121.886c-.865.726-1.912 1.148-3.182 1.148l-.003-.002M40.877 27.992v-9.466h.928v9.466h-.928M48.478 28.193c-2.497 0-4.17-1.852-4.17-4.933 0-3.081 1.733-4.934 4.03-4.934 2.416 0 3.625 2.114 3.625 4.732v.202h-6.685c0 2.416 1.127 4.108 3.241 4.108 1.149 0 2.357-.603 3.283-1.45l.14.888c-.866.784-2.114 1.39-3.464 1.39v-.003m-3.161-5.72h5.66c-.06-1.852-.988-3.362-2.639-3.362-1.793 0-2.821 1.389-3.021 3.363M60.813 27.992v-6.586c0-1.43-.685-2.215-2.035-2.215-1.048 0-2.135.605-3.324 1.712v7.089h-.947v-9.466h.685l.241 1.43c1.149-1.006 2.196-1.63 3.446-1.63 1.954 0 2.879 1.107 2.879 3.001v6.666h-.945v-.001M68.355 28.193c-2.318 0-4.17-1.813-4.17-4.933s1.873-4.934 4.23-4.934c1.187 0 2.235.422 3.06 1.048l-.181.967c-.945-.807-1.834-1.188-2.919-1.188-2.013 0-3.202 1.672-3.202 4.109 0 2.436 1.148 4.108 3.28 4.108 1.028 0 1.976-.363 2.962-1.209l.121.886c-.866.726-1.913 1.148-3.181 1.148v-.002M77.335 28.193c-2.497 0-4.17-1.852-4.17-4.933 0-3.081 1.733-4.934 4.028-4.934 2.418 0 3.625 2.114 3.625 4.732v.202h-6.686c0 2.416 1.126 4.108 3.242 4.108 1.147 0 2.357-.603 3.283-1.45l.14.888c-.866.784-2.114 1.39-3.464 1.39l.002-.003m-3.162-5.72h5.66c-.061-1.852-.987-3.362-2.64-3.362-1.793 0-2.818 1.389-3.021 3.363h.001M20.18 4.173h-3.477V7.65h3.478V4.173M12.395.285H8.919v3.478h3.476V.285ZM16.284.285h-3.477v3.476h3.477V.285ZM20.18.284h-3.477v3.478h3.478V.284ZM12.395 4.173H8.919V7.65h3.476V4.173M16.284 4.173h-3.477V7.65h3.477V4.173M16.284 8.06h-3.477v3.476h3.477V8.062M20.18 8.06h-3.477v3.478h3.478V8.061M16.284 11.948h-3.477v3.478h3.477v-3.478M20.18 11.948h-3.477v3.478h3.478v-3.478M8.233 6.152h-2.51v2.512h2.51V6.152"/><path d="M5.735 7.4h-2.51v2.51h2.51V7.4M5.005 11.65h-2.51v2.51h2.51v-2.51M7.649 13.514H5.14v2.51H7.65v-2.51M9.247 10.79h-2.51v2.51h2.51v-2.51M13.405 10.108h-3.12v3.12h3.12v-3.12M8.499 18.863H5.66V21.7H8.5v-2.837"/><path d="M6.725 20.995H5.347v1.377h1.378v-1.377M18.381 19.294h-1.494v1.494h1.494v-1.494M14.112 16.06H11.6v2.513h2.512V16.06M8.092 1.546h-2.51v2.51h2.51v-2.51M14.112 18.672H12.55v1.563h1.562v-1.563M11.424 18.88H9.529v1.895h1.895V18.88M18.217 22.88h-1.894v1.894h1.893v-1.893M10.733 25.06H9.187v1.547h1.546v-1.546M1.755 11.257H0v1.753h1.755v-1.753"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h102.363v28.194H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
@@ -1,5 +1,6 @@
|
||||
@import '../ds/all'; // DS design system styles
|
||||
@import 'ciam-layout';
|
||||
@import 'ciam-variables';
|
||||
@import 'ciam-links';
|
||||
@import 'ciam-login';
|
||||
@import 'ciam-register';
|
||||
@import 'ciam-six-digits';
|
||||
|
||||
@@ -1,13 +1,21 @@
|
||||
@use 'sass:math';
|
||||
|
||||
@mixin ciam-bottom-margin {
|
||||
margin: 0 0 var(--ds-spacing-400);
|
||||
}
|
||||
|
||||
@mixin ciam-vertically-spaced {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-spacing-400);
|
||||
}
|
||||
|
||||
.overleaf-ds-logo {
|
||||
background-image: url('../../../frontend/js/shared/svgs/overleaf-a-ds-solution-mallard.svg');
|
||||
}
|
||||
|
||||
.ciam-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-spacing-400);
|
||||
@include ciam-vertically-spaced;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
gap: var(--ds-spacing-800);
|
||||
@@ -25,141 +33,195 @@
|
||||
color: var(--ds-color-text-primary);
|
||||
}
|
||||
|
||||
.ciam-container {
|
||||
flex: 1 1 auto;
|
||||
padding: 0 var(--ds-spacing-300);
|
||||
}
|
||||
|
||||
.ciam-logo {
|
||||
padding: var(--ds-spacing-800) 0 0 0;
|
||||
text-align: center;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding-left: var(--ds-spacing-800);
|
||||
padding-right: var(--ds-spacing-800);
|
||||
}
|
||||
}
|
||||
|
||||
.ciam-logo .brand {
|
||||
flex-shrink: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
height: 49px;
|
||||
width: 107px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
height: 64px;
|
||||
width: 130px;
|
||||
margin: 9px 0; // Vertical margin isn't an exacting spacing value in the design
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include ds-heading-sm-semibold;
|
||||
@include ds-heading-md-semibold;
|
||||
|
||||
padding-bottom: var(--ds-spacing-200);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ciam-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-spacing-400);
|
||||
background-color: var(--bg-light-primary);
|
||||
box-shadow:
|
||||
0 4px 6px -4px rgb(0 0 0 / 10%),
|
||||
0 1px 29px -3px rgb(0 0 0 / 16%);
|
||||
padding: var(--ds-spacing-800) var(--ds-spacing-400);
|
||||
border-radius: var(--ds-border-radius-400);
|
||||
max-width: 464px;
|
||||
margin: 0 auto;
|
||||
min-height: 500px;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: var(--ds-spacing-1300);
|
||||
}
|
||||
|
||||
.notification {
|
||||
@include ds-body-sm-regular;
|
||||
|
||||
color: var(--ds-color-text-primary);
|
||||
padding: 0 var(--ds-spacing-400);
|
||||
border-width: 0;
|
||||
border-radius: var(--ds-border-radius-200);
|
||||
|
||||
.notification-icon {
|
||||
font-size: math.div(20em, 14);
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
padding: var(--ds-spacing-400) 0;
|
||||
}
|
||||
|
||||
&.notification-type-error {
|
||||
background-color: var(--ds-color-red-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ciam-disclaimers p {
|
||||
@include ds-body-sm-regular;
|
||||
|
||||
padding-bottom: var(--ds-spacing-250);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ciam-card-separator {
|
||||
margin: var(--ds-spacing-500) 0;
|
||||
height: 0;
|
||||
border-top: solid 1px var(--ds-grey-20);
|
||||
}
|
||||
|
||||
.ciam-card-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-spacing-250);
|
||||
|
||||
p {
|
||||
@include ds-body-sm-regular;
|
||||
|
||||
color: var(--ds-color-text-secondary);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ciam-footer-ds-logo {
|
||||
text-align: center;
|
||||
padding: var(--ds-spacing-200) 0;
|
||||
}
|
||||
|
||||
.ciam-stepper {
|
||||
margin: 0;
|
||||
height: 4px;
|
||||
border-radius: var(--ds-border-radius-full);
|
||||
|
||||
.step {
|
||||
background: var(--ds-color-neutral-200);
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
gap: var(--ds-spacing-600);
|
||||
justify-content: center;
|
||||
padding: var(--ds-spacing-300) 0;
|
||||
margin: 0 auto;
|
||||
// Allow room for the cookie banner
|
||||
padding-bottom: 100px;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-left: var(--ds-spacing-800);
|
||||
margin-right: var(--ds-spacing-800);
|
||||
justify-content: start;
|
||||
}
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: var(--ds-spacing-600);
|
||||
justify-content: center;
|
||||
color: var(--ds-color-text-secondary);
|
||||
padding: var(--ds-spacing-300) 0;
|
||||
margin: 0 auto;
|
||||
|
||||
a {
|
||||
@include ds-body-sm-regular;
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-left: var(--ds-spacing-800);
|
||||
margin-right: var(--ds-spacing-800);
|
||||
}
|
||||
|
||||
a {
|
||||
@include ds-body-sm-regular;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ciam-container {
|
||||
flex: 1 1 auto;
|
||||
padding: 0 var(--ds-spacing-300);
|
||||
}
|
||||
|
||||
.ciam-logo {
|
||||
padding: var(--ds-spacing-800) 0 0 0;
|
||||
text-align: center;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding-left: var(--ds-spacing-800);
|
||||
padding-right: var(--ds-spacing-800);
|
||||
}
|
||||
}
|
||||
|
||||
.ciam-logo .brand {
|
||||
flex-shrink: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
height: 60px;
|
||||
width: 133px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
height: 64px;
|
||||
width: 142px;
|
||||
margin: 9px 0; // Vertical margin isn't an exacting spacing value in the design
|
||||
}
|
||||
}
|
||||
|
||||
.ciam-card {
|
||||
@include ciam-vertically-spaced;
|
||||
|
||||
background-color: var(--bg-light-primary);
|
||||
box-shadow:
|
||||
0 4px 6px -4px rgb(0 0 0 / 10%),
|
||||
0 1px 29px -3px rgb(0 0 0 / 16%);
|
||||
padding: var(--ds-spacing-800) var(--ds-spacing-400);
|
||||
border-radius: var(--ds-border-radius-400);
|
||||
max-width: 464px;
|
||||
margin: 0 auto;
|
||||
min-height: 500px;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: var(--ds-spacing-1300);
|
||||
}
|
||||
|
||||
.notification {
|
||||
@include ds-body-sm-regular;
|
||||
|
||||
color: var(--ds-color-text-primary);
|
||||
padding: 0 var(--ds-spacing-400);
|
||||
border-width: 0;
|
||||
border-radius: var(--ds-border-radius-200);
|
||||
gap: var(--ds-spacing-300);
|
||||
|
||||
.notification-icon {
|
||||
font-size: math.div(20em, 14);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--ds-spacing-50);
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
padding: var(--ds-spacing-400) 0;
|
||||
}
|
||||
|
||||
&.notification-type-error {
|
||||
background-color: var(--ds-color-red-50);
|
||||
}
|
||||
|
||||
&.notification-type-info {
|
||||
background-color: var(--ds-color-blue-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ciam-login-register-error-container .notification {
|
||||
@include ciam-bottom-margin;
|
||||
}
|
||||
|
||||
.ciam-disclaimers p {
|
||||
@include ds-body-sm-regular;
|
||||
|
||||
padding-bottom: var(--ds-spacing-250);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ciam-card-separator {
|
||||
margin: var(--ds-spacing-500) 0;
|
||||
height: 0;
|
||||
border-top: solid 1px var(--ds-grey-20);
|
||||
}
|
||||
|
||||
.ciam-card-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ds-spacing-250);
|
||||
|
||||
p {
|
||||
@include ds-body-sm-regular;
|
||||
|
||||
color: var(--ds-color-text-secondary);
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ciam-login-register-text {
|
||||
@include ciam-bottom-margin;
|
||||
}
|
||||
|
||||
.ciam-login-register-text-final {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ciam-footer-ds-logo {
|
||||
text-align: center;
|
||||
padding: var(--ds-spacing-200) 0;
|
||||
}
|
||||
|
||||
.ciam-stepper {
|
||||
margin: 0;
|
||||
height: 4px;
|
||||
border-radius: var(--ds-border-radius-full);
|
||||
|
||||
.step {
|
||||
background: var(--ds-color-neutral-200);
|
||||
}
|
||||
}
|
||||
|
||||
.ciam-work-uni-sso {
|
||||
padding-top: var(--ds-spacing-200);
|
||||
font-weight: var(--ds-font-weight-semibold);
|
||||
}
|
||||
|
||||
.ciam-login-register-or-text-container {
|
||||
@include ds-body-xs-semibold;
|
||||
@include ciam-bottom-margin;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ds-spacing-250);
|
||||
color: var(--ds-color-text-secondary);
|
||||
padding: var(--ds-spacing-200) 0 0 0;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
height: 1px;
|
||||
background-color: var(--ds-color-neutral-200);
|
||||
}
|
||||
}
|
||||
|
||||
37
services/web/frontend/stylesheets/ciam/ciam-links.scss
Normal file
37
services/web/frontend/stylesheets/ciam/ciam-links.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
// TODO: Replace `fuchsia` by the correct colors.
|
||||
|
||||
.ciam-enabled,
|
||||
.website-redesign:not(.application-page) .ciam-enabled .notification {
|
||||
// Links, used in services/web/frontend/stylesheets/base/links.scss
|
||||
--link-color: currentcolor;
|
||||
--link-hover-color: var(--ds-color-text-primary);
|
||||
--link-visited-color: var(--ds-color-text-secondary);
|
||||
--link-text-decoration: underline;
|
||||
--link-hover-text-decoration: underline;
|
||||
|
||||
a {
|
||||
text-decoration-thickness: 5%;
|
||||
text-underline-offset: 19.5%;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
text-decoration-thickness: 10%;
|
||||
}
|
||||
|
||||
a:focus-visible {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
background-color: var(--ds-color-yellow-500);
|
||||
|
||||
&.ciam-image-link {
|
||||
@include ds-focus-outline;
|
||||
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.btn {
|
||||
background-color: var(--bs-btn-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
15
services/web/frontend/stylesheets/ciam/ciam-login.scss
Normal file
15
services/web/frontend/stylesheets/ciam/ciam-login.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
@import 'ds-design-system';
|
||||
|
||||
.ciam-login-text {
|
||||
text-align: center;
|
||||
padding: var(--ds-spacing-200) 0;
|
||||
margin: 0;
|
||||
|
||||
&.ciam-login-bottom-space {
|
||||
@include ciam-bottom-margin;
|
||||
}
|
||||
}
|
||||
|
||||
.ciam-login-sso-form-controls {
|
||||
@include ciam-vertically-spaced;
|
||||
}
|
||||
@@ -11,41 +11,19 @@
|
||||
padding: var(--ds-spacing-200) 0;
|
||||
}
|
||||
|
||||
.ciam-work-uni-sso {
|
||||
color: var(--ds-color-text-secondary);
|
||||
padding-top: var(--ds-spacing-200);
|
||||
margin-bottom: var(--ds-spacing-400);
|
||||
font-weight: var(--ds-font-weight-semibold);
|
||||
}
|
||||
|
||||
.ciam-register-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.login-register-or-text-container {
|
||||
@include ds-body-xs-semibold;
|
||||
|
||||
gap: var(--ds-spacing-250);
|
||||
padding: var(--ds-spacing-200) 0 0 0;
|
||||
margin-bottom: var(--ds-spacing-400);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: var(--ds-color-neutral-200);
|
||||
}
|
||||
}
|
||||
|
||||
.login-register-error-container {
|
||||
padding-bottom: 0;
|
||||
|
||||
.notification {
|
||||
margin-bottom: var(--ds-spacing-400);
|
||||
footer .footer-links {
|
||||
@include media-breakpoint-up(sm) {
|
||||
justify-content: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ciam-password-group {
|
||||
margin-bottom: var(--ds-spacing-400);
|
||||
@include ciam-bottom-margin;
|
||||
}
|
||||
|
||||
.ciam-password-requirements-message {
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
// TODO: Replace `fuchsia` by the correct colors.
|
||||
|
||||
.ciam-enabled,
|
||||
.website-redesign:not(.application-page) .ciam-enabled .notification {
|
||||
// Links, used in services/web/frontend/stylesheets/base/links.scss
|
||||
--link-color: var(--ds-color-text-primary);
|
||||
--link-hover-color: var(--ds-color-text-secondary);
|
||||
--link-visited-color: var(--ds-color-text-secondary);
|
||||
--link-text-decoration: underline;
|
||||
--link-hover-text-decoration: none;
|
||||
}
|
||||
@@ -111,4 +111,18 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.button-content {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--ds-spacing-200); // Add gap between text and icons
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-social-icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
padding: var(--ds-spacing-50);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,8 +8,6 @@
|
||||
.form-group-ds label,
|
||||
.website-redesign .form-group-ds label,
|
||||
.website-redesign .form-label-ds {
|
||||
@include ds-body-sm-semibold;
|
||||
|
||||
--bs-body-font-family: var(--ds-font-family-sans), sans-serif;
|
||||
--bs-success-rgb: 25, 117, 76; // #19754c
|
||||
--bs-danger-rgb: 195, 9, 43; // #c3092b
|
||||
@@ -22,6 +20,12 @@
|
||||
margin-bottom: var(--ds-spacing-100);
|
||||
}
|
||||
|
||||
.form-label-ds,
|
||||
.form-group-ds label,
|
||||
.website-redesign .form-group-ds label {
|
||||
@include ds-body-md-semibold;
|
||||
}
|
||||
|
||||
.form-group-ds {
|
||||
margin-bottom: var(--ds-spacing-400);
|
||||
}
|
||||
|
||||
@@ -22,6 +22,10 @@
|
||||
margin: auto;
|
||||
max-width: 480px;
|
||||
|
||||
h1 {
|
||||
margin-bottom: var(--ds-spacing-400);
|
||||
}
|
||||
|
||||
.notification {
|
||||
margin-bottom: var(--spacing-05);
|
||||
}
|
||||
|
||||
@@ -128,7 +128,7 @@
|
||||
"administration_and_security": "Administration and security",
|
||||
"advanced_reference_search": "Advanced <0>reference search</0>",
|
||||
"advanced_reference_search_mode": "Advanced reference search",
|
||||
"advancing_research_with": "Advancing research with <a href=\"__linkOverleaf__\">Overleaf</a>, <a href=\"__linkPapers__\">Papers</a>, and <a href=\"__linkDS__\">more</a>",
|
||||
"advancing_research_with": "Advancing research with <0>Overleaf</0>, <1>Papers</1>, and more",
|
||||
"after_that_well_bill_you_x_total_y_subtotal_z_tax_annually_on_date_unless_you_cancel": "After that, we’ll bill you __totalAmount__ (__subtotalAmount__ + __taxAmount__ tax) annually on __date__, unless you cancel.",
|
||||
"aggregate_changed": "Changed",
|
||||
"aggregate_to": "to",
|
||||
@@ -830,6 +830,7 @@
|
||||
"for_teams_and_organizations_who_want_a_streamlined_sso_and_security": "For teams and organizations who want a streamlined sign-on process and our strongest cloud security.",
|
||||
"for_universities": "For universities",
|
||||
"forever": "forever",
|
||||
"forgot_password": "Forgot password?",
|
||||
"forgot_your_password": "Forgot your password",
|
||||
"format": "Format",
|
||||
"found_matching_deleted_users": "Found __deletedUserCount__ matching deleted users",
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Reference in New Issue
Block a user