feat(nms): Add new style to the Login page

Signed-off-by: HannaFar <hannafarag159@gmail.com>
magma · Jul 27, 2022 · 444b135 · 444b135
1 parent 612899e
commit 444b135
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 66 deletions.
diff --git a/nms/app/components/FormField.tsx b/nms/app/components/FormField.tsx
@@ -55,6 +55,13 @@ const useStyles = makeStyles<Theme>(theme => ({
     fontWeight: 400,
     marginLeft: '8px',
   },
+  label: {
+    fontSize: '14px',
+    fontFamily: 'Inter',
+    fontStyle: 'normal',
+    fontWeight: 500,
+    lineHeight: '20px',
+  },
   secondaryHeading: {
     flexBasis: '66.66%',
   },
@@ -87,6 +94,7 @@ type Props = {
   isOptional?: boolean;
   // If true, the left and right padding is removed.
   disableGutters?: boolean;
+  className?: string;
 };
 
 export default function FormField(props: Props) {
@@ -115,9 +123,12 @@ export default function FormField(props: Props) {
 export function AltFormField(props: Props) {
   const classes = useStyles();
   return (
-    <ListItem dense={props.dense} disableGutters={props.disableGutters}>
+    <ListItem
+      dense={props.dense}
+      disableGutters={props.disableGutters}
+      className={props.className}>
       <Grid container>
-        <Grid item xs={12}>
+        <Grid item xs={12} className={classes.label}>
           {props.label}
           {props.isOptional && (
             <Typography

diff --git a/nms/app/e2e/LoginUtils.ts b/nms/app/e2e/LoginUtils.ts
@@ -13,7 +13,8 @@
 import puppeteer from 'puppeteer';
 
 const DASHBOARD_SELECTOR = `//span[text()='Dashboard']`;
-const LOGINFORM_SELECTOR = `//span[text()='Magma']`;
+const LOGINFORM_SELECTOR = `//*[@data-testid='loginForm']`;
+
 export const ARTIFACTS_DIR = `/tmp/nms_artifacts/`;
 
 const user = {

diff --git a/nms/app/login.tsx b/nms/app/login.tsx
@@ -14,6 +14,7 @@
 import './util/axiosConfig';
 import './util/polyfill';
 
+import CssBaseline from '@material-ui/core/CssBaseline';
 import LoginForm from './views/login/LoginForm';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -39,6 +40,7 @@ ReactDOM.render(
   <AppContextProvider>
     <BrowserRouter>
       <ThemeProvider theme={defaultTheme}>
+        <CssBaseline />
         <LoginWrapper />
       </ThemeProvider>
     </BrowserRouter>

diff --git a/nms/app/views/login/LoginForm.tsx b/nms/app/views/login/LoginForm.tsx
@@ -19,27 +19,61 @@ import FormLabel from '@material-ui/core/FormLabel';
 import React from 'react';
 import Text from '../../theme/design-system/Text';
 import TextField from '@material-ui/core/TextField';
+
+import {AltFormField} from '../../components/FormField';
+import {colors} from '../../theme/default';
 import {withStyles} from '@material-ui/core/styles';
 
 const ENTER_KEY = 13;
 const styles = {
+  capitalize: {
+    textTransform: 'capitalize',
+  },
   card: {
     maxWidth: '400px',
-    margin: '10% auto 0',
+    margin: '24px auto 0',
+    padding: '20px 0',
+  },
+  cardContent: {
+    padding: '0 24px',
   },
   input: {
     display: 'inline-flex',
     width: '100%',
-    margin: '5px 0',
   },
   footer: {
-    padding: '18px 16px 16px',
-    float: 'right',
+    padding: '0 24px',
+  },
+  login: {
+    marginTop: '10%',
   },
   title: {
-    marginBottom: '16px',
     textAlign: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    margin: '12px auto 0',
+    flexDirection: 'column',
+    maxWidth: '400px',
+    alignItems: 'start',
+  },
+  formTitle: {
+    marginBottom: '8px',
+    textAlign: 'left',
     display: 'block',
+    fontSize: '20px',
+  },
+  FormField: {
+    paddingBottom: '0',
+  },
+  submitButton: {
+    width: '100%',
+    marginTop: '16px',
+  },
+  regular: {
+    color: colors.primary.mirage,
+  },
+  gray: {
+    color: colors.primary.gullGray,
   },
 } as const;
 
@@ -53,6 +87,9 @@ type Props = {
   ssoAction?: string;
 };
 
+const HOST_PORTAL_TITLE = 'Magma Host Portal';
+const ORGANIZATION_PORTAL_TITLE = 'Magma Organization Portal';
+
 class LoginForm extends React.Component<Props> {
   form: HTMLFormElement | null = null;
 
@@ -65,67 +102,103 @@ class LoginForm extends React.Component<Props> {
     const params = new URLSearchParams(window.location.search);
     const to = params.get('to');
 
-    if (ssoEnabled) {
-      return (
-        <Card raised={true} className={classes.card}>
-          <CardContent>
-            <Text className={classes.title} variant="h5">
-              {this.props.title}
-            </Text>
-            {error}
-          </CardContent>
-          <CardActions className={classes.footer}>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={() => {
-                window.location.href =
-                  (ssoAction || '') + window.location.search;
-              }}>
-              Sign In
-            </Button>
-          </CardActions>
-        </Card>
-      );
-    }
+    const [organization] = window.location.hostname.split('.', 1);
+    const hostPortal: boolean = organization === 'host';
 
     return (
-      <Card raised={true} className={classes.card}>
-        <form
-          ref={ref => (this.form = ref)}
-          method="post"
-          action={this.props.action}>
-          <input type="hidden" name="_csrf" value={csrfToken} />
-          <input type="hidden" name="to" value={to!} />
-          <CardContent>
-            <Text className={classes.title} variant="h5">
-              {this.props.title}
+      <div className={classes.login} data-testid="loginForm">
+        <div className={classes.title}>
+          {!hostPortal && (
+            <Text className={classes.capitalize} variant="h4">
+              {organization}
             </Text>
-            {error}
-            <TextField
-              name="email"
-              label="Email"
-              className={classes.input}
-              onKeyUp={key => key.keyCode === ENTER_KEY && this.form?.submit()}
-            />
-            <TextField
-              name="password"
-              label="Password"
-              type="password"
-              className={classes.input}
-              onKeyUp={key => key.keyCode === ENTER_KEY && this.form?.submit()}
-            />
-          </CardContent>
-          <CardActions className={classes.footer}>
-            <Button
-              onClick={() => this.form?.submit()}
-              variant="contained"
-              color="primary">
-              Login
-            </Button>
-          </CardActions>
-        </form>
-      </Card>
+          )}
+          <Text
+            className={hostPortal ? classes.regular : classes.gray}
+            variant={hostPortal ? 'h4' : 'subtitle1'}>
+            {hostPortal ? HOST_PORTAL_TITLE : ORGANIZATION_PORTAL_TITLE}
+          </Text>
+        </div>
+        <Card raised={true} className={classes.card}>
+          {ssoEnabled ? (
+            <>
+              <CardContent className={classes.cardContent}>
+                <Text className={classes.formTitle} variant="h6">
+                  {`Log in to ${
+                    hostPortal ? 'host' : organization
+                  } user account`}
+                </Text>
+                {error}
+              </CardContent>
+              <CardActions className={classes.footer}>
+                <Button
+                  color="primary"
+                  variant="contained"
+                  className={classes.submitButton}
+                  onClick={() => {
+                    window.location.href =
+                      (ssoAction || '') + window.location.search;
+                  }}>
+                  Login
+                </Button>
+              </CardActions>
+            </>
+          ) : (
+            <>
+              <form
+                ref={ref => (this.form = ref)}
+                method="post"
+                action={this.props.action}>
+                <input type="hidden" name="_csrf" value={csrfToken} />
+                <input type="hidden" name="to" value={to || ''} />
+                <CardContent className={classes.cardContent}>
+                  <Text className={classes.formTitle} variant="h6">
+                    {`Log in to ${
+                      hostPortal ? 'host' : organization
+                    } user account`}
+                  </Text>
+                  {error}
+                  <AltFormField
+                    disableGutters
+                    label={'Email'}
+                    className={classes.FormField}>
+                    <TextField
+                      variant="outlined"
+                      name="email"
+                      placeholder="Email"
+                      className={classes.input}
+                      onKeyUp={key =>
+                        key.keyCode === ENTER_KEY && this.form!.submit()
+                      }
+                    />
+                  </AltFormField>
+                  <AltFormField disableGutters label={'Password'}>
+                    <TextField
+                      variant="outlined"
+                      name="password"
+                      placeholder="Password"
+                      type="password"
+                      className={classes.input}
+                      onKeyUp={key =>
+                        key.keyCode === ENTER_KEY && this.form!.submit()
+                      }
+                    />
+                  </AltFormField>
+                </CardContent>
+                <CardActions className={classes.footer}>
+                  <Button
+                    color="primary"
+                    variant="contained"
+                    className={classes.submitButton}
+                    onClick={() => this.form!.submit()}>
+                    Login
+                  </Button>
+                </CardActions>
+              </form>
+            </>
+          )}
+        </Card>
+      </div>
     );
   }
 }