Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
survey
Commits
4ff854ff
Commit
4ff854ff
authored
Jul 05, 2022
by
Yoon, Daeki
😅
Browse files
로그인에 로직 적용
parent
a8cb6867
Changes
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/auth/Login.tsx
View file @
4ff854ff
import
React
,
{
useState
}
from
"
react
"
;
import
React
,
{
ChangeEvent
,
FormEvent
,
useState
}
from
"
react
"
;
import
{
useNavigate
}
from
"
react-router-dom
"
;
import
{
useNavigate
}
from
"
react-router-dom
"
;
import
{
catchErrors
}
from
"
../helpers
"
;
// type LoginProps = {
import
{
SpinnerIcon
}
from
"
../icons
"
;
import
{
useAuth
}
from
"
./auth.context
"
;
// };
export
const
Login
=
()
=>
{
export
const
Login
=
()
=>
{
// interface IUSER {
const
[
error
,
setError
]
=
useState
(
""
);
// email: string;
const
[
loading
,
setLoading
]
=
useState
(
false
);
// password: string;
const
[
loginData
,
setLoginData
]
=
useState
({
email
:
""
,
password
:
""
});
// }
const
navigate
=
useNavigate
();
const
{
login
}
=
useAuth
();
// const [error, setError] = useState("");
// const [disabled, setDisabled] = useState(false);
// const [success, setSuccess] = useState(false);
// const navigate = useNavigate();
// function handleChange(event: type) {}
// function handleSubmit(params: type) {}
function
handleChange
(
e
:
ChangeEvent
<
HTMLInputElement
>
)
{
const
{
name
,
value
}
=
e
.
currentTarget
;
setLoginData
({
...
loginData
,
[
name
]:
value
});
}
// if (success) {
async
function
handleSubmit
(
e
:
FormEvent
)
{
// alert("회원가입 되었습니다");
e
.
preventDefault
();
// navigate(`../`);
console
.
log
(
loginData
);
// }
const
{
email
,
password
}
=
loginData
;
try
{
setLoading
(
true
);
await
login
(
email
,
password
,
()
=>
navigate
(
"
/
"
,
{
replace
:
true
}));
}
catch
(
error
)
{
setLoading
(
false
);
catchErrors
(
error
,
setError
);
}
}
return
(
return
(
<
div
className
=
"flex justify-center mt-3"
>
<
div
className
=
"flex justify-center mt-3"
>
<
div
className
=
"flex flex-col space-y-4 mt-5 text-xl font-bold"
>
<
form
onSubmit
=
{
handleSubmit
}
className
=
"flex flex-col space-y-4 mt-5 text-xl font-bold"
>
<
label
className
=
"block text-gray-700 text-sm font-bold mb-2 mt-3"
>
<
label
className
=
"block text-gray-700 text-sm font-bold mb-2 mt-3"
>
이메일
이메일
</
label
>
</
label
>
<
input
<
input
onChange
=
{
handleChange
}
className
=
"shadow appearance-none border rounded py-2 px-3 text-gray-70"
className
=
"shadow appearance-none border rounded py-2 px-3 text-gray-70"
id
=
"email"
name
=
"email"
type
=
"email"
type
=
"email"
autoComplete
=
"username"
placeholder
=
"이메일을 입력하세요"
placeholder
=
"이메일을 입력하세요"
value
=
{
loginData
.
email
}
/>
/>
<
label
className
=
"block text-gray-700 text-sm font-bold mb-2 mt-3"
>
<
label
className
=
"block text-gray-700 text-sm font-bold mb-2 mt-3"
>
비밀번호
비밀번호
</
label
>
</
label
>
<
input
<
input
onChange
=
{
handleChange
}
className
=
"shadow appearance-none border rounded py-2 px-3 text-gray-70"
className
=
"shadow appearance-none border rounded py-2 px-3 text-gray-70"
id
=
"username
"
name
=
"password
"
type
=
"password"
type
=
"password"
autoComplete
=
"current-password"
placeholder
=
"비밀번호를 입력하세요"
placeholder
=
"비밀번호를 입력하세요"
value
=
{
loginData
.
password
}
/>
/>
{
error
&&
(
<
div
className
=
"text-red-500 text-sm mb-6"
>
<
p
>
{
error
}
</
p
>
</
div
>
)
}
<
div
className
=
"text-center"
>
<
div
className
=
"text-center"
>
<
button
className
=
"bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3"
>
<
button
type
=
"submit"
disabled
=
{
loading
?
true
:
false
}
className
=
"bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3"
>
{
loading
&&
(
<
SpinnerIcon
className
=
"animate-spin h-5 w-5 mr-1 text-white"
/>
)
}
로그인
로그인
</
button
>
</
button
>
</
div
>
</
div
>
</
div
>
</
form
>
</
div
>
</
div
>
);
);
};
};
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment