From 647b85c1c6cf5c9b914cbfbdf416c8b924e90575 Mon Sep 17 00:00:00 2001 From: Okiri Gabriel Date: Fri, 26 Jun 2026 07:56:22 +0100 Subject: [PATCH] fix: implement server-side auth API calls in signin/signup pages Replace client-side-only stub (fake timeout + hardcoded email check) with real fetch calls to the backend auth endpoints in both DevOps-Project-39 and DevOps-Project-40. - POST /api/auth/email-password/signup for registration - POST /api/auth/email-password/signin for login - Map frontend `username` field to backend `name` field - Show backend error messages via toast on failure - Navigate to home only on successful response - Use existing VITE_API_PATH env var (consistent with other pages) Resolves TODO: Server-side validation comments in both projects Co-authored-by: Cursor --- .../frontend/src/pages/signin-page.tsx | 30 ++++++++++++------ .../frontend/src/pages/signup-page.tsx | 31 +++++++++++++------ .../frontend/src/pages/signin-page.tsx | 30 ++++++++++++------ .../frontend/src/pages/signup-page.tsx | 31 +++++++++++++------ 4 files changed, 86 insertions(+), 36 deletions(-) diff --git a/DevOps-Project-39/wanderlust-3tier-project/frontend/src/pages/signin-page.tsx b/DevOps-Project-39/wanderlust-3tier-project/frontend/src/pages/signin-page.tsx index b0e6a304..3523d6e3 100644 --- a/DevOps-Project-39/wanderlust-3tier-project/frontend/src/pages/signin-page.tsx +++ b/DevOps-Project-39/wanderlust-3tier-project/frontend/src/pages/signin-page.tsx @@ -19,16 +19,28 @@ function signin() { } = useForm({ resolver: zodResolver(signInSchema) }); const onSubmit = async (data: FieldValues) => { - if (data.email === 'abc@gamil.com') { - toast.error('Submitting form is failed'); - return; + try { + const apiUrl = import.meta.env.VITE_API_PATH ?? 'http://localhost:5000'; + const response = await fetch(`${apiUrl}/api/auth/email-password/signin`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + credentials: 'include', + body: JSON.stringify({ + email: data.email, + password: data.password, + }), + }); + const result = await response.json(); + if (!response.ok) { + toast.error(result.message ?? 'Sign in failed. Please check your credentials.'); + return; + } + toast.success(result.message ?? 'Signed in successfully!'); + reset(); + navigate('/'); + } catch { + toast.error('Unable to connect to the server. Please try again later.'); } - - // TODO: Server-side validation - await new Promise((resolve) => setTimeout(resolve, 1000)); - - reset(); - navigate('/'); }; return ( diff --git a/DevOps-Project-39/wanderlust-3tier-project/frontend/src/pages/signup-page.tsx b/DevOps-Project-39/wanderlust-3tier-project/frontend/src/pages/signup-page.tsx index 64401109..4a65d683 100644 --- a/DevOps-Project-39/wanderlust-3tier-project/frontend/src/pages/signup-page.tsx +++ b/DevOps-Project-39/wanderlust-3tier-project/frontend/src/pages/signup-page.tsx @@ -19,16 +19,29 @@ function signin() { } = useForm({ resolver: zodResolver(signUpSchema) }); const onSubmit = async (data: FieldValues) => { - if (data.email === 'abc@gamil.com') { - toast.error('Submitting form is failed'); - return; + try { + const apiUrl = import.meta.env.VITE_API_PATH ?? 'http://localhost:5000'; + const response = await fetch(`${apiUrl}/api/auth/email-password/signup`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + credentials: 'include', + body: JSON.stringify({ + name: data.username, + email: data.email, + password: data.password, + }), + }); + const result = await response.json(); + if (!response.ok) { + toast.error(result.message ?? 'Sign up failed. Please try again.'); + return; + } + toast.success(result.message ?? 'Account created successfully!'); + reset(); + navigate('/'); + } catch { + toast.error('Unable to connect to the server. Please try again later.'); } - - // TODO: Server-side validation - await new Promise((resolve) => setTimeout(resolve, 1000)); - - reset(); - navigate('/'); }; return ( diff --git a/DevOps-Project-40/Devops-Mega-Project-Jenkins-ArgoCD-EKS/frontend/src/pages/signin-page.tsx b/DevOps-Project-40/Devops-Mega-Project-Jenkins-ArgoCD-EKS/frontend/src/pages/signin-page.tsx index b0e6a304..3523d6e3 100644 --- a/DevOps-Project-40/Devops-Mega-Project-Jenkins-ArgoCD-EKS/frontend/src/pages/signin-page.tsx +++ b/DevOps-Project-40/Devops-Mega-Project-Jenkins-ArgoCD-EKS/frontend/src/pages/signin-page.tsx @@ -19,16 +19,28 @@ function signin() { } = useForm({ resolver: zodResolver(signInSchema) }); const onSubmit = async (data: FieldValues) => { - if (data.email === 'abc@gamil.com') { - toast.error('Submitting form is failed'); - return; + try { + const apiUrl = import.meta.env.VITE_API_PATH ?? 'http://localhost:5000'; + const response = await fetch(`${apiUrl}/api/auth/email-password/signin`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + credentials: 'include', + body: JSON.stringify({ + email: data.email, + password: data.password, + }), + }); + const result = await response.json(); + if (!response.ok) { + toast.error(result.message ?? 'Sign in failed. Please check your credentials.'); + return; + } + toast.success(result.message ?? 'Signed in successfully!'); + reset(); + navigate('/'); + } catch { + toast.error('Unable to connect to the server. Please try again later.'); } - - // TODO: Server-side validation - await new Promise((resolve) => setTimeout(resolve, 1000)); - - reset(); - navigate('/'); }; return ( diff --git a/DevOps-Project-40/Devops-Mega-Project-Jenkins-ArgoCD-EKS/frontend/src/pages/signup-page.tsx b/DevOps-Project-40/Devops-Mega-Project-Jenkins-ArgoCD-EKS/frontend/src/pages/signup-page.tsx index 64401109..4a65d683 100644 --- a/DevOps-Project-40/Devops-Mega-Project-Jenkins-ArgoCD-EKS/frontend/src/pages/signup-page.tsx +++ b/DevOps-Project-40/Devops-Mega-Project-Jenkins-ArgoCD-EKS/frontend/src/pages/signup-page.tsx @@ -19,16 +19,29 @@ function signin() { } = useForm({ resolver: zodResolver(signUpSchema) }); const onSubmit = async (data: FieldValues) => { - if (data.email === 'abc@gamil.com') { - toast.error('Submitting form is failed'); - return; + try { + const apiUrl = import.meta.env.VITE_API_PATH ?? 'http://localhost:5000'; + const response = await fetch(`${apiUrl}/api/auth/email-password/signup`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + credentials: 'include', + body: JSON.stringify({ + name: data.username, + email: data.email, + password: data.password, + }), + }); + const result = await response.json(); + if (!response.ok) { + toast.error(result.message ?? 'Sign up failed. Please try again.'); + return; + } + toast.success(result.message ?? 'Account created successfully!'); + reset(); + navigate('/'); + } catch { + toast.error('Unable to connect to the server. Please try again later.'); } - - // TODO: Server-side validation - await new Promise((resolve) => setTimeout(resolve, 1000)); - - reset(); - navigate('/'); }; return (