inputs
This commit is contained in:
Tyrel Souza
parent
884a4dbea5
commit
ac8e190595
@ -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"]
|
||||
@ -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"
|
||||
id="email"
|
||||
value={emailState.value}
|
||||
onChange={emailChangeHandler}
|
||||
onBlur={validateEmailHandler}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`${classes.control} ${
|
||||
!passwordState.isValid ? classes.invalid : ""
|
||||
}`}
|
||||
>
|
||||
<label htmlFor="password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
value={passwordState.value}
|
||||
onChange={passwordChangeHandler}
|
||||
onBlur={validatePasswordHandler}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
label="E-Mail"
|
||||
isValid={emailIsValid}
|
||||
value={emailState.value}
|
||||
onChange={emailChangeHandler}
|
||||
onBlur={validateEmailHandler}
|
||||
/>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
label="Password"
|
||||
isValid={passwordIsValid}
|
||||
value={passwordState.value}
|
||||
onChange={passwordChangeHandler}
|
||||
onBlur={validatePasswordHandler}
|
||||
/>
|
||||
<div className={classes.actions}>
|
||||
<Button
|
||||
type="submit"
|
||||
|
||||
@ -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
23
usereducer-starting-project/src/components/UI/Input/Input.js
Normal 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
|
||||
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user