diff --git a/src/components/Setting/ChangePasswordForm.tsx b/src/components/Setting/ChangePasswordForm.tsx new file mode 100644 index 000000000..405ba51cf --- /dev/null +++ b/src/components/Setting/ChangePasswordForm.tsx @@ -0,0 +1,176 @@ +import { useState } from 'preact/hooks'; +import Cookies from 'js-cookie'; +import { TOKEN_COOKIE_NAME } from '../../lib/utils'; + +export default function ChangePasswordForm() { + const [currentPassword, setCurrentPassword] = useState(''); + const [newPassword, setNewPassword] = useState(''); + const [newPasswordConfirmation, setNewPasswordConfirmation] = useState(''); + const [error, setError] = useState(''); + const [successMessage, setSuccessMessage] = useState(''); + const [isLoading, setIsLoading] = useState(false); + + const handleSubmit = (e: Event) => { + e.preventDefault(); + setIsLoading(true); + + if (newPassword !== newPasswordConfirmation) { + setError('New password and confirmation do not match'); + setIsLoading(false); + return; + } + + const headers = new Headers(); + headers.append('Content-Type', 'application/json'); + headers.append( + 'Cookie', + `${TOKEN_COOKIE_NAME}=${Cookies.get(TOKEN_COOKIE_NAME)}` + ); + + fetch('http://localhost:8080/v1-update-password', { + method: 'POST', + credentials: 'include', + headers, + body: JSON.stringify({ + oldPassword: currentPassword, + password: newPassword, + confirmPassword: newPasswordConfirmation, + }), + }) + .then(async (res) => { + const json = await res.json(); + if (res.ok) { + return json; + } else { + throw new Error(json.message); + } + }) + .then((data) => { + setIsLoading(false); + setCurrentPassword(''); + setNewPassword(''); + setNewPasswordConfirmation(''); + setSuccessMessage('Password updated successfully'); + }) + .catch((err) => { + setIsLoading(false); + setError(err.message); + }); + }; + + console.log(currentPassword, newPassword, newPasswordConfirmation); + console.log(`${TOKEN_COOKIE_NAME}=${Cookies.get(TOKEN_COOKIE_NAME)}`); + + return ( +
+

Password

+

Manage settings for your account passwords

+
+
+ + + setCurrentPassword((e.target as HTMLInputElement).value) + } + /> +
+
+ + + setNewPassword((e.target as HTMLInputElement).value) + } + /> +
+
+ + + setNewPasswordConfirmation((e.target as HTMLInputElement).value) + } + /> +
+ + {error && ( +
+

{error}

+
+ )} + + {successMessage && ( +
+

{successMessage}

+
+ )} + + +
+
+ ); +} diff --git a/src/components/Setting/UpdateProfileForm.tsx b/src/components/Setting/UpdateProfileForm.tsx new file mode 100644 index 000000000..5b7d57d4c --- /dev/null +++ b/src/components/Setting/UpdateProfileForm.tsx @@ -0,0 +1,117 @@ +import { useState } from 'preact/hooks'; + +export default function UpdateProfileForm() { + const [name, setName] = useState(''); + const [github, setGithub] = useState(''); + const [linkedin, setLinkedin] = useState(''); + const [website, setWebsite] = useState(''); + const [error, setError] = useState(''); + const [successMessage, setSuccessMessage] = useState(''); + const [isLoading, setIsLoading] = useState(false); + + const handleSubmit = (e: Event) => { + e.preventDefault(); + setIsLoading(true); + + fetch('http://localhost:8080/v1-update-profile', { + method: 'POST', + credentials: 'include', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + name, + github, + linkedin, + website, + }), + }); + }; + + return ( +
+

Update Profile

+

Manage settings for your roadmap.sh profile

+
+
+ + +
+
+ + +
+ +
+ + +
+
+ + +
+ +
+ + +
+ + +
+
+ ); +} diff --git a/src/pages/settings/change-password.astro b/src/pages/settings/change-password.astro index 13dead7f1..98c7dd3ee 100644 --- a/src/pages/settings/change-password.astro +++ b/src/pages/settings/change-password.astro @@ -1,11 +1,11 @@ --- -import ChangePassword from '../../components/Setting/ChangePassword.astro'; +import ChangePasswordForm from '../../components/Setting/ChangePasswordForm'; import SettingSidebar from '../../components/Setting/SettingSidebar.astro'; import SettingLayout from '../../layouts/SettingLayout.astro'; --- - - + +