-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
088628a
commit 7948408
Showing
4 changed files
with
136 additions
and
148 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,3 @@ | ||
| "use client" | ||
|
|
||
| import React from "react" | ||
|
|
||
| import Title from "@/components/ui/Title" | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,3 @@ | ||
| "use client" | ||
|
|
||
| import React from "react" | ||
|
|
||
| const ChangePasswordForm: React.FC = () => { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,78 +1,75 @@ | ||
| "use client" | ||
| 'use client' | ||
|
|
||
| import React from "react" | ||
| import IconButton from "@/components/ui/IconButton" | ||
|
|
||
| interface PlayerData { | ||
| username: string | ||
| email: string | ||
| } | ||
|
|
||
| const sampleData: PlayerData = { | ||
| username: "Owlvernyte", | ||
| email: "[email protected]", | ||
| } | ||
| import React from 'react' | ||
| import IconButton from '@/components/ui/IconButton' | ||
| import useCheckAuthorization from '@/features/user/useCheckAuthorization' | ||
|
|
||
| const UpdateEmailForm: React.FC = () => { | ||
| return ( | ||
| <div className="flex flex-col py-2"> | ||
| <div className="text-bamboo-100 text-left text-sm md:text-lg lg:text-xl xl:text-xl 2xl:text-2xl font-normal"> | ||
| </div> | ||
| <div className="items-center inline-flex flex-row pt-4 gap-4 w-full"> | ||
| <div className="input input-bordered input-lg w-full bg-bamboo-100 placeholder-dirt-400 placeholder-opacity-50 py-4"> | ||
| {sampleData.email} | ||
| </div> | ||
| <IconButton | ||
| iconSrc="/assets/icons/secondary/Edit.svg" | ||
| iconAlt="Icon Edit" | ||
| onClick={() => (window as any).modal_update_email.showModal()} | ||
| buttonVariants="btn-neutral" | ||
| buttonSize="btn-lg" | ||
| /> | ||
| <dialog id="modal_update_email" className="modal"> | ||
| <div className="modal-box w-full bg-bamboo-400"> | ||
| <form method="dialog"> | ||
| <IconButton | ||
| iconSrc="/assets/icons/primary/Dell_fill.svg" | ||
| iconAlt="Icon Close" | ||
| buttonVariants="btn-primary" | ||
| buttonStyle="btn-circle" | ||
| className="absolute right-2 top-2" | ||
| /> | ||
| <h3 className="text-3xl text-bamboo-100 py-4">Thay đổi Email</h3> | ||
| <div className="px-4"> | ||
| <input | ||
| type="text" | ||
| name="email" | ||
| defaultValue={sampleData.email} | ||
| placeholder="Email mới" | ||
| className="input input-bordered input-lg w-full bg-bamboo-100 placeholder-dirt-400 placeholder-opacity-50 text-lg mb-5" | ||
| /> | ||
| <input | ||
| type="password" | ||
| name="currentPassword" | ||
| placeholder="Nhập mật khẩu xác nhận" | ||
| className="input input-bordered input-lg w-full bg-bamboo-100 placeholder-dirt-400 placeholder-opacity-50 text-lg" | ||
| /> | ||
| <div className="modal-action"> | ||
| <input | ||
| type="submit" | ||
| value="Cập Nhật" | ||
| className="btn btn-md btn-secondary" | ||
| /> | ||
| const { data: user } = useCheckAuthorization() | ||
|
|
||
| return ( | ||
| <div className="flex flex-col py-2"> | ||
| <div className="text-bamboo-100 text-left text-sm md:text-lg lg:text-xl xl:text-xl 2xl:text-2xl font-normal"> | ||
| </div> | ||
| <div className="items-center inline-flex flex-row pt-4 gap-4 w-full"> | ||
| <div className="input input-bordered input-lg w-full bg-bamboo-100 placeholder-dirt-400 placeholder-opacity-50 py-4"> | ||
| {user?.email ?? 'Trống'} | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| {/* closes when clicked outside */} | ||
| <form method="dialog" className="modal-backdrop"> | ||
| <button>close</button> | ||
| </form> | ||
| </dialog> | ||
| </div> | ||
| </div> | ||
| ) | ||
| <IconButton | ||
| iconSrc="/assets/icons/secondary/Edit.svg" | ||
| iconAlt="Icon Edit" | ||
| onClick={() => | ||
| (window as any).modal_update_email.showModal() | ||
| } | ||
| buttonVariants="btn-neutral" | ||
| buttonSize="btn-lg" | ||
| /> | ||
| <dialog id="modal_update_email" className="modal"> | ||
| <div className="modal-box w-full bg-bamboo-400"> | ||
| <form method="dialog"> | ||
| <IconButton | ||
| iconSrc="/assets/icons/primary/Dell_fill.svg" | ||
| iconAlt="Icon Close" | ||
| buttonVariants="btn-primary" | ||
| buttonStyle="btn-circle" | ||
| className="absolute right-2 top-2" | ||
| /> | ||
| <h3 className="text-3xl text-bamboo-100 py-4"> | ||
| Thay đổi Email | ||
| </h3> | ||
| <div className="px-4"> | ||
| <input | ||
| type="text" | ||
| name="email" | ||
| defaultValue={user?.email} | ||
| placeholder="Email mới" | ||
| className="input input-bordered input-lg w-full bg-bamboo-100 placeholder-dirt-400 placeholder-opacity-50 text-lg mb-5" | ||
| /> | ||
| <input | ||
| type="password" | ||
| name="currentPassword" | ||
| placeholder="Nhập mật khẩu xác nhận" | ||
| className="input input-bordered input-lg w-full bg-bamboo-100 placeholder-dirt-400 placeholder-opacity-50 text-lg" | ||
| /> | ||
| <div className="modal-action"> | ||
| <input | ||
| type="submit" | ||
| value="Cập Nhật" | ||
| className="btn btn-md btn-secondary" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| {/* closes when clicked outside */} | ||
| <form method="dialog" className="modal-backdrop"> | ||
| <button>close</button> | ||
| </form> | ||
| </dialog> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default UpdateEmailForm |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,80 +1,75 @@ | ||
| "use client" | ||
| 'use client' | ||
|
|
||
| import React from "react" | ||
| import IconButton from "@/components/ui/IconButton" | ||
|
|
||
| interface PlayerData { | ||
| username: string | ||
| email: string | ||
| } | ||
|
|
||
| const sampleData: PlayerData = { | ||
| username: "Owlvernyte", | ||
| email: "[email protected]", | ||
| } | ||
| import React from 'react' | ||
| import IconButton from '@/components/ui/IconButton' | ||
| import useCheckAuthorization from '@/features/user/useCheckAuthorization' | ||
|
|
||
| const UpdateUsernameForm: React.FC = () => { | ||
| return ( | ||
| <div className="flex flex-col py-2"> | ||
| <div className="text-bamboo-100 text-left text-sm md:text-lg lg:text-xl xl:text-xl 2xl:text-2xl font-normal"> | ||
| Tên Người Dùng | ||
| </div> | ||
| <div className="items-center inline-flex flex-row pt-4 gap-4 w-full "> | ||
| <div className="input input-bordered input-lg w-full bg-bamboo-100 placeholder-dirt-400 placeholder-opacity-50 text-xl py-4"> | ||
| {sampleData.username} | ||
| </div> | ||
| <IconButton | ||
| iconSrc="/assets/icons/secondary/Edit.svg" | ||
| iconAlt="Icon Edit" | ||
| onClick={() => (window as any).modal_update_username.showModal()} | ||
| buttonVariants="btn-neutral" | ||
| buttonSize="btn-lg" | ||
| /> | ||
| <dialog id="modal_update_username" className="modal"> | ||
| <div className="modal-box w-full bg-bamboo-400"> | ||
| <form method="dialog"> | ||
| <IconButton | ||
| iconSrc="/assets/icons/primary/Dell_fill.svg" | ||
| iconAlt="Icon Close" | ||
| buttonVariants="btn-primary" | ||
| buttonStyle="btn-circle" | ||
| className="absolute right-2 top-2" | ||
| /> | ||
| <h3 className="text-3xl text-bamboo-100 py-4"> | ||
| Thay đổi Tên Người Dùng | ||
| </h3> | ||
| <div className="px-4"> | ||
| <input | ||
| type="text" | ||
| name="username" | ||
| defaultValue={sampleData.username} | ||
| placeholder="Nhập tên người dùng" | ||
| className="input input-bordered input-lg w-full bg-bamboo-100 placeholder-dirt-400 placeholder-opacity-50 text-lg mb-5" | ||
| /> | ||
| <input | ||
| type="password" | ||
| name="currentPassword" | ||
| placeholder="Nhập mật khẩu xác nhận" | ||
| className="input input-bordered input-lg w-full bg-bamboo-100 placeholder-dirt-400 placeholder-opacity-50 text-lg" | ||
| /> | ||
| <div className="modal-action"> | ||
| <input | ||
| type="submit" | ||
| value="Cập Nhật" | ||
| className="btn btn-md btn-secondary" | ||
| /> | ||
| const { data: user } = useCheckAuthorization() | ||
|
|
||
| return ( | ||
| <div className="flex flex-col py-2"> | ||
| <div className="text-bamboo-100 text-left text-sm md:text-lg lg:text-xl xl:text-xl 2xl:text-2xl font-normal"> | ||
| Tên Người Dùng | ||
| </div> | ||
| <div className="items-center inline-flex flex-row pt-4 gap-4 w-full "> | ||
| <div className="input input-bordered input-lg w-full bg-bamboo-100 placeholder-dirt-400 placeholder-opacity-50 text-xl py-4"> | ||
| {user?.userName ?? 'Trống'} | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| {/* closes when clicked outside */} | ||
| <form method="dialog" className="modal-backdrop"> | ||
| <button>close</button> | ||
| </form> | ||
| </dialog> | ||
| </div> | ||
| </div> | ||
| ) | ||
| <IconButton | ||
| iconSrc="/assets/icons/secondary/Edit.svg" | ||
| iconAlt="Icon Edit" | ||
| onClick={() => | ||
| (window as any).modal_update_username.showModal() | ||
| } | ||
| buttonVariants="btn-neutral" | ||
| buttonSize="btn-lg" | ||
| /> | ||
| <dialog id="modal_update_username" className="modal"> | ||
| <div className="modal-box w-full bg-bamboo-400"> | ||
| <form method="dialog"> | ||
| <IconButton | ||
| iconSrc="/assets/icons/primary/Dell_fill.svg" | ||
| iconAlt="Icon Close" | ||
| buttonVariants="btn-primary" | ||
| buttonStyle="btn-circle" | ||
| className="absolute right-2 top-2" | ||
| /> | ||
| <h3 className="text-3xl text-bamboo-100 py-4"> | ||
| Thay đổi Tên Người Dùng | ||
| </h3> | ||
| <div className="px-4"> | ||
| <input | ||
| type="text" | ||
| name="username" | ||
| defaultValue={user?.userName} | ||
| placeholder="Nhập tên người dùng mới" | ||
| className="input input-bordered input-lg w-full bg-bamboo-100 placeholder-dirt-400 placeholder-opacity-50 text-lg mb-5" | ||
| /> | ||
| <input | ||
| type="password" | ||
| name="currentPassword" | ||
| placeholder="Nhập mật khẩu xác nhận" | ||
| className="input input-bordered input-lg w-full bg-bamboo-100 placeholder-dirt-400 placeholder-opacity-50 text-lg" | ||
| /> | ||
| <div className="modal-action"> | ||
| <input | ||
| type="submit" | ||
| value="Cập Nhật" | ||
| className="btn btn-md btn-secondary" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| {/* closes when clicked outside */} | ||
| <form method="dialog" className="modal-backdrop"> | ||
| <button>close</button> | ||
| </form> | ||
| </dialog> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default UpdateUsernameForm |