diff --git a/frontend/src/pages/LandingPage.css b/frontend/src/pages/LandingPage.css index 6f9abe0..5ef33db 100644 --- a/frontend/src/pages/LandingPage.css +++ b/frontend/src/pages/LandingPage.css @@ -880,3 +880,10 @@ } .lp-studio-cta { margin-top: 34px; text-align: center; } + +/* The line between the provider's button and the email form, and the line + that stands in for the form when there is no email sign-in at all. */ +.lp-modal-or { + margin: 12px 0 0; text-align: center; + font-size: .82rem; color: var(--text-muted); +} diff --git a/frontend/src/pages/LandingPage.jsx b/frontend/src/pages/LandingPage.jsx index 6fb86d5..a104166 100644 --- a/frontend/src/pages/LandingPage.jsx +++ b/frontend/src/pages/LandingPage.jsx @@ -254,6 +254,13 @@ function AuthModal({ mode, onClose, onSwitch }) { const [inviteRequired, setInviteRequired] = useState(false) const [inviteCode, setInviteCode] = useState('') const [signupOpen, setSignupOpen] = useState(true) + //: The public page's own sign-in box. It is a different component from + //: /login and knew nothing about the provider, so on a site where the only + //: way in is single sign-on it offered an email and a password and a + //: "Forgot password?" — three things that cannot work. + const [ssoOnly, setSsoOnly] = useState(false) + const [ssoEnabled, setSsoEnabled] = useState(false) + const [providerName, setProviderName] = useState('single sign-on') useEffect(() => { let live = true @@ -266,8 +273,13 @@ function AuthModal({ mode, onClose, onSwitch }) { // offer, and a Register tab that leads to a refusal is worse than no // tab at all. setSignupOpen(res.data?.registration_open !== false) + setSsoOnly(res.data?.sso_only === true) + setProviderName(res.data?.provider_name || 'single sign-on') }) .catch(() => {}) + api.get('/auth/sso/config') + .then(res => { if (live) setSsoEnabled(res.data?.sso_enabled === true) }) + .catch(() => {}) return () => { live = false } }, []) @@ -355,8 +367,19 @@ function AuthModal({ mode, onClose, onSwitch }) { )} + {/* The provider, first, and on an SSO-only site the only thing here. */} + {isLogin && !registered && ssoEnabled && ( + <> + + Sign in with {providerName} + + {!ssoOnly &&

or sign in with email

} + + )} + {/* Login form */} - {isLogin && !registered && ( + {isLogin && !registered && !ssoOnly && ( <> {unverified && !resendSent && (
@@ -387,8 +410,14 @@ function AuthModal({ mode, onClose, onSwitch }) { )} + {isLogin && !registered && ssoOnly && ( +

+ This site signs in through {providerName}. +

+ )} + {/* Register form */} - {!isLogin && !registered && ( + {!isLogin && !registered && !ssoOnly && ( <> {error &&
{error}
}