Skip to content

Commit 47af99f

Browse files
LuciLuaLuciLua
committed
🌟 remove bug btn: now exists submit btn and create new account btn
1 parent 82d5ed2 commit 47af99f

File tree

9 files changed

+111
-55
lines changed

9 files changed

+111
-55
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"devDependencies": {
2323
"@types/node": "^18.11.15",
2424
"@types/react": "^18.0.26",
25+
"axios": "^1.2.1",
2526
"react-icons": "^4.7.1",
2627
"sass": "^1.56.2",
2728
"typescript": "^4.9.4"

‎src/components/Form/Buttons/Buttons.tsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,28 @@ import { useEffect, useRef, useState } from "react"
55
// next components
66
import Link from "next/link"
77

8-
function Buttons({ statusLogin, typeForm, setTypeForm, state, setState }) {
8+
function Buttons({ statusLogin, state, setState }) {
9+
10+
const [data, setData] = useState({})
911

1012
const c_btn = useRef<any>(null)
1113
const c_btn_span = useRef<any>(null)
1214
const c_btn_create_span = useRef<any>(null)
1315

1416
useEffect(() => {
1517
changeBtn()
16-
verifyLoginStateByPathname()
18+
verifyLoginState()
1719
})
1820

19-
console.log(typeForm)
20-
21-
function verifyLoginStateByPathname() {
21+
function verifyLoginState() {
2222
if (state == 'signUp') {
2323
c_btn_span.current.innerText = 'Create now'
2424
c_btn_create_span.current.innerText = 'Login here'
25-
setTypeForm('signUp')
2625
} else {
2726
c_btn_span.current.innerText = 'Login'
2827
c_btn_create_span.current.innerText = 'Create your account here'
29-
setTypeForm('/signIn')
3028

31-
if (statusLogin) {
32-
} else {
33-
c_btn.current.disable
34-
}
29+
return !statusLogin ? c_btn.current.disable : null
3530
}
3631
}
3732

@@ -52,10 +47,14 @@ function Buttons({ statusLogin, typeForm, setTypeForm, state, setState }) {
5247
<button
5348
ref={c_btn}
5449
className={`${styles.c_btn}`}
55-
disabled={!statusLogin}>
50+
disabled={!statusLogin}
51+
type="submit">
5652
<span ref={c_btn_span} />
5753
</button>
58-
<button className={styles.c_btn_create} onClick={() => changeState()}>
54+
<button
55+
className={styles.c_btn_create}
56+
onClick={changeState}
57+
type="button">
5958
<span ref={c_btn_create_span} />
6059
</button>
6160
</div>

‎src/components/Form/Form.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// styles
22
import styles from "./Form.module.scss"
33
// react hooks
4-
import { useState } from "react"
4+
import { FormEvent, useState } from "react"
55

66
// components
77
import SignIn from "./SignIn/SignIn"
@@ -12,15 +12,11 @@ import Footer from "./Footer/Footer"
1212
function Form({ state, setState }) {
1313
const [statusLogin, setStatusLogin] = useState<Boolean>(false)
1414
const [path, setPath] = useState<String>('/')
15-
const [typeForm, setTypeForm] = useState<String>('/')
1615

17-
console.log(typeForm)
18-
19-
function verifyIfCanSubmit(e: any) {
16+
function verifyIfCanSubmit(e: FormEvent) {
2017
// se dados estiverem ok
2118
if (statusLogin) {
22-
console.log('ok')
23-
if (typeForm == 'signUp') {
19+
if (state == 'signUp') {
2420
// se o formulario for do tipo cadastro, va para o login
2521
setPath('/')
2622
} else {
@@ -37,14 +33,14 @@ function Form({ state, setState }) {
3733
return (
3834
<form
3935
className={styles.container}
40-
onSubmit={e => verifyIfCanSubmit(e)}
36+
onSubmit={(e) => verifyIfCanSubmit(e)}
4137
action={`${path}`}>
4238
<div className={styles.tick} />
4339
{state == 'signIn' ?
4440
<SignIn setStatusLogin={setStatusLogin} />
4541
:
4642
<SignUp setStatusLogin={setStatusLogin} />}
47-
<Buttons setState={setState} state={state} statusLogin={statusLogin} typeForm={typeForm} setTypeForm={setTypeForm} />
43+
<Buttons setState={setState} state={state} statusLogin={statusLogin} />
4844
<Footer />
4945
</form>
5046
)

‎src/components/Form/Input/Input.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// styles
22
import styles from "./Input.module.scss"
33

4-
function Input({ label, icon, onInput, type, placeholder, title, autocomplete }) {
4+
function Input({ label, icon, onChange, type, placeholder, autocomplete, value }) {
55
return (
66
<div className={styles.input}>
77
<label>{label}</label>
@@ -10,11 +10,12 @@ function Input({ label, icon, onInput, type, placeholder, title, autocomplete })
1010
</div>
1111
<input
1212
autoComplete={autocomplete}
13-
onInput={onInput}
13+
onChange={onChange}
1414
type={type}
1515
placeholder={placeholder}
16-
alt={title}
17-
title={title}
16+
alt={placeholder}
17+
title={placeholder}
18+
value={value}
1819
/>
1920
</div>
2021
)

‎src/components/Form/SignIn/SignIn.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,8 @@ function SignIn({ setStatusLogin }) {
2828
}
2929

3030
function formValidation(email: String, pass: String) {
31-
if (validEmail(email) && validPass(pass)) {
32-
setStatusLogin(true)
33-
} else {
34-
setStatusLogin(false)
35-
}
31+
return validEmail(email) && validPass(pass) ?
32+
setStatusLogin(true) : setStatusLogin(false)
3633
}
3734

3835
useEffect(() => {
@@ -46,18 +43,18 @@ function SignIn({ setStatusLogin }) {
4643
<Input
4744
label={"Email"}
4845
icon={<AiOutlineUser />}
49-
onInput={(e: any) => setEmail(e.target.value)}
46+
onChange={(e: any) => setEmail(e.target.value)}
47+
value={email}
5048
type={"text"}
5149
placeholder="Email"
52-
title={"Email"}
5350
autocomplete="email" />
5451
<Input
5552
label={"Senha"}
5653
icon={<RiLockPasswordLine />}
57-
onInput={(e: any) => setPass(e.target.value)}
54+
onChange={(e: any) => setPass(e.target.value)}
55+
value={pass}
5856
type={"password"}
5957
placeholder="Senha"
60-
title={"Senha"}
6158
autocomplete="off" />
6259
</div>
6360
</div>

‎src/components/Form/SignUp/SignUp.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@ import styles from "../Form.module.scss"
44
import { AiOutlineUser } from "react-icons/ai"
55
import { RiLockPasswordLine } from "react-icons/ri"
66
// React Hooks
7-
import { useEffect, useState } from "react"
7+
import { FormEvent, InputHTMLAttributes, useEffect, useState } from "react"
88
// Components
99
import Header from "../Header/Header"
1010
import Input from "../Input/Input"
1111
// types
1212
import { UserProps } from "../../../types/UserProps"
13+
import EventEmitter from "events"
1314

1415
function SignUp({ setStatusLogin }) {
1516

@@ -37,16 +38,15 @@ function SignUp({ setStatusLogin }) {
3738
return passConfirm == pass ? true : false
3839
}
3940

40-
41-
function formValidation(username: any, email: any, pass: any, passConfirm: any) {
42-
if (validUsername(username) &&
41+
function formValidation(username: String, email: String, pass: String, passConfirm: String) {
42+
return validUsername(username) &&
4343
validEmail(email) &&
4444
validPass(pass) &&
45-
validPassConfirm(passConfirm)) {
45+
validPassConfirm(passConfirm)
46+
?
4647
setStatusLogin(true)
47-
} else {
48+
:
4849
setStatusLogin(false)
49-
}
5050
}
5151

5252
useEffect(() => {
@@ -60,34 +60,34 @@ function SignUp({ setStatusLogin }) {
6060
<Input
6161
label={"Username"}
6262
icon={<AiOutlineUser />}
63-
onInput={(e: any) => setUsername(e.target.value)}
63+
onChange={(e: any) => setUsername(e.target.value)}
64+
value={username}
6465
type={"text"}
6566
placeholder="Username"
66-
title={"Username"}
6767
autocomplete="nickname" />
6868
<Input
6969
label={"Email"}
7070
icon={<AiOutlineUser />}
71-
onInput={(e: any) => setEmail(e.target.value)}
71+
onChange={(e: any) => setEmail(e.target.value)}
7272
type={"text"}
7373
placeholder="Email"
74-
title={"Email"}
74+
value={email}
7575
autocomplete="off" />
7676
<Input
7777
label={"Senha"}
7878
icon={<RiLockPasswordLine />}
79-
onInput={(e: any) => setPass(e.target.value)}
79+
onChange={(e: any) => setPass(e.target.value)}
8080
type={"password"}
8181
placeholder="Senha"
82-
title={"Senha"}
82+
value={pass}
8383
autocomplete="current-password" />
8484
<Input
8585
label={"Confirme sua senha"}
8686
icon={<RiLockPasswordLine />}
87-
onInput={(e: any) => setPassConfirm(e.target.value)}
87+
onChange={(e: any) => setPassConfirm(e.target.value)}
8888
type={"password"}
8989
placeholder="Senha"
90-
title={"Senha"}
90+
value={passConfirm}
9191
autocomplete="off" />
9292
</div>
9393
</div>

‎src/pages/api/submit.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default (request, response) => {
2+
const { username, pass, email } = request.body;
3+
4+
return response.json({ message: `${username} | ${pass} | ${email} ` });
5+
};

‎src/types/UserProps.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export type UserProps = {
2-
id: number,
3-
username: string,
4-
email: string,
5-
pass: string,
6-
passConfirm: string,
2+
id: Number,
3+
username: String,
4+
email: String,
5+
pass: String,
6+
passConfirm: String,
77
}

‎yarn.lock‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,20 @@ anymatch@~3.1.2:
176176
normalize-path "^3.0.0"
177177
picomatch "^2.0.4"
178178

179+
asynckit@^0.4.0:
180+
version "0.4.0"
181+
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
182+
integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
183+
184+
axios@^1.2.1:
185+
version "1.2.1"
186+
resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.1.tgz#44cf04a3c9f0c2252ebd85975361c026cb9f864a"
187+
integrity sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==
188+
dependencies:
189+
follow-redirects "^1.15.0"
190+
form-data "^4.0.0"
191+
proxy-from-env "^1.1.0"
192+
179193
binary-extensions@^2.0.0:
180194
version "2.2.0"
181195
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -213,18 +227,44 @@ client-only@0.0.1:
213227
resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
214228
integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
215229

230+
combined-stream@^1.0.8:
231+
version "1.0.8"
232+
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
233+
integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
234+
dependencies:
235+
delayed-stream "~1.0.0"
236+
216237
csstype@^3.0.2:
217238
version "3.1.1"
218239
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
219240
integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
220241

242+
delayed-stream@~1.0.0:
243+
version "1.0.0"
244+
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
245+
integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
246+
221247
fill-range@^7.0.1:
222248
version "7.0.1"
223249
resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
224250
integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
225251
dependencies:
226252
to-regex-range "^5.0.1"
227253

254+
follow-redirects@^1.15.0:
255+
version "1.15.2"
256+
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
257+
integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
258+
259+
form-data@^4.0.0:
260+
version "4.0.0"
261+
resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
262+
integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
263+
dependencies:
264+
asynckit "^0.4.0"
265+
combined-stream "^1.0.8"
266+
mime-types "^2.1.12"
267+
228268
framer-motion@^7.10.0:
229269
version "7.10.0"
230270
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-7.10.0.tgz#500c44f064aa26904abc3a1a683afc1311b7cec9"
@@ -299,6 +339,18 @@ loose-envify@^1.1.0, loose-envify@^1.4.0:
299339
dependencies:
300340
js-tokens "^3.0.0 || ^4.0.0"
301341

342+
mime-db@1.52.0:
343+
version "1.52.0"
344+
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
345+
integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
346+
347+
mime-types@^2.1.12:
348+
version "2.1.35"
349+
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
350+
integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
351+
dependencies:
352+
mime-db "1.52.0"
353+
302354
nanoid@^3.3.4:
303355
version "3.3.4"
304356
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
@@ -367,6 +419,11 @@ prop-types@^15.7.2:
367419
object-assign "^4.1.1"
368420
react-is "^16.13.1"
369421

422+
proxy-from-env@^1.1.0:
423+
version "1.1.0"
424+
resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
425+
integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
426+
370427
react-dom@^18.2.0:
371428
version "18.2.0"
372429
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"

0 commit comments

Comments
 (0)