From a72348771fb4f9b31df4520bde92a10a6dd0a846 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 4 May 2023 11:29:54 +0200
Subject: [PATCH] change(ui) - enforce sso

---
 frontend/app/components/Login/Login.js | 212 ++++++++++++++-----------
 1 file changed, 121 insertions(+), 91 deletions(-)

diff --git a/frontend/app/components/Login/Login.js b/frontend/app/components/Login/Login.js
index a63498730..946b5ca36 100644
--- a/frontend/app/components/Login/Login.js
+++ b/frontend/app/components/Login/Login.js
@@ -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>