Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
F
final-exam
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Packages
Packages
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Nawasan Wisitsingkhon
final-exam
Commits
e9c70125
Commit
e9c70125
authored
Sep 30, 2023
by
Nawasan Wisitsingkhon
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update register ui
parent
d45ea414
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
106 additions
and
23 deletions
+106
-23
register.js
src/pages/register.js
+106
-23
No files found.
src/pages/register.js
View file @
e9c70125
import
{
Box
,
Button
,
Grid
,
TextField
}
from
"@mui/material"
;
import
{
Box
,
Button
,
Divider
,
Grid
,
TextField
}
from
"@mui/material"
;
import
{
Snackbar
}
from
"@mui/material"
;
import
React
from
"react"
;
import
{
useContext
}
from
"react"
;
import
{
UserContext
}
from
"./_app"
;
import
{
Container
}
from
"@mui/material"
;
import
{
Google
}
from
"@mui/icons-material"
;
import
{
useState
}
from
"react"
;
export
default
function
Login
()
{
const
[
errorMessage
,
setErrorMessage
]
=
useState
(
""
);
const
[
successMessage
,
setSuccessMessage
]
=
useState
(
""
);
const
user
=
useContext
(
UserContext
);
const
[
name
,
setName
]
=
useState
(
""
);
const
[
email
,
setEmail
]
=
useState
(
""
);
const
[
phone
,
setPhone
]
=
useState
(
""
);
const
[
image
,
setImage
]
=
useState
(
""
);
const
[
username
,
setUsername
]
=
useState
(
""
);
const
[
password
,
setPassword
]
=
useState
(
""
);
if
(
user
.
value
?.
name
)
return
(
...
...
@@ -13,33 +24,105 @@ export default function Login() {
<
h3
>
{
user
.
value
.
name
}
<
/h3
>
<
/div
>
);
// name,
// email,
// phone,
// photo,
// username,
// password,
// rank: false,
// google_token: google_token ?? "",
/**
*
* @param {FormDataEvent} e
*/
function
onSubmitForm
(
e
)
{
e
.
preventDefault
()
alert
(
"form submit"
)
}
return
(
<
div
>
<
div
>
<
Container
>
<
Snackbar
ContentProps
=
{{
className
:
"bg-red-500"
}}
anchorOrigin
=
{{
horizontal
:
"center"
,
vertical
:
"top"
}}
open
=
{
errorMessage
}
message
=
{
errorMessage
.
length
}
/
>
<
Snackbar
ContentProps
=
{{
className
:
"bg-green-500"
}}
anchorOrigin
=
{{
horizontal
:
"center"
,
vertical
:
"top"
}}
open
=
{
successMessage
.
length
}
message
=
{
successMessage
}
/
>
<
Grid
container
>
<
Grid
item
lg
=
{
3
}
md
=
{
0
}
><
/Grid
>
<
Grid
item
lg
=
{
6
}
md
=
{
12
}
>
<
form
action
=
{
"#"
}
className
=
"border border-red-500 bg-white py-3 text-center rounded-lg"
>
<
Box
component
=
{
"h3"
}
className
=
"text-gray-700"
>
สมัครสมาชิก
<
/Box
>
<
TextField
label
=
"ชื่อ - นามสกุล"
variant
=
"standard"
className
=
"mx-3 my-1"
/>
<
TextField
label
=
"อีเมล"
variant
=
"standard"
className
=
"mx-3 my-1"
/>
<
TextField
label
=
"เบอร์โทร"
type
=
"tel"
variant
=
"standard"
className
=
"mx-3 my-1"
/>
<
TextField
label
=
"รูปภาพ"
helperText
=
{
"https://someweb.com/image.jpg"
}
variant
=
"standard"
className
=
"mx-3 my-1"
/>
<
TextField
label
=
"username"
variant
=
"standard"
className
=
"mx-3 my-1"
/>
<
TextField
label
=
"password"
type
=
"password"
variant
=
"standard"
className
=
"mx-3 my-1"
/>
<
div
className
=
"text-right px-10 sm:px-16"
>
<
Button
className
=
"my-5 text-lg"
variant
=
"contained"
type
=
"submit"
>
สมัคร
<
/Button
>
<
/div
>
<
/form
>
<
div
className
=
"border border-red-500 bg-white py-3 text-center rounded-lg"
>
<
form
onSubmit
=
{
onSubmitForm
}
className
=
""
>
<
Box
component
=
{
"h2"
}
className
=
"text-gray-700"
>
สมัครสมาชิก
<
/Box
>
<
TextField
label
=
"ชื่อ - นามสกุล"
variant
=
"standard"
className
=
"mx-3 my-1"
value
=
{
name
}
onChange
=
{(
e
)
=>
setName
(
e
.
target
.
value
)}
required
/>
<
TextField
label
=
"อีเมล"
variant
=
"standard"
className
=
"mx-3 my-1"
value
=
{
email
}
onChange
=
{(
e
)
=>
setEmail
(
e
.
target
.
value
)}
required
/>
<
TextField
label
=
"เบอร์โทร"
helperText
=
"0989999999"
type
=
"tel"
variant
=
"standard"
className
=
"mx-3 my-1"
value
=
{
phone
}
onChange
=
{(
e
)
=>
setPhone
(
e
.
target
.
value
)}
required
/>
<
TextField
label
=
"รูปโปรไฟล์"
helperText
=
{
"https://someweb.com/image.jpg"
}
variant
=
"standard"
className
=
"mx-3 my-1"
value
=
{
image
}
onChange
=
{(
e
)
=>
setImage
(
e
.
target
.
value
)}
/
>
<
TextField
label
=
"username"
variant
=
"standard"
className
=
"mx-3 my-1"
value
=
{
username
}
onChange
=
{(
e
)
=>
setUsername
(
e
.
target
.
value
)}
required
/>
<
TextField
label
=
"password"
type
=
"password"
variant
=
"standard"
className
=
"mx-3 my-1"
value
=
{
password
}
onChange
=
{(
e
)
=>
setPassword
(
e
.
target
.
value
)}
/
>
<
div
className
=
"text-right px-10 sm:px-16"
>
<
Button
className
=
"my-5 text-lg"
variant
=
"contained"
type
=
"submit"
>
สมัคร
<
/Button
>
<
/div
>
<
/form
>
<
Divider
/>
<
Box
component
=
{
"h4"
}
>
หรือสมัครด้วยบัญชี
google
<
/Box
>
<
button
className
=
"bg-white rounded-full border-none hover:shadow-md shadow-gray-400 duration-300 hover:-translate-y-1"
>
<
Google
fontSize
=
"large"
/>
<
/button
>
<
/div
>
<
/Grid
>
<
Grid
item
lg
=
{
3
}
md
=
{
0
}
><
/Grid
>
<
/Grid
>
...
...
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