Skip to content

Commit 161b300

Browse files
boadusamuelboadusamuel
authored
Merge pull request #24 from boadusamuel/feature/refactor-profile-edit-page
refactored profile edit page with delete functionality and updating o…
2 parents 549c2e1 + a028570 commit 161b300

File tree

10 files changed

+94
-99
lines changed

10 files changed

+94
-99
lines changed

‎resources/js/Components/DangerButton.jsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1+
import {Button} from "primereact/button";
2+
13
export default function DangerButton({ className = '', disabled, children, ...props }) {
24
return (
3-
<button
5+
<Button
46
{...props}
57
className={
6-
`inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150 ${
8+
`bg-red-600 border border-transparent rounded-md font-medium text-white capitalize tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150 ${
79
disabled && 'opacity-25'
810
} ` + className
911
}
1012
disabled={disabled}
1113
>
1214
{children}
13-
</button>
15+
</Button>
1416
);
1517
}

‎resources/js/Components/InputLabel.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export default function InputLabel({ value, className = '', children, ...props }) {
22
return (
3-
<label {...props} className={`block font-medium text-sm text-gray-700 ` + className}>
3+
<label {...props} className={`block text-900 font-medium mb-2` + className}>
44
{value ? value : children}
55
</label>
66
);

‎resources/js/Components/PrimaryButton.jsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1+
import {Button} from "primereact/button";
2+
13
export default function PrimaryButton({ className = '', disabled, children, ...props }) {
24
return (
3-
<button
5+
<Button
46
{...props}
57
className={
6-
`inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150 ${
8+
`bg-gray-800 border border-transparent rounded-md font-medium text-white capitalize tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150 ${
79
disabled && 'opacity-25'
810
} ` + className
911
}
1012
disabled={disabled}
1113
>
1214
{children}
13-
</button>
15+
</Button>
1416
);
1517
}

‎resources/js/Components/SecondaryButton.jsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
1+
import {Button} from "primereact/button";
2+
13
export default function SecondaryButton({ type = 'button', className = '', disabled, children, ...props }) {
24
return (
3-
<button
5+
<Button
46
{...props}
57
type={type}
68
className={
7-
`inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150 ${
9+
`bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150 ${
810
disabled && 'opacity-25'
911
} ` + className
1012
}
1113
disabled={disabled}
1214
>
1315
{children}
14-
</button>
16+
</Button>
1517
);
1618
}

‎resources/js/Layouts/layout/layout.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,12 @@ const Layout = ({ children }) => {
3737
},
3838
});
3939

40-
// const pathname = route().current();
40+
const pathname = route().current();
4141
// const searchParams = useSearchParams();
42-
// useEffect(() => {
43-
// hideMenu();
44-
// hideProfileMenu();
45-
// }, [pathname, searchParams]);
42+
useEffect(() => {
43+
hideMenu();
44+
hideProfileMenu();
45+
}, [pathname]);
4646

4747
const [
4848
bindProfileMenuOutsideClickListener,

‎resources/js/Pages/Auth/Register.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export default function Register() {
4242
<form onSubmit={submit}>
4343
<div>
4444
<div className="mb-3">
45-
<label htmlFor="email" className="block text-900 font-medium mb-2">Name</label>
45+
<label htmlFor="name" className="block text-900 font-medium mb-2">Name</label>
4646
<InputText
4747
id="name"
4848
type="text"

‎resources/js/Pages/Profile/Edit.jsx

+8-11
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,33 @@
1-
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
21
import DeleteUserForm from './Partials/DeleteUserForm';
32
import UpdatePasswordForm from './Partials/UpdatePasswordForm';
43
import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm';
54
import { Head } from '@inertiajs/react';
5+
import Layout from "@/Layouts/layout/layout.jsx";
66

77
export default function Edit({ auth, mustVerifyEmail, status }) {
88
return (
9-
<AuthenticatedLayout
10-
user={auth.user}
11-
header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Profile</h2>}
12-
>
9+
<Layout>
1310
<Head title="Profile" />
1411

15-
<div className="py-12">
16-
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
17-
<div className="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
12+
<div className="grid">
13+
<div className="col-12">
14+
<div className="card">
1815
<UpdateProfileInformationForm
1916
mustVerifyEmail={mustVerifyEmail}
2017
status={status}
2118
className="max-w-xl"
2219
/>
2320
</div>
2421

25-
<div className="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
22+
<div className="card">
2623
<UpdatePasswordForm className="max-w-xl" />
2724
</div>
2825

29-
<div className="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
26+
<div className="card">
3027
<DeleteUserForm className="max-w-xl" />
3128
</div>
3229
</div>
3330
</div>
34-
</AuthenticatedLayout>
31+
</Layout>
3532
);
3633
}

‎resources/js/Pages/Profile/Partials/DeleteUserForm.jsx

+15-12
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import { useRef, useState } from 'react';
22
import DangerButton from '@/Components/DangerButton';
33
import InputError from '@/Components/InputError';
44
import InputLabel from '@/Components/InputLabel';
5-
import Modal from '@/Components/Modal';
65
import SecondaryButton from '@/Components/SecondaryButton';
7-
import TextInput from '@/Components/TextInput';
86
import { useForm } from '@inertiajs/react';
7+
import { Dialog } from 'primereact/dialog';
8+
import {InputText} from "primereact/inputtext";
99

1010
export default function DeleteUserForm({ className = '' }) {
1111
const [confirmingUserDeletion, setConfirmingUserDeletion] = useState(false);
@@ -43,6 +43,13 @@ export default function DeleteUserForm({ className = '' }) {
4343
reset();
4444
};
4545

46+
const DialogHeaderContent = (
47+
<h2 className="text-lg font-medium text-gray-900 pl-4 pt-2 mb-0">
48+
Are you sure you want to delete your account?
49+
</h2>
50+
);
51+
52+
4653
return (
4754
<section className={`space-y-6 ${className}`}>
4855
<header>
@@ -54,23 +61,19 @@ export default function DeleteUserForm({ className = '' }) {
5461
</p>
5562
</header>
5663

57-
<DangerButton onClick={confirmUserDeletion}>Delete Account</DangerButton>
58-
59-
<Modal show={confirmingUserDeletion} onClose={closeModal}>
60-
<form onSubmit={deleteUser} className="p-6">
61-
<h2 className="text-lg font-medium text-gray-900">
62-
Are you sure you want to delete your account?
63-
</h2>
64+
<DangerButton onClick={confirmUserDeletion} className="mt-2">Delete Account</DangerButton>
6465

66+
<Dialog className="px-6" header={DialogHeaderContent} visible={confirmingUserDeletion} style={{ width: '50vw' }} onHide={() => setConfirmingUserDeletion(false)}>
67+
<form onSubmit={deleteUser} className="px-4">
6568
<p className="mt-1 text-sm text-gray-600">
6669
Once your account is deleted, all of its resources and data will be permanently deleted. Please
6770
enter your password to confirm you would like to permanently delete your account.
6871
</p>
6972

70-
<div className="mt-6">
73+
<div className="mt-4">
7174
<InputLabel htmlFor="password" value="Password" className="sr-only" />
7275

73-
<TextInput
76+
<InputText
7477
id="password"
7578
type="password"
7679
name="password"
@@ -93,7 +96,7 @@ export default function DeleteUserForm({ className = '' }) {
9396
</DangerButton>
9497
</div>
9598
</form>
96-
</Modal>
99+
</Dialog>
97100
</section>
98101
);
99102
}

‎resources/js/Pages/Profile/Partials/UpdatePasswordForm.jsx

+32-36
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import PrimaryButton from '@/Components/PrimaryButton';
55
import TextInput from '@/Components/TextInput';
66
import { useForm } from '@inertiajs/react';
77
import { Transition } from '@headlessui/react';
8+
import {InputText} from "primereact/inputtext";
89

910
export default function UpdatePasswordForm({ className = '' }) {
1011
const passwordInput = useRef();
@@ -22,17 +23,17 @@ export default function UpdatePasswordForm({ className = '' }) {
2223
put(route('password.update'), {
2324
preserveScroll: true,
2425
onSuccess: () => reset(),
25-
onError: (errors) => {
26-
if (errors.password) {
27-
reset('password', 'password_confirmation');
28-
passwordInput.current.focus();
29-
}
30-
31-
if (errors.current_password) {
32-
reset('current_password');
33-
currentPasswordInput.current.focus();
34-
}
35-
},
26+
// onError: (errors) => {
27+
// if (errors.password) {
28+
// reset('password', 'password_confirmation');
29+
// passwordInput.current.focus();
30+
// }
31+
//
32+
// if (errors.current_password) {
33+
// reset('current_password');
34+
// currentPasswordInput.current.focus();
35+
// }
36+
// },
3637
});
3738
};
3839

@@ -46,52 +47,47 @@ export default function UpdatePasswordForm({ className = '' }) {
4647
</p>
4748
</header>
4849

49-
<form onSubmit={updatePassword} className="mt-6 space-y-6">
50-
<div>
51-
<InputLabel htmlFor="current_password" value="Current Password" />
52-
53-
<TextInput
50+
<form onSubmit={updatePassword} className="mt-4 space-y-6">
51+
<div className="mb-3">
52+
<label htmlFor="current_password" className="block text-900 font-medium mb-2">Current Password</label>
53+
<InputText
5454
id="current_password"
55-
ref={currentPasswordInput}
55+
type="password"
56+
placeholder="Current Password"
57+
className="w-full"
5658
value={data.current_password}
5759
onChange={(e) => setData('current_password', e.target.value)}
58-
type="password"
59-
className="mt-1 block w-full"
60-
autoComplete="current-password"
6160
/>
62-
63-
<InputError message={errors.current_password} className="mt-2" />
61+
<InputError message={errors.current_password}/>
6462
</div>
6563

66-
<div>
64+
<div className="mb-3">
6765
<InputLabel htmlFor="password" value="New Password" />
68-
69-
<TextInput
66+
<InputText
7067
id="password"
7168
ref={passwordInput}
69+
type="password"
70+
placeholder="Password"
71+
className="w-full"
7272
value={data.password}
7373
onChange={(e) => setData('password', e.target.value)}
74-
type="password"
75-
className="mt-1 block w-full"
76-
autoComplete="new-password"
7774
/>
78-
79-
<InputError message={errors.password} className="mt-2" />
75+
<InputError message={errors.password}/>
8076
</div>
8177

82-
<div>
78+
<div className="mb-3">
8379
<InputLabel htmlFor="password_confirmation" value="Confirm Password" />
8480

85-
<TextInput
81+
<InputText
8682
id="password_confirmation"
83+
type="password"
84+
placeholder="Confirm Password"
85+
className="w-full"
8786
value={data.password_confirmation}
8887
onChange={(e) => setData('password_confirmation', e.target.value)}
89-
type="password"
90-
className="mt-1 block w-full"
91-
autoComplete="new-password"
9288
/>
9389

94-
<InputError message={errors.password_confirmation} className="mt-2" />
90+
<InputError message={errors.password_confirmation}/>
9591
</div>
9692

9793
<div className="flex items-center gap-4">

‎resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.jsx

+17-24
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import InputError from '@/Components/InputError';
2-
import InputLabel from '@/Components/InputLabel';
32
import PrimaryButton from '@/Components/PrimaryButton';
4-
import TextInput from '@/Components/TextInput';
53
import { Link, useForm, usePage } from '@inertiajs/react';
64
import { Transition } from '@headlessui/react';
5+
import {InputText} from "primereact/inputtext";
76

87
export default function UpdateProfileInformation({ mustVerifyEmail, status, className = '' }) {
98
const user = usePage().props.auth.user;
@@ -22,44 +21,38 @@ export default function UpdateProfileInformation({ mustVerifyEmail, status, clas
2221
return (
2322
<section className={className}>
2423
<header>
25-
<h2 className="text-lg font-medium text-gray-900">Profile Information</h2>
24+
<h2 className="text-lg font-medium">Profile Information</h2>
2625

2726
<p className="mt-1 text-sm text-gray-600">
2827
Update your account's profile information and email address.
2928
</p>
3029
</header>
3130

32-
<form onSubmit={submit} className="mt-6 space-y-6">
33-
<div>
34-
<InputLabel htmlFor="name" value="Name" />
35-
36-
<TextInput
31+
<form onSubmit={submit} className="mt-4 space-y-6">
32+
<div className="mb-3">
33+
<label htmlFor="name" className="block text-900 font-medium mb-2">Name</label>
34+
<InputText
3735
id="name"
38-
className="mt-1 block w-full"
36+
type="text"
37+
placeholder="Name"
38+
className="w-full"
3939
value={data.name}
4040
onChange={(e) => setData('name', e.target.value)}
41-
required
42-
isFocused
43-
autoComplete="name"
4441
/>
45-
46-
<InputError className="mt-2" message={errors.name} />
42+
<InputError message={errors.email} className=""/>
4743
</div>
4844

49-
<div>
50-
<InputLabel htmlFor="email" value="Email" />
51-
52-
<TextInput
45+
<div className="mb-3">
46+
<label htmlFor="email" className="block text-900 font-medium mb-2">Email</label>
47+
<InputText
5348
id="email"
54-
type="email"
55-
className="mt-1 block w-full"
49+
type="text"
50+
placeholder="Email address"
51+
className="w-full"
5652
value={data.email}
5753
onChange={(e) => setData('email', e.target.value)}
58-
required
59-
autoComplete="username"
6054
/>
61-
62-
<InputError className="mt-2" message={errors.email} />
55+
<InputError message={errors.email} className=""/>
6356
</div>
6457

6558
{mustVerifyEmail && user.email_verified_at === null && (

0 commit comments

Comments
 (0)