Skip to content

Commit

Permalink
Fix styling in Dialog boxes for auth #2217, add styled components (#2218
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@fragm3 @akshatnitd
fragm3 authored and akshatnitd committed Jun 9, 2019
1 parent 2b33941 commit 05c3db3
Show file tree
Hide file tree
Showing 8 changed files with 242 additions and 395 deletions.
51 changes: 51 additions & 0 deletions src/components/Auth/AuthStyles.js
View file
@@ -0,0 +1,51 @@
import styled, { css } from 'styled-components';
import _PasswordField from 'material-ui-password-field';
import _OutlinedInput from '@material-ui/core/OutlinedInput';
import _Button from '@material-ui/core/Button';

export const breakPointStyle = css`
@media (max-width: 442px) {
width: 100%;
}
`;

export const responsiveInputStyle = css`
width: 17rem;
height: 2.1rem;
${breakPointStyle};
`;

export const PasswordField = styled(_PasswordField)`
${responsiveInputStyle};
border-radius: 4px;
border: 1px solid #ced4da;
padding: 0px 0.625rem;
margin-top: 0.625rem;
`;

export const OutlinedInput = styled(_OutlinedInput)`
${responsiveInputStyle};
`;

export const Button = styled(_Button)`
width: 17rem;
margin: 0.625rem auto;
${breakPointStyle};
`;

export const StyledLink = styled.span`
color: #365899;
cursor: pointer;
font-size: 0.75rem;
:hover {
color: #365899;
text-decoration: underline;
}
`;

export const LinkContainer = styled.div`
display: flex;
justify-content: space-evenly;
padding: 0 1.25rem;
margin-top: 0.625rem;
`;
27 changes: 9 additions & 18 deletions src/components/Auth/ForgotPassword/ForgotPassword.react.js
View file
Expand Up @@ -3,13 +3,12 @@ import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import CircularProgress from '@material-ui/core/CircularProgress';
import Button from '@material-ui/core/Button';
import { Button, OutlinedInput } from '../AuthStyles';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import CloseButton from '../../shared/CloseButton';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import Translate from '../../Translate/Translate.react';
import appActions from '../../../redux/actions/app';
import uiActions from '../../../redux/actions/ui';
Expand All @@ -23,7 +22,6 @@ class ForgotPassword extends Component {

constructor(props) {
super(props);

this.state = {
email: '',
emailErrorMessage: '',
Expand Down Expand Up @@ -110,40 +108,33 @@ class ForgotPassword extends Component {
<React.Fragment>
<DialogTitle>
<Translate text="Forgot Password ?" />
<CloseButton onClick={this.handleDialogClose} />
</DialogTitle>
<div style={{ margin: '1.1rem 0' }}>
<DialogContent>
<FormControl error={emailErrorMessage !== ''}>
<InputLabel>Email</InputLabel>
<Input
<OutlinedInput
name="email"
value={email}
onChange={this.handleTextFieldChange}
aria-describedby="email-error-text"
style={{ width: '256px' }}
placeholder="Email"
onKeyUp={this.onEnterKey}
autofocus={true}
autoFocus={true}
/>
<FormHelperText error={emailErrorMessage !== ''}>
{emailErrorMessage}
</FormHelperText>
</FormControl>
</div>
<div style={{ margin: '10px 0' }}>
{/* Reset Button */}
<Button
onClick={this.handleSubmit}
color="primary"
variant="contained"
style={{
width: '200px',
margin: '10px auto',
display: 'block',
}}
disabled={!isValid || loading}
>
{loading ? <CircularProgress size={24} /> : 'Reset'}
</Button>
</div>
<CloseButton onClick={this.handleDialogClose} />
</DialogContent>
</React.Fragment>
);
}
Expand Down
49 changes: 0 additions & 49 deletions src/components/Auth/Login/Login.css
View file

This file was deleted.

123 changes: 48 additions & 75 deletions src/components/Auth/Login/Login.react.js
View file
Expand Up @@ -11,40 +11,27 @@ import uiActions from '../../../redux/actions/ui';

// Components
import FormHelperText from '@material-ui/core/FormHelperText';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import FormControl from '@material-ui/core/FormControl';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import Button from '@material-ui/core/Button';
import CircularProgress from '@material-ui/core/CircularProgress';
import PasswordField from 'material-ui-password-field';
import CloseButton from '../../shared/CloseButton';
import Translate from '../../Translate/Translate.react';
import { isProduction } from '../../../utils/helperFunctions';
import { isEmail } from '../../../utils';
import { createMessagePairArray } from '../../../utils/formatMessage';

// Static assets
import './Login.css';
import {
PasswordField,
OutlinedInput,
Button,
StyledLink,
LinkContainer,
} from '../AuthStyles';

const cookieDomain = isProduction() ? '.susi.ai' : '';

const cookies = new Cookies();

const styles = {
fieldStyle: {
height: '35px',
borderRadius: 4,
border: '1px solid #ced4da',
fontSize: 16,
padding: '0px 10px',
width: '250px',
marginTop: '10px',
},
inputStyle: {
height: '35px',
marginBottom: '10px',
},
};

class Login extends Component {
static propTypes = {
handleSignUp: PropTypes.func,
Expand Down Expand Up @@ -214,83 +201,69 @@ class Login extends Component {
loading,
} = this.state;
const { actions } = this.props;
const { fieldStyle } = styles;

const isValid =
email && !emailErrorMessage && password && !passwordErrorMessage;

return (
<React.Fragment>
<div className="login-form">
<h3>
<Translate text="Log into SUSI" />
</h3>
<div>
<FormControl error={emailErrorMessage !== ''}>
<OutlinedInput
labelWidth={0}
name="email"
value={email}
onChange={this.handleTextFieldChange}
aria-describedby="email-error-text"
style={{ width: '17rem', height: '2.1rem' }}
placeholder="Email"
onKeyUp={this.onEnterKey}
autoFocus={true}
/>
<FormHelperText error={emailErrorMessage !== ''}>
{emailErrorMessage}
</FormHelperText>
</FormControl>
</div>
<div>
<FormControl error={passwordErrorMessage !== ''}>
<PasswordField
name="password"
style={fieldStyle}
value={password}
placeholder="Password"
onChange={this.handleTextFieldChange}
onKeyUp={this.onEnterKey}
/>
<FormHelperText error={passwordErrorMessage !== ''}>
{passwordErrorMessage}
</FormHelperText>
</FormControl>
</div>
<DialogTitle>
<Translate text="Log into SUSI" />
<CloseButton onClick={this.handleDialogClose} />
</DialogTitle>
<DialogContent>
<FormControl error={emailErrorMessage !== ''}>
<OutlinedInput
labelWidth={0}
name="email"
value={email}
onChange={this.handleTextFieldChange}
aria-describedby="email-error-text"
placeholder="Email"
onKeyUp={this.onEnterKey}
autoFocus={true}
/>
<FormHelperText error={emailErrorMessage !== ''}>
{emailErrorMessage}
</FormHelperText>
</FormControl>
<FormControl error={passwordErrorMessage !== ''}>
<PasswordField
name="password"
value={password}
placeholder="Password"
onChange={this.handleTextFieldChange}
onKeyUp={this.onEnterKey}
/>
<FormHelperText error={passwordErrorMessage !== ''}>
{passwordErrorMessage}
</FormHelperText>
</FormControl>
<Button
onClick={this.handleSubmit}
variant="contained"
color="primary"
disabled={!isValid || loading}
style={{
width: '275px',
margin: '10px auto',
display: 'block',
}}
>
{loading ? (
<CircularProgress size={24} />
) : (
<Translate text="Log In" />
)}
</Button>
<div className="login-links-section">
<span
className="forgot-password"
<LinkContainer>
<StyledLink
onClick={() => actions.openModal({ modalType: 'forgotPassword' })}
>
<Translate text="Forgot Password?" />
</span>
<span
className="sign-up"
</StyledLink>
<StyledLink
onClick={() => actions.openModal({ modalType: 'signUp' })}
>
<Translate text="Sign up for SUSI" />
</span>
</div>
</div>
<CloseButton onClick={this.handleDialogClose} />
</StyledLink>
</LinkContainer>
</DialogContent>
</React.Fragment>
);
}
Expand Down

0 comments on commit 05c3db3

Please sign in to comment.