From 002adfdf7c3fb045631ca30fbced846ad6afbd65 Mon Sep 17 00:00:00 2001
From: leilenah <leilenah.mamea@gmail.com>
Date: Fri, 23 Dec 2022 16:26:40 -0800
Subject: [PATCH] Re-style login / sign up forms.

---
 frontend/src/CodalabApp.js                |   3 +-
 frontend/src/components/Login.js          | 143 ++++++-----
 frontend/src/components/SignUp.js         | 282 +++++++++++-----------
 frontend/src/components/SignUpSuccess.jsx |  52 ++++
 frontend/src/css/imports.scss             |   3 -
 frontend/src/theme.js                     |   3 +
 6 files changed, 280 insertions(+), 206 deletions(-)
 create mode 100644 frontend/src/components/SignUpSuccess.jsx

diff --git a/frontend/src/CodalabApp.js b/frontend/src/CodalabApp.js
index cd4b1cc10..0d62d81ea 100644
--- a/frontend/src/CodalabApp.js
+++ b/frontend/src/CodalabApp.js
@@ -10,7 +10,8 @@ import UserInfo from './components/UserInfo';
 import NavBar from './components/NavBar';
 import Footer from './components/Footer';
 import Login from './components/Login';
-import { SignUp, SignUpSuccess } from './components/SignUp';
+import SignUp from './components/SignUp';
+import SignUpSuccess from './components/SignUpSuccess';
 import { ChangeEmail, ChangeEmailSuccess } from './components/ChangeEmail';
 import VerifySuccess from './components/VerifySuccess';
 import VerifyError from './components/VerifyError';
diff --git a/frontend/src/components/Login.js b/frontend/src/components/Login.js
index 7cfd2b302..e41d7d17a 100644
--- a/frontend/src/components/Login.js
+++ b/frontend/src/components/Login.js
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import Immutable from 'seamless-immutable';
 import { Redirect, NavLink } from 'react-router-dom';
-import SubHeader from './SubHeader';
-import ContentWrapper from './ContentWrapper';
+import { withStyles } from '@material-ui/core/styles';
+import { Typography } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
 import queryString from 'query-string';
 
 class Login extends React.Component {
@@ -35,73 +36,91 @@ class Login extends React.Component {
     render() {
         const { error } = queryString.parse(this.props.location.search);
         const pathname = this.props.location.pathname;
-
+        const classes = this.props.classes;
         let { redirectToReferrer, from } = this.state;
 
         if (redirectToReferrer) return <Redirect to={from} />;
 
         return (
-            <React.Fragment>
-                <SubHeader title='Sign In' />
-                <ContentWrapper>
-                    {from !== '/' && <p>You must log in to view the page at {from}</p>}
-                    {error && <div className='alert alert-error'>{error}</div>}
-                    <form className='login' method='POST' action='/rest/account/login'>
-                        <div className='form-group'>
-                            <label htmlFor='id_login'>Login:</label>
-                            <input
-                                id='id_login'
-                                className='form-control'
-                                name='username'
-                                placeholder='Username or e-mail'
-                                type='text'
-                                autoFocus={true}
-                                autoComplete='off'
-                                value={this.state.username}
-                                onChange={this.handleInputChange}
-                            />
-                        </div>
-                        <div className='form-group'>
-                            <label htmlFor='id_password'>Password:</label>
-                            <input
-                                id='id_password'
-                                className='form-control'
-                                name='password'
-                                placeholder='Password'
-                                type='password'
-                                autoComplete='off'
-                                value={this.state.password}
-                                onChange={this.handleInputChange}
-                            />
-                        </div>
-                        <input type='hidden' name='success_uri' value={from} />
-                        <input type='hidden' name='error_uri' value={pathname} />
-                        <button className='btn btn-primary' type='submit'>
-                            Sign In
-                        </button>
-                        {/* the above is almost certainly wrong, not sure how to fix*/}
-                    </form>
-                    <p>
-                        <NavLink to='/account/signup'>Don't have an account? Sign up!</NavLink>
-                    </p>
-                    <p>
-                        <NavLink to='/account/reset'>Forgot your password?</NavLink>
-                    </p>
-                    <button
-                        className='link'
-                        onClick={(event) => {
-                            alert(
-                                'Please log in and navigate to your dashboard to resend confirmation email.',
-                            );
-                            event.preventDefault();
-                        }}
+            <div className={classes.loginContainer}>
+                <Typography variant='h5' gutterBottom>
+                    Login
+                </Typography>
+                {error && <div className='alert alert-error'>{error}</div>}
+                <form className='login' method='POST' action='/rest/account/login'>
+                    <div className='form-group'>
+                        <label htmlFor='id_login'>Username</label>
+                        <input
+                            id='id_login'
+                            className='form-control'
+                            name='username'
+                            placeholder='Username or e-mail'
+                            type='text'
+                            autoFocus={true}
+                            autoComplete='off'
+                            value={this.state.username}
+                            onChange={this.handleInputChange}
+                        />
+                    </div>
+                    <div className='form-group'>
+                        <label htmlFor='id_password'>Password</label>
+                        <input
+                            id='id_password'
+                            className='form-control'
+                            name='password'
+                            placeholder='Password'
+                            type='password'
+                            autoComplete='off'
+                            value={this.state.password}
+                            onChange={this.handleInputChange}
+                        />
+                    </div>
+                    <input type='hidden' name='success_uri' value={from} />
+                    <input type='hidden' name='error_uri' value={pathname} />
+                    <Button
+                        classes={{ root: classes.loginBtn }}
+                        variant='contained'
+                        color='primary'
+                        type='submit'
                     >
-                        Resend confirmation email
-                    </button>
-                </ContentWrapper>
-            </React.Fragment>
+                        Sign In
+                    </Button>
+                </form>
+                <p>
+                    <NavLink to='/account/signup'>Don't have an account? Sign up!</NavLink>
+                </p>
+                <p>
+                    <NavLink to='/account/reset'>Forgot your password?</NavLink>
+                </p>
+                <button
+                    className='link'
+                    onClick={(event) => {
+                        alert(
+                            'Please log in and navigate to your dashboard to resend confirmation email.',
+                        );
+                        event.preventDefault();
+                    }}
+                >
+                    Resend confirmation email
+                </button>
+            </div>
         );
     }
 }
 
-export default Login;
+const styles = (theme) => ({
+    loginContainer: {
+        maxWidth: 315,
+        margin: '50px auto',
+        padding: '22px 30px 30px',
+        borderRadius: 12,
+        boxShadow: theme.boxShadow.card,
+        backgroundColor: 'white',
+    },
+    loginBtn: {
+        marginBottom: 20,
+        marginTop: 5,
+    },
+});
+
+export default withStyles(styles)(Login);
diff --git a/frontend/src/components/SignUp.js b/frontend/src/components/SignUp.js
index cfa5a50cc..b4abf3f9d 100644
--- a/frontend/src/components/SignUp.js
+++ b/frontend/src/components/SignUp.js
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
-import SubHeader from './SubHeader';
-import ContentWrapper from './ContentWrapper';
-import queryString from 'query-string';
 import ReCAPTCHA from 'react-google-recaptcha';
+import queryString from 'query-string';
+import { withStyles } from '@material-ui/core/styles';
+import { Typography } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
 
 // Set global properties used by reCaptcha
 // See: https://www.npmjs.com/package/react-google-recaptcha#global-properties-used-by-recaptcha
@@ -12,24 +13,7 @@ window.recaptchaOptions = {
     useRecaptchaNet: true,
 };
 
-export const SignUpSuccess = (props) => {
-    const { email } = queryString.parse(props.location.search);
-    return (
-        <React.Fragment>
-            <SubHeader title='Signup Success' />
-            <ContentWrapper>
-                <div className='row'>
-                    <div className='col-md-6'>
-                        <h4>Thank you for signing up for a CodaLab account!</h4>
-                        <p>A link to verify your account has been sent to {email}.</p>
-                    </div>
-                </div>
-            </ContentWrapper>
-        </React.Fragment>
-    );
-};
-
-export class SignUp extends React.Component {
+class SignUp extends React.Component {
     state = {
         form: {},
         captchaPassed: false,
@@ -90,127 +74,145 @@ export class SignUp extends React.Component {
 
     render() {
         const { error } = queryString.parse(this.props.location.search);
+        const classes = this.props.classes;
         return (
-            <React.Fragment>
-                <SubHeader title='Sign Up' />
-                <ContentWrapper>
-                    <p>
-                        Already have an account? Then please{' '}
-                        <NavLink to='/account/login'>sign in</NavLink>.
-                    </p>
-                    <form
-                        className='signup'
-                        id='signup_form'
-                        method='post'
-                        action='/rest/account/signup'
-                        onSubmit={this.onSubmit}
-                    >
-                        {error && <div className='alert alert-error'>{error}</div>}
-                        <div className='form-group'>
-                            <label htmlFor='id_email'>Email:</label>
-                            <input
-                                id='id_email'
-                                className='form-control'
-                                name='email'
-                                placeholder='Email'
-                                type='email'
-                                value={this.state.form.email}
-                                required
-                                autoFocus
-                                onChange={this.handleInputChange}
-                            />
-                        </div>
-                        <div className='form-group'>
-                            <label htmlFor='id_login'>Username:</label>
-                            <input
-                                id='id_login'
-                                className='form-control'
-                                name='username'
-                                placeholder='Username'
-                                type='text'
-                                value={this.state.form.username}
-                                required
-                                onChange={this.handleInputChange}
-                            />
-                        </div>
-                        <div className='form-group'>
-                            <label htmlFor='id_login'>First Name:</label>
-                            <input
-                                id='id_firstname'
-                                className='form-control'
-                                name='first_name'
-                                placeholder='First Name'
-                                type='text'
-                                value={this.state.form.first_name}
-                                required
-                                onChange={this.handleInputChange}
-                            />
-                        </div>
-                        <div className='form-group'>
-                            <label htmlFor='id_login'>Last Name:</label>
-                            <input
-                                id='id_lastname'
-                                className='form-control'
-                                name='last_name'
-                                placeholder='Last Name'
-                                type='text'
-                                value={this.state.form.last_name}
-                                required
-                                onChange={this.handleInputChange}
-                            />
-                        </div>
-                        <div className='form-group'>
-                            <label htmlFor='id_login'>Affiliation:</label>
-                            <input
-                                id='id_affiliation'
-                                className='form-control'
-                                name='affiliation'
-                                placeholder='Affiliation'
-                                type='text'
-                                value={this.state.form.affiliation}
-                                onChange={this.handleInputChange}
-                            />
-                        </div>
-                        <div className='form-group'>
-                            <label htmlFor='id_password'>Password:</label>
-                            <input
-                                id='id_password'
-                                className='form-control'
-                                name='password'
-                                placeholder='Password'
-                                type='password'
-                                value={this.state.form.password}
-                                required
-                                onChange={this.handleInputChange}
-                            />
-                        </div>
-                        <div className='form-group'>
-                            <label htmlFor='id_password_confirm'>Confirm Password:</label>
-                            <input
-                                id='id_password_confirm'
-                                className='form-control'
-                                name='confirm_password'
-                                placeholder='Password again'
-                                type='password'
-                                value={this.state.form.confirm_password}
-                                required
-                                onChange={this.handleInputChange}
-                            />
-                        </div>
-                        <ReCAPTCHA
-                            ref={this.recaptchaRef}
-                            sitekey={window.env.REACT_APP_CODALAB_RECAPTCHA_SITE_KEY}
-                            onChange={() => {
-                                this.setState({ captchaPassed: true });
-                            }}
-                            style={{ marginBottom: 10 }}
+            <div className={classes.signUpContainer}>
+                <p>
+                    Already have an account? <NavLink to='/account/login'>Sign In</NavLink>.
+                </p>
+                <Typography variant='h5' gutterBottom>
+                    Sign Up
+                </Typography>
+                <form
+                    className='signup'
+                    id='signup_form'
+                    method='post'
+                    action='/rest/account/signup'
+                    onSubmit={this.onSubmit}
+                >
+                    {error && <div className='alert alert-error'>{error}</div>}
+                    <div className='form-group'>
+                        <label htmlFor='id_email'>Email</label>
+                        <input
+                            id='id_email'
+                            className='form-control'
+                            name='email'
+                            placeholder='Email'
+                            type='email'
+                            value={this.state.form.email}
+                            required
+                            autoFocus
+                            onChange={this.handleInputChange}
+                        />
+                    </div>
+                    <div className='form-group'>
+                        <label htmlFor='id_login'>Username</label>
+                        <input
+                            id='id_login'
+                            className='form-control'
+                            name='username'
+                            placeholder='Username'
+                            type='text'
+                            value={this.state.form.username}
+                            required
+                            onChange={this.handleInputChange}
+                        />
+                    </div>
+                    <div className='form-group'>
+                        <label htmlFor='id_login'>First Name</label>
+                        <input
+                            id='id_firstname'
+                            className='form-control'
+                            name='first_name'
+                            placeholder='First Name'
+                            type='text'
+                            value={this.state.form.first_name}
+                            required
+                            onChange={this.handleInputChange}
+                        />
+                    </div>
+                    <div className='form-group'>
+                        <label htmlFor='id_login'>Last Name</label>
+                        <input
+                            id='id_lastname'
+                            className='form-control'
+                            name='last_name'
+                            placeholder='Last Name'
+                            type='text'
+                            value={this.state.form.last_name}
+                            required
+                            onChange={this.handleInputChange}
+                        />
+                    </div>
+                    <div className='form-group'>
+                        <label htmlFor='id_login'>Affiliation</label>
+                        <input
+                            id='id_affiliation'
+                            className='form-control'
+                            name='affiliation'
+                            placeholder='Affiliation'
+                            type='text'
+                            value={this.state.form.affiliation}
+                            onChange={this.handleInputChange}
                         />
-                        <button type='submit' disabled={!this.state.captchaPassed}>
-                            Sign Up &raquo;
-                        </button>
-                    </form>
-                </ContentWrapper>
-            </React.Fragment>
+                    </div>
+                    <div className='form-group'>
+                        <label htmlFor='id_password'>Password</label>
+                        <input
+                            id='id_password'
+                            className='form-control'
+                            name='password'
+                            placeholder='Password'
+                            type='password'
+                            value={this.state.form.password}
+                            required
+                            onChange={this.handleInputChange}
+                        />
+                    </div>
+                    <div className='form-group'>
+                        <label htmlFor='id_password_confirm'>Confirm Password</label>
+                        <input
+                            id='id_password_confirm'
+                            className='form-control'
+                            name='confirm_password'
+                            placeholder='Password again'
+                            type='password'
+                            value={this.state.form.confirm_password}
+                            required
+                            onChange={this.handleInputChange}
+                        />
+                    </div>
+                    <ReCAPTCHA
+                        ref={this.recaptchaRef}
+                        sitekey={window.env.REACT_APP_CODALAB_RECAPTCHA_SITE_KEY}
+                        onChange={() => {
+                            this.setState({ captchaPassed: true });
+                        }}
+                        style={{ marginBottom: 15 }}
+                    />
+                    <Button
+                        disabled={!this.state.captchaPassed}
+                        variant='contained'
+                        color='primary'
+                        type='submit'
+                    >
+                        Sign Up
+                    </Button>
+                </form>
+            </div>
         );
     }
 }
+
+const styles = (theme) => ({
+    signUpContainer: {
+        maxWidth: 363,
+        margin: '50px auto',
+        padding: '22px 30px 30px',
+        borderRadius: 12,
+        boxShadow: theme.boxShadow.card,
+        backgroundColor: 'white',
+    },
+});
+
+export default withStyles(styles)(SignUp);
diff --git a/frontend/src/components/SignUpSuccess.jsx b/frontend/src/components/SignUpSuccess.jsx
new file mode 100644
index 000000000..7ec312de0
--- /dev/null
+++ b/frontend/src/components/SignUpSuccess.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import queryString from 'query-string';
+import { withStyles } from '@material-ui/core/styles';
+import { Typography } from '@material-ui/core';
+
+class SignUpSuccess extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const { email } = queryString.parse(this.props.location.search);
+        const classes = this.props.classes;
+        return (
+            <div className={classes.outterContainer}>
+                <div className={classes.innerContainer}>
+                    <div className={classes.tada}>🎉</div>
+                    <Typography variant='h5' gutterBottom>
+                        Thank you for signing up for a CodaLab account!
+                    </Typography>
+                    <Typography classes={{ root: classes.subtitle }} variant='subtitle1'>
+                        A link to verify your account has been sent to {email}.
+                    </Typography>
+                </div>
+            </div>
+        );
+    }
+}
+
+const styles = (theme) => ({
+    outterContainer: {
+        display: 'flex',
+        justifyContent: 'center',
+        marginTop: 50,
+    },
+    innerContainer: {
+        display: 'inline-block',
+        padding: '15px 30px 22px',
+        borderRadius: 12,
+        boxShadow: theme.boxShadow.card,
+        backgroundColor: 'white',
+        textAlign: 'center',
+    },
+    subtitle: {
+        color: theme.color.grey.darkest,
+    },
+    tada: {
+        fontSize: 72,
+    },
+});
+
+export default withStyles(styles)(SignUpSuccess);
diff --git a/frontend/src/css/imports.scss b/frontend/src/css/imports.scss
index e5f70063d..727ab23ca 100644
--- a/frontend/src/css/imports.scss
+++ b/frontend/src/css/imports.scss
@@ -842,7 +842,4 @@ b, strong {
   transition: all .1s ease-in-out;
   border-radius: 2px;
 }
-.login button{
-  margin-bottom: 15px;
-}
 @import "./overrides.scss";
diff --git a/frontend/src/theme.js b/frontend/src/theme.js
index 900d24bd2..19540f4f8 100644
--- a/frontend/src/theme.js
+++ b/frontend/src/theme.js
@@ -81,4 +81,7 @@ export default createMuiTheme({
             },
         },
     },
+    boxShadow: {
+        card: '0 2px 4px 0 rgba(138, 148, 159, 0.2)',
+    },
 });