feat(fbcnms-ui): Add Host Portal Login Page

Signed-off-by: HannaFar <[email protected]>
magma · Mar 15, 2022 · 8bf968f · 8bf968f
1 parent bb38d73
commit 8bf968f
Show file tree

Hide file tree

Showing 2 changed files with 153 additions and 53 deletions.
diff --git a/fbcnms-packages/fbcnms-ui/components/auth/LoginForm.js b/fbcnms-packages/fbcnms-ui/components/auth/LoginForm.js
@@ -1,3 +1,4 @@
+/* eslint-disable header/header */
 /**
  * Copyright 2004-present Facebook. All Rights Reserved.
  *
@@ -15,30 +16,57 @@ import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import FormLabel from '@material-ui/core/FormLabel';
+import Grid from '@material-ui/core/Grid';
 import React from 'react';
 import Text from '../design-system/Text';
 import TextField from '@material-ui/core/TextField';
+
+import {AltFormField} from '../design-system/FormField/FormField';
 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: {
-    marginTop: '10px',
-    float: 'right',
+    padding: '0 24px',
+  },
+  login: {
+    marginTop: '10%',
   },
   title: {
-    marginBottom: '16px',
     textAlign: 'center',
+    // padding: '16px',
+    display: 'flex',
+    justifyContent: 'center',
+    margin: '12px auto 0',
+    // padding: '20px 0',
+    flexDirection: 'column',
+    maxWidth: '400px',
+    alignItems: 'start',
+  },
+  formTitle: {
+    marginBottom: '16px',
+    textAlign: 'left',
     display: 'block',
+    fontSize: '20px',
+  },
+  submitButtom: {
+    width: '100%',
   },
 };
 
@@ -54,6 +82,9 @@ type Props = {
 
 type State = {};
 
+const HOST_PORTAL_TITLE = 'Magma Host Portal';
+const ORGANIZATION_PORTAL_TITLE = 'Magma Organization Portal';
+
 class LoginForm extends React.Component<Props, State> {
   form: ElementRef<any>;
 
@@ -62,63 +93,128 @@ class LoginForm extends React.Component<Props, State> {
     const error = this.props.error ? (
       <FormLabel error>{this.props.error}</FormLabel>
     ) : null;
-
     const params = new URLSearchParams(window.location.search);
     const to = params.get('to');
-
+    const hostPortal = window.location.hostname.slice(0, 4) === 'mast';
+    const hostname = window.location.hostname;
     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
-              onClick={() => {
-                window.location = (ssoAction || '') + window.location.search;
-              }}>
-              Sign In
-            </Button>
-          </CardActions>
-        </Card>
+        <Grid className={classes.login}>
+          <Grid container>
+            <Grid className={classes.title} item xs={12}>
+              {/* <Grid container> */}
+              {!hostPortal && (
+                <Text className={classes.capitalize} variant="h5">
+                  {hostname.slice(0, hostname.lastIndexOf('.'))}{' '}
+                </Text>
+              )}
+              <Text
+                color={hostPortal ? 'regular' : 'gray'}
+                variant={hostPortal ? 'h5' : 'subtitle1'}>
+                {hostPortal ? HOST_PORTAL_TITLE : ORGANIZATION_PORTAL_TITLE}
+              </Text>
+            </Grid>
+            {/* </Grid> */}
+            <Grid item xs={12}>
+              <Card raised={true} className={classes.card}>
+                <CardContent>
+                  <Text className={classes.title} variant="h6">
+                    {`Log in to ${
+                      hostPortal
+                        ? 'host'
+                        : hostname.slice(0, hostname.lastIndexOf('.'))
+                    } user account`}
+                  </Text>
+                  {error}
+                </CardContent>
+                <CardActions className={classes.footer}>
+                  <Button
+                    skin="comet"
+                    className={classes.submitButtom}
+                    onClick={() => {
+                      window.location =
+                        (ssoAction || '') + window.location.search;
+                    }}>
+                    Login
+                  </Button>
+                </CardActions>
+              </Card>
+            </Grid>
+          </Grid>
+        </Grid>
       );
     }
 
     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}
+      <Grid className={classes.login}>
+        <Grid container>
+          <Grid className={classes.title} item xs={12}>
+            {/* <Grid container> */}
+            {!hostPortal && (
+              <Text className={classes.capitalize} variant="h5">
+                {hostname.slice(0, hostname.lastIndexOf('.'))}{' '}
+              </Text>
+            )}
+            <Text
+              color={hostPortal ? 'regular' : 'gray'}
+              variant={hostPortal ? 'h5' : 'subtitle1'}>
+              {hostPortal ? HOST_PORTAL_TITLE : ORGANIZATION_PORTAL_TITLE}
             </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()}>Login</Button>
-          </CardActions>
-        </form>
-      </Card>
+          </Grid>
+          <Grid item xs={12}>
+            <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 className={classes.cardContent}>
+                  <Text className={classes.formTitle} variant="h5">
+                    {`Log in to ${
+                      hostPortal
+                        ? 'host'
+                        : hostname.slice(0, hostname.lastIndexOf('.'))
+                    } user account`}
+                  </Text>
+                  {error}
+                  <AltFormField disableGutters label={'Email'}>
+                    <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
+                    skin="comet"
+                    className={classes.submitButtom}
+                    onClick={() => this.form.submit()}>
+                    Login
+                  </Button>
+                </CardActions>
+              </form>
+            </Card>
+          </Grid>
+        </Grid>
+      </Grid>
     );
   }
 }

diff --git a/fbcnms-packages/fbcnms-ui/components/design-system/FormField/FormField.js b/fbcnms-packages/fbcnms-ui/components/design-system/FormField/FormField.js
@@ -59,7 +59,11 @@ const useStyles = makeStyles(() => ({
     marginLeft: '8px',
   },
   label: {
-    fontSize: '16px',
+    fontSize: '14px',
+    fontFamily: 'Inter',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    lineHeight: '20px',
   },
   children: {
     padding: '8px 0',