diff --git a/daily-thought-frontend/src/pages/register.tsx b/daily-thought-frontend/src/pages/register.tsx
index 36f9573d0a1c5f94ae8ee92fd22fcf2bc782a8a8..f9e4f6bc66e1973a48db0d17f71955bf105eff36 100644
--- a/daily-thought-frontend/src/pages/register.tsx
+++ b/daily-thought-frontend/src/pages/register.tsx
@@ -1,13 +1,15 @@
import BasicField from "@/components/form/basicField";
-import { useState } from "react";
+import { FormEvent, useState } from "react";
+import Router from 'next/router'
const Register = () => {
const [username, setUsername] = useState<string>("");
const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>("");
const [passwordConfirmation, setPasswordConfirmation] = useState<string>("");
+ const [error, setError] = useState<string>("");
- const handleSubmit = async (event) => {
+ const handleSubmit = async (event: FormEvent) => {
event.preventDefault()
const JSONdata = JSON.stringify({
@@ -16,7 +18,7 @@ const Register = () => {
password: password,
profile: ""
})
- const endpoint = '/api/form'
+ const endpoint = `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}api/register`
const options = {
method: 'POST',
headers: {
@@ -26,7 +28,14 @@ const Register = () => {
}
const response = await fetch(endpoint, options)
const result = await response.json()
- alert(`Success: ${result.data}`)
+
+ console.log(result.error)
+
+ if(result.error !== undefined){
+ setError(result.error.error)
+ } else {
+ Router.push("/feed")
+ }
}
return (
@@ -44,7 +53,7 @@ const Register = () => {
</a>
</p>
- <form className="mt-8 space-y-6" action="#" method="POST">
+ <form className="mt-8 space-y-6" onSubmit={(e) => handleSubmit(e)}>
<input type="hidden" name="remember" defaultValue="true" />
<div className="rounded-md shadow-sm">
<BasicField name="username" placeholder="Username" onChange={setUsername}/>
@@ -53,9 +62,12 @@ const Register = () => {
<BasicField name="password" placeholder="Confirm Password" onChange={setPasswordConfirmation} error={password === passwordConfirmation ? null : "Confirmation doesn't match"}/>
</div>
<div>
+ <p className="text-xs text-c-pink m-2">
+ {error}
+ </p>
<button
type="submit"
- className="group relative flex w-full justify-center rounded-md bg-c-pink px-3 py-2 text-sm font-semibold text-white hover:bg-white hover:text-c-pink hover:border-c-pink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-c-pink"
+ className="group relative flex w-full justify-center rounded-md bg-c-pink px-3 py-2 text-sm font-semibold text-white hover:bg-c-pink hover:text-c-green hover:border-c-pink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-c-pink"
>
Sign in
</button>
diff --git a/daily-thought-frontend/src/pages/signIn.tsx b/daily-thought-frontend/src/pages/signIn.tsx
index 23f078e61c257c119d740a4616949c909b70e594..e3aa4975d499862f729ccc721280c893be5fb8f3 100644
--- a/daily-thought-frontend/src/pages/signIn.tsx
+++ b/daily-thought-frontend/src/pages/signIn.tsx
@@ -1,4 +1,38 @@
+import Router from 'next/router'
+import { FormEvent, useState } from 'react';
+
const SignIn = () => {
+ const [error, setError] = useState<string>("");
+ const [username, setUsername] = useState<string>("");
+ const [password, setPassword] = useState<string>("");
+
+ const handleSubmit = async (event: FormEvent) => {
+ event.preventDefault()
+
+ const JSONdata = JSON.stringify({
+ username: username,
+ password: password
+ })
+ const endpoint = `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}api/login`
+ const options = {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSONdata,
+ }
+ const response = await fetch(endpoint, options)
+ const result = await response.json()
+
+ console.log(result.error)
+
+ if(result.error !== undefined){
+ setError(result.error)
+ } else {
+ Router.push("/feed")
+ }
+ }
+
return (
<>
<div className="flex min-h-full items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
@@ -14,21 +48,22 @@ const SignIn = () => {
</a>
</p>
</div>
- <form className="mt-8 space-y-6" action="#" method="POST">
+ <form className="mt-8 space-y-6" onSubmit={(e) => handleSubmit(e)}>
<input type="hidden" name="remember" defaultValue="true" />
<div className="-space-y-px rounded-md shadow-sm">
<div>
- <label htmlFor="email-address" className="sr-only">
+ <label htmlFor="username" className="sr-only">
Email address
</label>
<input
- id="email-address"
- name="email"
- type="email"
- autoComplete="email"
+ id="username"
+ name="username"
+ type="text"
+ autoComplete="username"
required
className="relative block w-full rounded-t-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
- placeholder="Email address"
+ placeholder="Username"
+ onChange={(e) => setUsername(e.target.value)}
/>
</div>
<div>
@@ -43,6 +78,7 @@ const SignIn = () => {
required
className="relative block w-full rounded-b-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
placeholder="Password"
+ onChange={(e) => setPassword(e.target.value)}
/>
</div>
</div>
@@ -68,6 +104,9 @@ const SignIn = () => {
</div>
<div>
+ <p className='text-xs text-c-pink m-2'>
+ {error}
+ </p>
<button
type="submit"
className="group relative flex w-full justify-center rounded-md bg-c-pink px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"