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

Signed-off-by: HannaFar <[email protected]>
magma · Mar 7, 2022 · 8e9b382 · 8e9b382
1 parent bb38d73
commit 8e9b382
Showing 1 changed file with 76 additions and 36 deletions.
diff --git a/fbcnms-packages/fbcnms-ui/components/auth/LoginForm.js b/fbcnms-packages/fbcnms-ui/components/auth/LoginForm.js
@@ -15,30 +15,47 @@ 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 = {
   card: {
     maxWidth: '400px',
-    margin: '10% auto 0',
+    margin: '12px 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',
+  },
+  formTitle: {
+    marginBottom: '16px',
+    textAlign: 'left',
     display: 'block',
+    fontSize: '20px',
+  },
+  submitButtom: {
+    width: '100%',
   },
 };
 
@@ -65,7 +82,6 @@ class LoginForm extends React.Component<Props, State> {
 
     const params = new URLSearchParams(window.location.search);
     const to = params.get('to');
-
     if (ssoEnabled) {
       return (
         <Card raised={true} className={classes.card}>
@@ -88,37 +104,61 @@ class LoginForm extends React.Component<Props, State> {
     }
 
     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}
-            </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 className={classes.login}>
+        <Grid container>
+          <Grid className={classes.title} item xs={12}>
+            <Text variant="h5">Magma Host Portal</Text>
+          </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">
+                    {this.props.title}
+                  </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>
     );
   }
 }