Redesign the login page (datahub-project#4684)

maggiehays · Aug 1, 2022 · 9222078 · 9222078
1 parent 57ee550
commit 9222078
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 43 deletions.
diff --git a/datahub-web-react/src/app/auth/LogIn.tsx b/datahub-web-react/src/app/auth/LogIn.tsx
@@ -3,7 +3,7 @@ import * as QueryString from 'query-string';
 import { Input, Button, Form, message, Image } from 'antd';
 import { UserOutlined, LockOutlined } from '@ant-design/icons';
 import { useReactiveVar } from '@apollo/client';
-import { useTheme } from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { Redirect, useLocation } from 'react-router';
 import styles from './login.module.css';
 import { Message } from '../shared/Message';
@@ -16,6 +16,28 @@ type FormValues = {
     password: string;
 };
 
+const FormInput = styled(Input)`
+    &&& {
+        height: 32px;
+        font-size: 12px;
+        border: 1px solid #555555;
+        border-radius: 5px;
+        background-color: transparent;
+        color: white;
+        line-height: 1.5715;
+    }
+    > .ant-input {
+        color: white;
+        font-size: 14px;
+        background-color: transparent;
+    }
+    > .ant-input:hover {
+        color: white;
+        font-size: 14px;
+        background-color: transparent;
+    }
+`;
+
 export type LogInProps = Record<string, never>;
 
 export const LogIn: React.VFC<LogInProps> = () => {
@@ -64,22 +86,45 @@ export const LogIn: React.VFC<LogInProps> = () => {
     return (
         <div className={styles.login_page}>
             <div className={styles.login_box}>
-                <Image wrapperClassName={styles.logo_image} src={themeConfig.assets?.logoUrl} preview={false} />
-                {loading && <Message type="loading" content="Logging in..." />}
-                <h3 className={styles.title}>Connecting you to the data that matters</h3>
-                <Form onFinish={handleLogin}>
-                    <Form.Item name="username" rules={[{ required: true, message: 'Please input your username!' }]}>
-                        <Input prefix={<UserOutlined />} placeholder="Username" />
-                    </Form.Item>
-                    <Form.Item name="password">
-                        <Input prefix={<LockOutlined />} type="password" placeholder="Password" />
-                    </Form.Item>
-                    <Form.Item>
-                        <Button type="primary" block htmlType="submit" className={styles.login_button}>
-                            Log in
-                        </Button>
-                    </Form.Item>
-                </Form>
+                <div className={styles.login_logo_box}>
+                    <Image wrapperClassName={styles.logo_image} src={themeConfig.assets?.logoUrl} preview={false} />
+                </div>
+                <div className={styles.login_form_box}>
+                    {loading && <Message type="loading" content="Logging in..." />}
+                    <Form onFinish={handleLogin} layout="vertical">
+                        <Form.Item
+                            name="username"
+                            // eslint-disable-next-line jsx-a11y/label-has-associated-control
+                            label={<label style={{ color: 'white' }}>Username</label>}
+                        >
+                            <FormInput prefix={<UserOutlined />} data-testid="username" />
+                        </Form.Item>
+                        <Form.Item
+                            name="password"
+                            // eslint-disable-next-line jsx-a11y/label-has-associated-control
+                            label={<label style={{ color: 'white' }}>Password</label>}
+                        >
+                            <FormInput prefix={<LockOutlined />} type="password" data-testid="password" />
+                        </Form.Item>
+                        <Form.Item style={{ marginBottom: '0px' }} shouldUpdate>
+                            {({ getFieldsValue }) => {
+                                const { username, password } = getFieldsValue();
+                                const formIsComplete = !!username && !!password;
+                                return (
+                                    <Button
+                                        type="primary"
+                                        block
+                                        htmlType="submit"
+                                        className={styles.login_button}
+                                        disabled={!formIsComplete}
+                                    >
+                                        Sign In
+                                    </Button>
+                                );
+                            }}
+                        </Form.Item>
+                    </Form>
+                </div>
             </div>
         </div>
     );

diff --git a/datahub-web-react/src/app/auth/login.module.css b/datahub-web-react/src/app/auth/login.module.css
@@ -1,39 +1,49 @@
 .login_page {
-    background-color: rgb(51 62 76);
+    background-color: #171717;
     min-height: 100vh;
 }
 
 .login_box {
-    max-width: 24em;
-    padding-left: 1em;
-    padding-right: 1em;
-    padding-top: 10em;
-    margin-left: auto;
-    margin-right: auto;
+    width: 400px;
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%,-50%);
 }
 
-.login_button {
-    color: white;
-    background-color: transparent;
-    border: 1px solid white;
-}
-
-.login_button:hover {
-    color: rgb(51 62 76);
-    background-color: white;
-    border: 1px solid white;
+.login_logo_box {
+    width: 100%;
+    height: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .logo_image {
     margin: auto auto;
-    width: 50%;
-    height: 40%;
+    width: 92px;
+    height: 92px;
     display: block;
 }
 
-.title {
-    color: white;
-    margin: 20px 0px;
+.login_form_box {
+    width: 100%;
+    background-color: #1C1C1C;
+    border: 1px solid #555555;
+    border-radius: 5px;
+    padding: 2em;
+}
+
+.login_button {
+    color: #171717;
+    background-color: #EEEEEE;
+    border: 1px solid  #555555;
+    height: 40px;
     font-size: 14px;
-    text-align: center;
+}
+
+.login_button:hover {
+    color: white;
+    background-color: transparent;
+    border: 1px solid  #555555;
 }
diff --git a/smoke-test/tests/cypress/cypress/integration/login/login.js b/smoke-test/tests/cypress/cypress/integration/login/login.js
@@ -1,9 +1,9 @@
 describe('login', () => {
   it('logs in', () => {
     cy.visit('/');
-    cy.get('input[placeholder=Username]').type('datahub');
-    cy.get('input[placeholder=Password]').type('datahub');
-    cy.contains('Log in').click();
+    cy.get('input[data-testid=username]').type('datahub');
+    cy.get('input[data-testid=password]').type('datahub');
+    cy.contains('Sign In').click();
     cy.contains('Welcome back, Data Hub');
   });
 })