Skip to content

validation / toggle submit button / display validation errors / basic… #2

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

Open
BlueEagle wants to merge 4 commits into
base: wei-peluso2
Choose a base branch
from
Open

validation / toggle submit button / display validation errors / basic… #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1e52284
validation / toggle submit button / display validation errors / basic…
BlueEagle Jun 23, 2020
abb2e17
login/register components styled
BlueEagle Jun 23, 2020
eca4c5d
Added placeholder text
BlueEagle Jun 23, 2020
bf4672b
wip
BlueEagle Jun 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
"redux-thunk": "^2.3.0",
"yup": "^0.29.1"
},
"scripts": {
"start": "react-scripts start",
Expand Down
3 changes: 3 additions & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
</style>
<title>React App</title>
</head>
<body>
Expand Down
136 changes: 111 additions & 25 deletions src/components/LoginForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,95 @@
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import { login } from "../store/actions";
import { connect } from "react-redux";
import * as Yup from 'yup'
import loginFormSchema from "../validation/loginFormSchema";
import styled from 'styled-components'

const initialLoginFormValues = {
username: "",
password: "",
};
const initialErrorList = {
username: '',
password: ''
}

const LoginForm = (props) => {
const [loginFormValues, setLoginFormValues] = useState(
initialLoginFormValues
);
const [loginFormValues, setLoginFormValues] = useState(initialLoginFormValues);
const [errorList, setErrorList] = useState(initialErrorList)
const [disabled, setDisabled] = useState(true)
const history = useHistory();

const onLoginTextChange = (evt) => {
const { name, value } = evt.target;

Yup
.reach(loginFormSchema, name)
.validate(value)
.then(() => {
setErrorList({
...errorList,
[name]: ''
})
})
.catch((err) => {
setErrorList({
...errorList,
[name]: err.errors[0]
})
})

setLoginFormValues({ ...loginFormValues, [name]: value });
};

const onLoginSubmit = (evt) => {
evt.preventDefault();
props.login(loginFormValues);
history.push("./user");
setLoginFormValues(initialLoginFormValues);
};

useEffect(() => {
loginFormSchema.isValid(loginFormValues).then(valid => {
setDisabled(!valid)
})
}, [loginFormValues])

return (
<form onSubmit={onLoginSubmit}>
<label>
Username:&nbsp;
<input
type="text"
name="username"
value={loginFormValues.username}
onChange={onLoginTextChange}
/>
</label>
<label>
Password:&nbsp;
<input
type="password"
name="password"
value={loginFormValues.password}
onChange={onLoginTextChange}
/>
</label>
<input type="submit" name="submit" value="Login" />
</form>
<FormContainer>
<StyledForm onSubmit={onLoginSubmit}>
<StyledHeading>Login</StyledHeading>
<label>
Username:&nbsp;
<input
type="text"
name="username"
value={loginFormValues.username}
onChange={onLoginTextChange}
placeholder='Enter your user name'
/>
</label>
<label>
Password:&nbsp;
<input
type="password"
name="password"
value={loginFormValues.password}
onChange={onLoginTextChange}
placeholder='Enter your password'
/>
</label>

<div className="errors">
<div className="error">{errorList.username}</div>
<div className="error">{errorList.password}</div>
<div className="error">{errorList.department}</div>
</div>

<StyledSubmit type="submit" name="submit" value="Login" disabled={disabled} />
</StyledForm>
</FormContainer>
);
};

Expand All @@ -59,3 +102,46 @@ const mapState = (state) => {
};

export default connect(mapState, { login })(LoginForm);

const FormContainer = styled.div`
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Roboto Slab', serif;
`
const StyledForm = styled.form`
width: 70%;
/* border: 1px solid black; */
border-radius: 20px;
box-shadow: 1px 1px 5px black;
margin-top: 5%;
box-sizing: border-box;
padding: 3%;
display: flex;
flex-direction: column;
align-items: center;

label {
color: #0A2738;
}
input {
border: 1px solid #66889C;
border-radius: 2px;
}

* {
margin-top: 1.5%;
margin-bottom: 1.5%;
}
`
const StyledHeading = styled.h2`
color: #2196F3;
`
const StyledSubmit = styled.input`
background-color: #2196F3;
color: white;
border-radius: 10px !important;
border: none;
padding: .5rem 3rem;
`
Loading