Skip to content

Commit c90b7dd

Browse files
ujjavaldesai07ujjavaldesai07
committed
Refactored login page with material ui components
1 parent fc21673 commit c90b7dd

File tree

16 files changed

+190
-142
lines changed

16 files changed

+190
-142
lines changed

‎client/src/actions/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const setPaymentInfo = payload => {
4646
export const signIn = formValues => async (dispatch) => {
4747
log.info(`[ACTION]: signIn API is invoked formValues = ${formValues}`)
4848

49-
const hash = Base64.encode(`${formValues.Username}:${formValues.Password}`);
49+
const hash = Base64.encode(`${formValues.username}:${formValues.password}`);
5050
authServiceAPI.defaults.headers.common['Authorization'] = `Basic ${hash}`
5151
authServiceAPI.defaults.timeout = 5000;
5252
const response = await authServiceAPI.post('/authenticate').catch(err => {
@@ -58,7 +58,7 @@ export const signIn = formValues => async (dispatch) => {
5858
if (response.data.jwt) {
5959
log.info(`[ACTION]: dispatch HANDLE_SIGN_IN response.data.jwt = ${response.data.jwt}`)
6060
dispatch({type: HANDLE_SIGN_IN, payload: response.data.jwt});
61-
Cookies.set(TOKEN_ID_COOKIE, response.data.jwt, {expires: 7});
61+
Cookies.set(TOKEN_ID_COOKIE, response.data.jwt, {expires: 2});
6262
history.push('/');
6363
} else {
6464
log.info(`[ACTION]: dispatch HANDLE_SIGN_IN_ERROR response.data.error = ${response.data.error}`)
@@ -99,7 +99,7 @@ export const signUp = formValues => async dispatch => {
9999
if (response) {
100100
if (response.data.account_creation_status === 'success') {
101101
log.info(`[ACTION]: dispatch HANDLE_SIGN_UP account_creation_status = ${response.data.account_creation_status}.`)
102-
history.push("/login");
102+
history.push("/signin");
103103
} else {
104104
console.log('response.data.error_msg = ' + response.data.error_msg);
105105
log.info(`[ACTION]: dispatch HANDLE_SIGN_UP_ERROR response.data.error_msg = ${response.data.error_msg}.`)

‎client/src/actions/types.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
export const HANDLE_SIGN_IN= "HANDLE_SIGN_IN";
44
export const HANDLE_SIGN_OUT= "HANDLE_SIGN_OUT";
55
export const HANDLE_SIGN_IN_ERROR= "HANDLE_SIGN_IN_ERROR";
6-
export const HANDLE_SIGN_IN_RESET= "HANDLE_SIGN_IN_RESET";
76
export const HANDLE_SIGN_UP_ERROR= "HANDLE_SIGN_UP_ERROR";
87
export const HANDLE_SIGN_UP_RESET= "HANDLE_SIGN_UP_RESET";
98
export const HANDLE_TAB_HOVER_EVENT = "HANDLE_TAB_HOVER_EVENT";

‎client/src/components/app.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import log from "loglevel"
55
import NavBar from "./routes/navbar/navBar";
66
import {TabPanelList} from "./routes/navbar/tabPanelList";
77
import Home from "./routes/home/home";
8-
import Login from "./routes/login";
8+
import SignIn from "./routes/signin/signIn";
99
import SignUp from "./routes/signup/signUp";
1010
import Product from "./routes/product/product";
1111
import ProductDetail from "./routes/detail/productDetails";
@@ -29,7 +29,7 @@ const App = () => {
2929
<TabPanelList/>
3030
{serverError ? null: <Switch>
3131
<Route path="/" exact component={Home}/>
32-
<Route path="/login" exact component={Login}/>
32+
<Route path="/signin" exact component={SignIn}/>
3333
<Route path="/signup" exact component={SignUp}/>
3434
<Route path="/shopping-bag" exact component={ShoppingBag}/>
3535
<Route path="/checkout" exact component={Checkout}/>

‎client/src/components/routes/login.js

Lines changed: 0 additions & 63 deletions
This file was deleted.

‎client/src/components/routes/signin/signIn.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from "react";
2+
import SignInForm from "./signInForm"
3+
import {Grid, Typography} from "@material-ui/core";
4+
import log from "loglevel";
5+
import {StyledWebButton} from "../../../styles/semanticUI/customStyles";
6+
import {Divider, Icon} from "semantic-ui-react";
7+
import {Link} from "react-router-dom";
8+
9+
const SignIn = () => {
10+
11+
log.info(`[SignIn]: Rendering SignIn Component`)
12+
13+
return (
14+
<Grid container justify="center" style={{paddingTop: "2rem"}}>
15+
<Grid item container xs={3} direction="column">
16+
17+
<Grid item style={{alignSelf: "center", paddingBottom: "1rem"}}>
18+
<h1 style={{fontSize: "2.5rem"}}>Sign In</h1>
19+
</Grid>
20+
21+
<SignInForm/>
22+
23+
<Grid container justify="center">
24+
<Grid item style={{width: "100%", padding: "1rem 0"}}>
25+
<Divider horizontal>Or</Divider>
26+
</Grid>
27+
</Grid>
28+
29+
<Grid container justify="center">
30+
<Grid item xs={5}>
31+
<StyledWebButton color='google plus'>
32+
<Icon name='google plus'/> Google
33+
</StyledWebButton>
34+
</Grid>
35+
</Grid>
36+
37+
<Grid container justify="center">
38+
<Typography style={{padding: '2rem 0', fontWeight: 'bold'}} variant="subtitle2">
39+
Not on Shoppers yet?
40+
<Link to="/signup"> Sign up</Link>
41+
</Typography>
42+
</Grid>
43+
44+
</Grid>
45+
</Grid>
46+
)
47+
}
48+
49+
export default SignIn;

‎client/src/components/routes/signin/signInForm.js

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import React, {Component} from 'react';
2+
import log from 'loglevel';
3+
import {Button, Grid} from "@material-ui/core";
4+
import {Field, reduxForm} from "redux-form";
5+
import {connect} from "react-redux";
6+
import {signIn} from "../../../actions"
7+
import AccountCircle from '@material-ui/icons/AccountCircle';
8+
import LockIcon from '@material-ui/icons/Lock';
9+
import {renderReduxTextField} from "../../ui/reduxTextField";
10+
11+
class SignInForm extends Component {
12+
13+
handleSubmit = event => {
14+
event.preventDefault();
15+
this.props.signIn(this.props.signInFormStore.values)
16+
}
17+
18+
render() {
19+
const {submitting, pristine} = this.props;
20+
21+
const renderFormTextField = (label, name, icon, type) => (
22+
<Grid container>
23+
<Field
24+
name={name}
25+
component={renderReduxTextField}
26+
label={label}
27+
props={{icon, type}}
28+
/>
29+
</Grid>
30+
)
31+
32+
const renderErrorMsg = errMsg => {
33+
if (!errMsg) {
34+
return null
35+
}
36+
return (
37+
<Grid item container justify="center" style={{
38+
padding: "0.5rem 0", color: "red",
39+
fontSize: "1rem", fontWeight: "bold"
40+
}}>
41+
{`Error: ${errMsg}`}
42+
</Grid>
43+
)
44+
}
45+
46+
log.info(`[SignUpForm] Rendering SignUpForm Component...`)
47+
48+
return (
49+
<Grid container>
50+
<form onSubmit={this.handleSubmit}
51+
style={{width: "inherit"}}>
52+
53+
{renderFormTextField("Username", "username", <AccountCircle/>, "text")}
54+
{renderFormTextField("Password", "password", <LockIcon/>, "password")}
55+
56+
{renderErrorMsg(this.props.signInReducer.errorMsg)}
57+
58+
<Grid container justify="center" style={{paddingTop: "2rem"}}>
59+
<Grid item sm={5}>
60+
<Button variant="contained"
61+
size="large"
62+
style={{
63+
width: "100%", backgroundColor: "teal",
64+
color: "white", fontSize: "1rem", fontWeight: "bold"
65+
}}
66+
disabled={submitting || pristine}
67+
type="submit">
68+
Sign In
69+
</Button>
70+
</Grid>
71+
</Grid>
72+
73+
</form>
74+
</Grid>
75+
)
76+
}
77+
}
78+
79+
const validate = (formValues) => {
80+
const errors = {};
81+
const requiredFields = [
82+
'username',
83+
'password',
84+
];
85+
86+
requiredFields.forEach(field => {
87+
if (!formValues[field]) {
88+
errors[field] = 'Required';
89+
}
90+
});
91+
92+
return errors;
93+
}
94+
95+
const mapStateToProps = (state) => {
96+
return ({
97+
signInFormStore: state.form.signInForm ?
98+
state.form.signInForm : null,
99+
signInReducer: state.signInReducer
100+
})
101+
}
102+
103+
const reduxWrapperForm = reduxForm({
104+
form: 'signInForm',
105+
validate,
106+
})(SignInForm);
107+
108+
export default connect(mapStateToProps, {signIn})(reduxWrapperForm);

‎client/src/components/routes/signup/signUp.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React from "react";
22
import SignUpForm from "./signUpForm"
3-
import {connect} from 'react-redux';
4-
import {signUp} from "../../../actions";
53
import {Grid} from "@material-ui/core";
64
import log from "loglevel";
75

@@ -21,4 +19,4 @@ const SignUp = () => {
2119
)
2220
}
2321

24-
export default connect(null, {signUp})(SignUp);
22+
export default SignUp;

‎client/src/reducers/screens/commonScreenReducer.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import {
1919
HANDLE_SIGN_IN_ERROR,
2020
HANDLE_SIGN_OUT,
2121
HANDLE_SIGN_UP_ERROR,
22-
HANDLE_SIGN_IN_RESET,
2322
HANDLE_SIGN_UP_RESET
2423
} from "../../actions/types";
2524
import log from "loglevel";
@@ -39,8 +38,6 @@ export const signInReducer = (state = {isSignedIn: null}, action) => {
3938
return {...state, isSignedIn: false, errorMsg: action.payload};
4039
case HANDLE_SIGN_OUT:
4140
return _.omit(state, 'tokenId', 'errorMsg');
42-
case HANDLE_SIGN_IN_RESET:
43-
return {isSignedIn: null}
4441
default:
4542
return state;
4643
}

‎client/src/styles/semanticUI/customStyles.js

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,8 @@ export const StyledDimmer = styled(Dimmer)({
1313
});
1414

1515
export const StyledWebButton = styled(Button)({
16-
width: '10em !important'
17-
});
18-
19-
export const StyledLoginScreenGrid = styled(Grid)({
20-
paddingTop: '100px !important'
16+
width: '100% !important',
17+
height: '40px !important'
2118
});
2219

2320
export const StyledLargeDropdown = styled(Dropdown)({

‎server/authentication-service/src/main/java/com/ujjaval/ecommerce/authenticationservice/config/SecurityConfigurer.java

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,6 @@
1313
import org.springframework.security.crypto.password.NoOpPasswordEncoder;
1414
import org.springframework.security.crypto.password.PasswordEncoder;
1515
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
16-
import org.springframework.web.cors.CorsConfiguration;
17-
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
18-
import org.springframework.web.servlet.config.annotation.CorsRegistry;
19-
20-
import java.util.Arrays;
2116

2217
@EnableWebSecurity
2318
public class SecurityConfigurer extends WebSecurityConfigurerAdapter {
@@ -46,7 +41,7 @@ public AuthenticationManager authenticationManagerBean() throws Exception {
4641
@Override
4742
protected void configure(HttpSecurity httpSecurity) throws Exception {
4843
httpSecurity.csrf().disable()
49-
.authorizeRequests().antMatchers("/authenticate", "/signup", "/resources1", "/resources2").permitAll().
44+
.authorizeRequests().antMatchers("/authenticate", "/signup").permitAll().
5045
anyRequest().authenticated().and().
5146
exceptionHandling().and().sessionManagement()
5247
.sessionCreationPolicy(SessionCreationPolicy.STATELESS);

0 commit comments

Comments
 (0)