Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Aug 2, 2022
+153 −66
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 13 additions & 2 deletions nms/app/components/FormField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,13 @@ const useStyles = makeStyles<Theme>(theme => ({
fontWeight: 400,
marginLeft: '8px',
},
label: {
fontSize: '14px',
fontFamily: 'Inter',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is that fontFamily about?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I looked a bit around and this is indeed a standard font that we use.
Although we typically use fontFamily: '"Inter", sans-serif',

This changes all labels across the app, but it does look better and it consistent with outer places so I'm fine with this change.

fontStyle: 'normal',
fontWeight: 500,
lineHeight: '20px',
},
secondaryHeading: {
flexBasis: '66.66%',
},
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -115,9 +123,12 @@ export default function FormField(props: Props) {
export function AltFormField(props: Props) {
const classes = useStyles();
return (
HannaFar marked this conversation as resolved.
Show resolved Hide resolved
<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
Expand Down
3 changes: 2 additions & 1 deletion nms/app/e2e/LoginUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
2 changes: 2 additions & 0 deletions nms/app/login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -39,6 +40,7 @@ ReactDOM.render(
<AppContextProvider>
<BrowserRouter>
<ThemeProvider theme={defaultTheme}>
<CssBaseline />
<LoginWrapper />
</ThemeProvider>
</BrowserRouter>
Expand Down
199 changes: 136 additions & 63 deletions nms/app/views/login/LoginForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
HannaFar marked this conversation as resolved.
Show resolved Hide resolved
},
login: {
marginTop: '10%',
},
title: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be sufficient
Screenshot 2022-07-26 at 10 13 38

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it was when I used the Grid component but now I need to keep most of it

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, this is because the title and subtitle are spans :|

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;

Expand All @@ -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;

Expand All @@ -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
HannaFar marked this conversation as resolved.
Show resolved Hide resolved
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>
);
}
}
Expand Down