change(ui) - enforce sso
This commit is contained in:
Shekar Siri
parent
693449e739
commit
a72348771f
1 changed files with 121 additions and 91 deletions
|
|
@ -52,7 +52,7 @@ class Login extends React.Component {
|
|||
|
||||
componentDidMount() {
|
||||
const { params } = this.props;
|
||||
this.props.fetchTenants()
|
||||
this.props.fetchTenants();
|
||||
const jwt = params.get('jwt');
|
||||
if (jwt) {
|
||||
this.props.setJwt(jwt);
|
||||
|
|
@ -86,105 +86,135 @@ class Login extends React.Component {
|
|||
<div className="flex items-center justify-center h-screen">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="m-10 ">
|
||||
<img src="/assets/logo.svg" width={200}/>
|
||||
<img src="/assets/logo.svg" width={200} />
|
||||
</div>
|
||||
<div className="border rounded bg-white">
|
||||
<Form onSubmit={this.onSubmit} className="flex items-center justify-center flex-col">
|
||||
<h2 className="text-center text-2xl font-medium mb-6 border-b p-5 w-full">Login to your account</h2>
|
||||
<Loader loading={loading}>
|
||||
{CAPTCHA_ENABLED && (
|
||||
<ReCAPTCHA
|
||||
ref={recaptchaRef}
|
||||
size="invisible"
|
||||
sitekey={window.env.CAPTCHA_SITE_KEY}
|
||||
onChange={(token) => this.handleSubmit(token)}
|
||||
/>
|
||||
)}
|
||||
<div style={{ width: '350px' }} className="px-8">
|
||||
<Form.Field>
|
||||
<label>Email Address</label>
|
||||
<Input
|
||||
autoFocus
|
||||
data-test-id={"login"}
|
||||
autoFocus={true}
|
||||
autoComplete="username"
|
||||
type="email"
|
||||
placeholder="e.g. john@example.com"
|
||||
name="email"
|
||||
onChange={this.write}
|
||||
required
|
||||
icon="envelope"
|
||||
<h2 className="text-center text-2xl font-medium mb-6 border-b p-5 w-full">
|
||||
Login to your account
|
||||
</h2>
|
||||
<div className={cn({'hidden': authDetails.enforceSSO})}>
|
||||
<Form
|
||||
onSubmit={this.onSubmit}
|
||||
className={cn('flex items-center justify-center flex-col')}
|
||||
>
|
||||
<Loader loading={loading}>
|
||||
{CAPTCHA_ENABLED && (
|
||||
<ReCAPTCHA
|
||||
ref={recaptchaRef}
|
||||
size="invisible"
|
||||
sitekey={window.env.CAPTCHA_SITE_KEY}
|
||||
onChange={(token) => this.handleSubmit(token)}
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<label className="mb-2">Password</label>
|
||||
<Input
|
||||
data-test-id={"password"}
|
||||
autoComplete="current-password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
name="password"
|
||||
onChange={this.write}
|
||||
required
|
||||
icon="key"
|
||||
/>
|
||||
</Form.Field>
|
||||
</div>
|
||||
</Loader>
|
||||
{errors && errors.length ? (
|
||||
<div className="px-8 my-2 w-full">
|
||||
{errors.map((error) => (
|
||||
<div className="flex items-center bg-red-lightest rounded p-3">
|
||||
<Icon name="info" color="red" size="20" />
|
||||
<span className="color-red ml-2">
|
||||
{error}
|
||||
<br />
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="px-8 w-full">
|
||||
<Button data-test-id={"log-button"} className="mt-2 w-full text-center" type="submit" variant="primary">
|
||||
{'Login'}
|
||||
</Button>
|
||||
)}
|
||||
<div style={{ width: '350px' }} className="px-8">
|
||||
<Form.Field>
|
||||
<label>Email Address</label>
|
||||
<Input
|
||||
autoFocus
|
||||
data-test-id={'login'}
|
||||
autoFocus={true}
|
||||
autoComplete="username"
|
||||
type="email"
|
||||
placeholder="e.g. john@example.com"
|
||||
name="email"
|
||||
onChange={this.write}
|
||||
required
|
||||
icon="envelope"
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<label className="mb-2">Password</label>
|
||||
<Input
|
||||
data-test-id={'password'}
|
||||
autoComplete="current-password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
name="password"
|
||||
onChange={this.write}
|
||||
required
|
||||
icon="key"
|
||||
/>
|
||||
</Form.Field>
|
||||
</div>
|
||||
</Loader>
|
||||
{errors && errors.length ? (
|
||||
<div className="px-8 my-2 w-full">
|
||||
{errors.map((error) => (
|
||||
<div className="flex items-center bg-red-lightest rounded p-3">
|
||||
<Icon name="info" color="red" size="20" />
|
||||
<span className="color-red ml-2">
|
||||
{error}
|
||||
<br />
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="my-8 text-center">
|
||||
<span className="color-gray-medium">Having trouble logging in?</span> <Link to={FORGOT_PASSWORD} className="link ml-1">{'Reset password'}</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
<div className={cn(stl.sso, 'py-2 flex flex-col items-center')}>
|
||||
{authDetails.sso ? (
|
||||
<a href="/api/sso/saml2" rel="noopener noreferrer">
|
||||
<Button variant="text-primary" type="submit">
|
||||
{`Login with SSO ${
|
||||
authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : ''
|
||||
}`}
|
||||
</Button>
|
||||
</a>
|
||||
) : (
|
||||
<Tooltip
|
||||
delay={0}
|
||||
title={<div className="text-center">{authDetails.edition === 'ee' ? <span>SSO has not been configured. <br /> Please reach out to your admin.</span> : ENTERPRISE_REQUEIRED}</div>}
|
||||
placement="top"
|
||||
>
|
||||
<div className="px-8 w-full">
|
||||
<Button
|
||||
variant="text-primary"
|
||||
data-test-id={'log-button'}
|
||||
className="mt-2 w-full text-center"
|
||||
type="submit"
|
||||
className="pointer-events-none opacity-30"
|
||||
variant="primary"
|
||||
>
|
||||
{`Login with SSO ${
|
||||
authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : ''
|
||||
}`}
|
||||
{'Login'}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="my-8 text-center">
|
||||
<span className="color-gray-medium">Having trouble logging in?</span>{' '}
|
||||
<Link to={FORGOT_PASSWORD} className="link ml-1">
|
||||
{'Reset password'}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
<div className={cn(stl.sso, 'py-2 flex flex-col items-center')}>
|
||||
{authDetails.sso ? (
|
||||
<a href="/api/sso/saml2" rel="noopener noreferrer">
|
||||
<Button variant="text-primary" type="submit">
|
||||
{`Login with SSO ${
|
||||
authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : ''
|
||||
}`}
|
||||
</Button>
|
||||
</a>
|
||||
) : (
|
||||
<Tooltip
|
||||
delay={0}
|
||||
title={
|
||||
<div className="text-center">
|
||||
{authDetails.edition === 'ee' ? (
|
||||
<span>
|
||||
SSO has not been configured. <br /> Please reach out to your admin.
|
||||
</span>
|
||||
) : (
|
||||
ENTERPRISE_REQUEIRED
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
placement="top"
|
||||
>
|
||||
<Button
|
||||
variant="text-primary"
|
||||
type="submit"
|
||||
className="pointer-events-none opacity-30"
|
||||
>
|
||||
{`Login with SSO ${
|
||||
authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : ''
|
||||
}`}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={cn("flex items-center w-96 justify-center my-8", { 'hidden' : !authDetails.enforceSSO})}>
|
||||
<a href="/api/sso/saml2" rel="noopener noreferrer">
|
||||
<Button variant="primary">{`Login with SSO ${
|
||||
authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : ''
|
||||
}`}</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue