feat: change password frontend added

backend/apps/web/routers/auths.py

@@ -62,12 +62,16 @@ async def get_session_user(cred=Depends(bearer_scheme)):
 @router.post("/update/password", response_model=bool)
 async def update_password(form_data: UpdatePasswordForm, cred=Depends(bearer_scheme)):
     token = cred.credentials
-    user = Users.get_user_by_token(token)
+    session_user = Users.get_user_by_token(token)
+
+    if session_user:
+        user = Auths.authenticate_user(session_user.email, form_data.password)
 
         if user:
             hashed = get_password_hash(form_data.new_password)
             return Auths.update_user_password_by_id(user.id, form_data.password, hashed)
-
+        else:
+            raise HTTPException(400, detail=ERROR_MESSAGES.INVALID_PASSWORD)
     else:
         raise HTTPException(400, detail=ERROR_MESSAGES.INVALID_CRED)
 

backend/constants.py

@@ -21,6 +21,9 @@ class ERROR_MESSAGES(str, Enum):
         "Your session has expired or the token is invalid. Please sign in again."
     )
     INVALID_CRED = "The email or password provided is incorrect. Please check for typos and try logging in again."
+    INVALID_PASSWORD = (
+        "The password provided is incorrect. Please check for typos and try again."
+    )
     UNAUTHORIZED = "401 Unauthorized"
     ACCESS_PROHIBITED = "You do not have permission to access this resource. Please contact your administrator for assistance."
     ACTION_PROHIBITED = (

src/lib/apis/auths/index.ts

@@ -88,3 +88,34 @@ export const userSignUp = async (name: string, email: string, password: string)
 
 	return res;
 };
+
+export const updateUserPassword = async (token: string, password: string, newPassword: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/auths/update/password`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			...(token && { authorization: `Bearer ${token}` })
+		},
+		body: JSON.stringify({
+			password: password,
+			new_password: newPassword
+		})
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.log(err);
+			error = err.detail;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};

src/lib/components/chat/SettingsModal.svelte

@@ -18,6 +18,7 @@
 
 	import Advanced from './Settings/Advanced.svelte';
 	import Modal from '../common/Modal.svelte';
+	import { updateUserPassword } from '$lib/apis/auths';
 
 	export let show = false;
 
@@ -600,6 +601,31 @@
 		return models;
 	};
 
+	const updatePasswordHandler = async () => {
+		if (newPassword === newPasswordConfirm) {
+			const res = await updateUserPassword(localStorage.token, currentPassword, newPassword).catch(
+				(error) => {
+					toast.error(error);
+					return null;
+				}
+			);
+
+			if (res) {
+				toast.success('Successfully updated.');
+			}
+
+			currentPassword = '';
+			newPassword = '';
+			newPasswordConfirm = '';
+		} else {
+			toast.error(
+				`The passwords you entered don't quite match. Please double-check and try again.`
+			);
+			newPassword = '';
+			newPasswordConfirm = '';
+		}
+	};
+
 	onMount(async () => {
 		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
 		console.log(settings);
@@ -1852,7 +1878,7 @@
 					<form
 						class="flex flex-col h-full text-sm"
 						on:submit|preventDefault={() => {
-							console.log('change save');
+							updatePasswordHandler();
 						}}
 					>
 						<div class=" mb-2.5 font-medium">Change Password</div>