diff --git a/src/components/Setting/ChangePasswordForm.tsx b/src/components/Setting/ChangePasswordForm.tsx
deleted file mode 100644
index d413e9987..000000000
--- a/src/components/Setting/ChangePasswordForm.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-import { useCallback, useEffect, useState } from 'preact/hooks';
-import Cookies from 'js-cookie';
-import Spinner from '../Spinner';
-import {TOKEN_COOKIE_NAME} from "../../lib/jwt";
-
-export default function ChangePasswordForm() {
- const [authProvider, setAuthProvider] = useState<
- 'email' | 'google' | 'github' | null
- >(null);
- const [currentPassword, setCurrentPassword] = useState('');
- const [newPassword, setNewPassword] = useState('');
- const [newPasswordConfirmation, setNewPasswordConfirmation] = useState('');
- const [message, setMessage] = useState<{
- type: 'error' | 'success' | 'info';
- message: string;
- }>();
- const [isLoading, setIsLoading] = useState(false);
-
- const handleSubmit = (e: Event) => {
- e.preventDefault();
- setIsLoading(true);
-
- if (newPassword !== newPasswordConfirmation) {
- setMessage({
- type: 'error',
- message: 'Passwords 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: authProvider === 'email' ? currentPassword : 'social-auth',
- 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('');
- fetchProfile();
- setMessage({
- type: 'success',
- message: 'Password updated successfully',
- });
- })
- .catch((err) => {
- setIsLoading(false);
- setMessage({
- type: 'error',
- message: err.message,
- });
- });
- };
-
- const fetchProfile = useCallback(async () => {
- // Set the loading state
- setIsLoading(true);
-
- // Create headers with the cookie
- const headers = new Headers();
- headers.append('Content-Type', 'application/json');
- headers.append(
- 'Cookie',
- `${TOKEN_COOKIE_NAME}=${Cookies.get(TOKEN_COOKIE_NAME)}`
- );
-
- try {
- const res = await fetch('http://localhost:8080/v1-me', {
- method: 'POST',
- credentials: 'include',
- headers,
- });
-
- const json = await res.json();
-
- if (json.status === 401) {
- // If the user is not authenticated, redirect to the login page
- // Clear the cookie
- Cookies.remove(TOKEN_COOKIE_NAME);
- window.location.href = '/login';
- }
-
- if (res.ok) {
- setAuthProvider(json.authProvider);
- } else {
- throw new Error(json.message);
- }
- } catch (error: any) {
- setMessage({
- type: 'error',
- message: error?.message || 'Something went wrong',
- });
- }
- setIsLoading(false);
- }, []);
-
- // Make a request to the backend to fill in the form with the current values
- useEffect(() => {
- fetchProfile();
- }, []);
-
- return (
-
- );
-}
diff --git a/src/components/Setting/SettingSidebar.astro b/src/components/Setting/SettingSidebar.astro
index 6f196fe1c..f07e3d1fb 100644
--- a/src/components/Setting/SettingSidebar.astro
+++ b/src/components/Setting/SettingSidebar.astro
@@ -16,14 +16,14 @@ export interface Props {
-
Profile
-
Change password
@@ -46,14 +46,14 @@ export interface Props {
>
-
Profile
-
Change password
diff --git a/src/components/Setting/UpdatePasswordForm.tsx b/src/components/Setting/UpdatePasswordForm.tsx
new file mode 100644
index 000000000..fe741baa9
--- /dev/null
+++ b/src/components/Setting/UpdatePasswordForm.tsx
@@ -0,0 +1,181 @@
+import { useCallback, useEffect, useState } from 'preact/hooks';
+import Cookies from 'js-cookie';
+import Spinner from '../Spinner';
+import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
+import { httpGet, httpPost } from '../../lib/http';
+
+export default function UpdatePasswordForm() {
+ const [authProvider, setAuthProvider] = useState('');
+ const [currentPassword, setCurrentPassword] = useState('');
+ const [newPassword, setNewPassword] = useState('');
+ const [newPasswordConfirmation, setNewPasswordConfirmation] = useState('');
+
+ const [error, setError] = useState('');
+ const [success, setSuccess] = useState('');
+
+ const [isLoading, setIsLoading] = useState(false);
+
+ const handleSubmit = async (e: Event) => {
+ e.preventDefault();
+ setIsLoading(true);
+ setError('');
+ setSuccess('');
+
+ if (newPassword !== newPasswordConfirmation) {
+ setError('Passwords do not match');
+ setIsLoading(false);
+
+ return;
+ }
+
+ const { response, error } = await httpPost(
+ `${import.meta.env.PUBLIC_API_URL}/v1-update-password`,
+ {
+ oldPassword: authProvider === 'email' ? currentPassword : 'social-auth',
+ password: newPassword,
+ confirmPassword: newPasswordConfirmation,
+ }
+ );
+
+ if (error) {
+ setError(error.message || 'Something went wrong');
+ setIsLoading(false);
+
+ return;
+ }
+
+ setError('');
+ setCurrentPassword('');
+ setNewPassword('');
+ setNewPasswordConfirmation('');
+ setSuccess('Password updated successfully');
+ setIsLoading(false);
+ };
+
+ const loadProfile = async () => {
+ setIsLoading(true);
+
+ const { error, response } = await httpGet(
+ `${import.meta.env.PUBLIC_API_URL}/v1-me`
+ );
+
+ if (error || !response) {
+ if (error?.status === 401) {
+ Cookies.remove(TOKEN_COOKIE_NAME);
+ window.location.reload();
+
+ return;
+ }
+
+ setIsLoading(false);
+ setError(error?.message || 'Something went wrong');
+
+ return;
+ }
+
+ const { authProvider } = response;
+ setAuthProvider(authProvider);
+
+ setIsLoading(false);
+ };
+
+ useEffect(() => {
+ loadProfile().finally(() => {
+ // Hide page loader
+ });
+ }, []);
+
+ return (
+
+ );
+}
diff --git a/src/components/SubscribePopup.astro b/src/components/SubscribePopup.astro
deleted file mode 100644
index 851188562..000000000
--- a/src/components/SubscribePopup.astro
+++ /dev/null
@@ -1,41 +0,0 @@
----
-import Popup from './Popup/Popup.astro';
-import CaptchaFields from './Captcha/CaptchaFields.astro';
----
-
-
diff --git a/src/pages/forgot-password.astro b/src/pages/forgot-password.astro
index ea7e770a8..e5d649afb 100644
--- a/src/pages/forgot-password.astro
+++ b/src/pages/forgot-password.astro
@@ -1,5 +1,5 @@
---
-import ForgotPasswordForm from '../components/Profile/ForgotPasswordForm';
+import { ForgotPasswordForm } from '../components/AuthenticationFlow/ForgotPasswordForm';
import SettingLayout from '../layouts/SettingLayout.astro';
---
@@ -9,9 +9,12 @@ import SettingLayout from '../layouts/SettingLayout.astro';
class='mx-auto flex flex-col items-start justify-start pb-28 pt-10 sm:max-w-[400px] sm:items-center sm:justify-center sm:pt-20'
>
-
Forgot Password?
+
+ Forgot Password?
+
- Enter your email address below and we will send you a link to reset your password.
+ Enter your email address below and we will send you a link to reset
+ your password.
diff --git a/src/pages/settings/change-password.astro b/src/pages/settings/update-password.astro
similarity index 75%
rename from src/pages/settings/change-password.astro
rename to src/pages/settings/update-password.astro
index 98c7dd3ee..d9cc26831 100644
--- a/src/pages/settings/change-password.astro
+++ b/src/pages/settings/update-password.astro
@@ -1,11 +1,11 @@
---
-import ChangePasswordForm from '../../components/Setting/ChangePasswordForm';
+import UpdatePasswordForm from '../../components/Setting/UpdatePasswordForm';
import SettingSidebar from '../../components/Setting/SettingSidebar.astro';
import SettingLayout from '../../layouts/SettingLayout.astro';
---
-
+
diff --git a/src/pages/settings/profile.astro b/src/pages/settings/update-profile.astro
similarity index 100%
rename from src/pages/settings/profile.astro
rename to src/pages/settings/update-profile.astro