First, the action function inside of Authentication.jsx does not get called.
export async function action({ req }) {
console.log('action req', req);
const searchParams = new URL(req.url).searchParams;
console.log('searchParams', searchParams);
const mode = searchParams.get('mode') || 'login';
console.log('mode', mode);
if (mode !== 'login' && mode !== 'signup') {
throw json({ message: 'Unsupported mode.' }, { status: 422 });
}
const data = await req.formData();
console.log('data', data);
const authData = {
email: data.get('email'),
password: data.get('password'),
};
console.log('authData', authData);
const res = await fetch('http://localhost:8080/' + mode, {
method: 'POST',
headers: {
'Content-Type': 'application;/json',
},
body: JSON.stringify(authData),
});
if (res.status === 422 || res.status === 401) {
return res;
// throw json({ message: 'An error occurred.' }, { status: res.status });
}
if (!res.ok) {
throw json({ message: 'Could not authenticate user.', status: 500 });
}
// soon: manage token
return redirect('/');
}
The was this was written was confusing too, because normally one would expect a onSubmit function that would be inside the actual AuthForm.jsx, and also it seems unsafe to pass the password in the url?
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import HomePageView from '@/views/Home';
import Postings from '@/views/Postings';
import PostingDetailsPage from '@/components/postings/PostingDetailsPage';
import Workforce from '@/views/Workforce';
import Reports from '@/views/Reports';
import Enterprise from '@/views/Enterprise';
import AppLayout from '@/views/AppLayout';
import ErrorPage from '@/views/ErrorPage';
import AuthenticationPage, {
action as authAction,
} from '@/views/Authentication';
const router = createBrowserRouter([
{
path: '/',
element: <HomePageView />,
errorElement: <ErrorPage />,
},
{
path: '/auth',
element: <AuthenticationPage />,
action: authAction,
},
{
path: '/app/',
element: <AppLayout />,
errorElement: <ErrorPage />,
children: [
{
index: true,
element: <Postings />,
},
{
path: 'postings',
element: <Postings />,
},
{
path: 'postings/:postingsId',
element: <PostingDetailsPage />,
},
{
path: 'workforce',
element: <Workforce />,
},
{
path: 'reports',
element: <Reports />,
},
{
path: 'enterprise',
element: <Enterprise />,
},
],
},
]);
function App() {
return <RouterProvider router={router}></RouterProvider>;
}
export default App;
import { Form, Link, useSearchParams } from 'react-router-dom';
import classes from './auth.module.css';
function AuthForm() {
// object that contains params, funct that sets params
const [searchParams, setSearchParams] = useSearchParams();
const isLogin = searchParams.get('mode') === 'login';
return (
<>
<Form className={classes.form}>
<Link to="/">
<div className={classes.logo}>Bounty Jobs</div>
</Link>
<h1>{isLogin ? 'Log in' : 'Create account'}</h1>
<hr />
<br />
<div className="inputs">
<p>
<label htmlFor="email">Email</label>
<br />
<input id="email" type="email" name="email" required />
</p>
<br />
<p>
<label htmlFor="image">Password</label>
<br />
<input id="password" type="password" name="password" required />
</p>
</div>
<br />
<div className={classes.actions}>
<button>{isLogin ? 'Login' : 'Create'}</button>
</div>
<br />
<div className={classes.actions}>
Goto:
<Link to={`?mode=${isLogin ? 'signup' : 'login'}`}>
{isLogin ? 'Create new user' : 'Login'}
</Link>
</div>
</Form>
</>
);
}
export default AuthForm;