tyrel/udemy-react-course
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

inputs

Browse Source
This commit is contained in:
Tyrel Souza 2022-09-23 12:53:30 -04:00
parent 884a4dbea5
commit ac8e190595
No known key found for this signature in database
GPG Key ID: F3614B02ACBE438E
5 changed files with 93 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
usereducer-starting-project/.eslintcache
View File

@ -1 +1 @@
[{"/code/gitea/udemy-react-course/usereducer-starting-project/src/index.js":"1","/code/gitea/udemy-react-course/usereducer-starting-project/src/App.js":"2","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Home/Home.js":"3","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/MainHeader.js":"4","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Login/Login.js":"5","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/Navigation.js":"6","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Card/Card.js":"7","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Button/Button.js":"8","/code/gitea/udemy-react-course/usereducer-starting-project/src/store/auth-context.js":"9"},{"size":322,"mtime":1663949419058,"results":"10","hashOfConfig":"11"},{"size":514,"mtime":1663949472127,"results":"12","hashOfConfig":"11"},{"size":458,"mtime":1663949557069,"results":"13","hashOfConfig":"11"},{"size":333,"mtime":1663948682144,"results":"14","hashOfConfig":"11"},{"size":3985,"mtime":1663949653304,"results":"15","hashOfConfig":"11"},{"size":828,"mtime":1663949120275,"results":"16","hashOfConfig":"11"},{"size":218,"mtime":1663942019122,"results":"17","hashOfConfig":"11"},{"size":353,"mtime":1663942019122,"results":"18","hashOfConfig":"11"},{"size":1036,"mtime":1663949348496,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"s4xwqj",{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"29","messages":"30","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},"/code/gitea/udemy-react-course/usereducer-starting-project/src/index.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/App.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Home/Home.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/MainHeader.js",[],["39","40"],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Login/Login.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/Navigation.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Card/Card.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Button/Button.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/store/auth-context.js",[],{"ruleId":"41","replacedBy":"42"},{"ruleId":"43","replacedBy":"44"},"no-native-reassign",["45"],"no-negated-in-lhs",["46"],"no-global-assign","no-unsafe-negation"]
[{"/code/gitea/udemy-react-course/usereducer-starting-project/src/index.js":"1","/code/gitea/udemy-react-course/usereducer-starting-project/src/App.js":"2","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Home/Home.js":"3","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/MainHeader.js":"4","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Login/Login.js":"5","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/Navigation.js":"6","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Card/Card.js":"7","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Button/Button.js":"8","/code/gitea/udemy-react-course/usereducer-starting-project/src/store/auth-context.js":"9","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Input/Input.js":"10"},{"size":322,"mtime":1663949419058,"results":"11","hashOfConfig":"12"},{"size":514,"mtime":1663949472127,"results":"13","hashOfConfig":"12"},{"size":458,"mtime":1663949557069,"results":"14","hashOfConfig":"12"},{"size":333,"mtime":1663948682144,"results":"15","hashOfConfig":"12"},{"size":3659,"mtime":1663951992597,"results":"16","hashOfConfig":"12"},{"size":828,"mtime":1663949120275,"results":"17","hashOfConfig":"12"},{"size":218,"mtime":1663942019122,"results":"18","hashOfConfig":"12"},{"size":353,"mtime":1663942019122,"results":"19","hashOfConfig":"12"},{"size":1036,"mtime":1663949348496,"results":"20","hashOfConfig":"12"},{"size":560,"mtime":1663951798324,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"s4xwqj",{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"31","messages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"39","messages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"41","messages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/code/gitea/udemy-react-course/usereducer-starting-project/src/index.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/App.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Home/Home.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/MainHeader.js",[],["43","44"],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Login/Login.js",["45"],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/Navigation.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Card/Card.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Button/Button.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/store/auth-context.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Input/Input.js",[],{"ruleId":"46","replacedBy":"47"},{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","severity":1,"message":"51","line":8,"column":10,"nodeType":"52","messageId":"53","endLine":8,"endColumn":19},"no-native-reassign",["54"],"no-negated-in-lhs",["55"],"no-unused-vars","'toBeValid' is defined but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]

33
usereducer-starting-project/src/components/Login/Login.js
View File

@ -4,6 +4,8 @@ import Card from "../UI/Card/Card"
import classes from "./Login.module.css"
import Button from "../UI/Button/Button"
import AuthContext from "../../store/auth-context"
import Input from "../UI/Input/Input"
import { toBeValid } from "@testing-library/jest-dom/dist/matchers"
const emailReducer = (state, action) => {
if (action.type === "USER_INPUT") {
@ -39,9 +41,8 @@ const Login = (props) => {
isValid: false,
})
const {isValid: emailIsValid} = emailState;
const {isValid: passwordIsValid} = emailState;
const { isValid: emailIsValid } = emailState
const { isValid: passwordIsValid } = emailState
useEffect(() => {
const identifier = setTimeout(() => {
@ -81,34 +82,24 @@ const Login = (props) => {
return (
<Card className={classes.login}>
<form onSubmit={submitHandler}>
<div
className={`${classes.control} ${
!emailState.isValid ? classes.invalid : ""
}`}
>
<label htmlFor="email">E-Mail</label>
<input
type="email"
<Input
id="email"
type="email"
label="E-Mail"
isValid={emailIsValid}
value={emailState.value}
onChange={emailChangeHandler}
onBlur={validateEmailHandler}
/>
</div>
<div
className={`${classes.control} ${
!passwordState.isValid ? classes.invalid : ""
}`}
>
<label htmlFor="password">Password</label>
<input
type="password"
<Input
id="password"
type="password"
label="Password"
isValid={passwordIsValid}
value={passwordState.value}
onChange={passwordChangeHandler}
onBlur={validatePasswordHandler}
/>
</div>
<div className={classes.actions}>
<Button
type="submit"

46
usereducer-starting-project/src/components/Login/Login.module.css
View File

@ -5,52 +5,6 @@
padding: 2rem;
}
.control {
margin: 1rem 0;
display: flex;
align-items: stretch;
flex-direction: column;
}
.control label,
.control input {
display: block;
}
.control label {
font-weight: bold;
flex: 1;
color: #464646;
margin-bottom: 0.5rem;
}
.control input {
flex: 3;
font: inherit;
padding: 0.35rem 0.35rem;
border-radius: 6px;
border: 1px solid #ccc;
}
.control input:focus {
outline: none;
border-color: #4f005f;
background: #f6dbfc;
}
.control.invalid input {
border-color: red;
background: #fbdada;
}
.actions {
text-align: center;
}
@media (min-width: 768px) {
.control {
align-items: center;
flex-direction: row;
}
}

23
usereducer-starting-project/src/components/UI/Input/Input.js Normal file
View File

@ -0,0 +1,23 @@
import React from "react"
import classes from "./Input.module.css"
function Input(props) {
return (
<div
className={`${classes.control} ${
!props.isValid ? classes.invalid : ""
}`}
>
<label htmlFor="email">{props.label}</label>
<input
type={props.type}
id={props.id}
value={props.value}
onChange={props.onChange}
onBlur={props.onBlur}
/>
</div>
)
}
export default Input

47
usereducer-starting-project/src/components/UI/Input/Input.module.css Normal file
View File

@ -0,0 +1,47 @@
.control {
margin: 1rem 0;
display: flex;
align-items: stretch;
flex-direction: column;
}
.control label,
.control input {
display: block;
}
.control label {
font-weight: bold;
flex: 1;
color: #464646;
margin-bottom: 0.5rem;
}
.control input {
flex: 3;
font: inherit;
padding: 0.35rem 0.35rem;
border-radius: 6px;
border: 1px solid #ccc;
}
.control input:focus {
outline: none;
border-color: #4f005f;
background: #f6dbfc;
}
.control.invalid input {
border-color: red;
background: #fbdada;
}
@media (min-width: 768px) {
.control {
align-items: center;
flex-direction: row;
}
}