Merge pull request 'Define a basic login form with redirection to the Dashboard' (#127) from login-register-forms into main

Reviewed-on: #127

app/[slug]/page.tsx

@@ -0,0 +1,30 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+'use client'; 
+import Link from 'next/link';
+import styles from '@/app/ui/home.module.css';
+import LoginForm from '@/app/ui/components/login-form';
+
+
+
+export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
+
+  localStorage.setItem('slug', (await params).slug)
+  return (
+    <main className="flex min-h-screen flex-col p-6">
+      <div className="flex flex-row">
+        <div className="w-1/2">
+
+          Already have an account? Sign in
+
+          <LoginForm />
+        </div>
+
+        <div className="w-1/2">
+          Don't have an account? Register now!
+        </div>
+      </div>
+
+    </main>
+  );
+}

app/api/authentication.tsx

@@ -0,0 +1,36 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { getCsrfToken, getSlug } from '@/app/lib/utils';
+import { User } from '@/app/lib/definitions';
+
+export function login({ email, password, onLogin }: { email: string, password: string, onLogin: (user: User) => void }) {
+  console.log(email, password);
+  return fetch(`/api/${getSlug()}/users/sign_in`, {
+    method: 'POST',
+    body: JSON.stringify({ user: { email, password } }),
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+      'X-CSRF-TOKEN': getCsrfToken(),
+    }
+  })
+    .then((response) => response.json())
+    .then((data: any) => {
+      console.log(data);
+      onLogin({
+        id: data.id || '',
+        email: data.email || '',
+      });
+    })
+    .catch((error) => console.error(error));
+}
+
+export function logout({ onLogout }: { onLogout: () => void }) {
+  fetch(`/api/${getSlug()}/users/sign_out`, {
+    method: 'DELETE',
+    headers: {
+      'X-CSRF-TOKEN': getCsrfToken(),
+    }
+  }).then(onLogout)
+    .catch((error) => console.error(error));
+}

app/api/expenses.tsx

@@ -1,10 +1,10 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { Expense } from '@/app/lib/definitions';
-import { getCsrfToken } from '@/app/lib/utils';
+import { getCsrfToken, getSlug } from '@/app/lib/utils';
 
 export function loadExpenses(onLoad?: (expenses: Expense[]) => void) {
-  fetch("/api/default/expenses")
+  fetch(`/api/${getSlug()}/expenses`)
     .then((response) => response.json())
     .then((data) => {
       onLoad && onLoad(data.map((record: any) => {
@@ -21,7 +21,7 @@ export function loadExpenses(onLoad?: (expenses: Expense[]) => void) {
 }
 
 export function updateExpense(expense: Expense) {
-  fetch(`/api/default/expenses/${expense.id}`,
+  fetch(`/api/${getSlug()}/expenses/${expense.id}`,
     {
       method: 'PUT',
       body: JSON.stringify({

app/api/groups.tsx

@@ -1,9 +1,10 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { Group } from '@/app/lib/definitions';
+import { getSlug } from '../lib/utils';
 
 export function loadGroups(onLoad?: (groups: Group[]) => void) {
-  fetch("/api/default/groups")
+  fetch(`/api/${getSlug()}/groups`)
     .then((response) => response.json())
     .then((data) => {
       onLoad && onLoad(data.map((record: any) => {

app/api/guests.tsx

@@ -1,10 +1,10 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { Guest } from '@/app/lib/definitions';
-import { getCsrfToken } from '@/app/lib/utils';
+import { getCsrfToken, getSlug } from '@/app/lib/utils';
 
 export function loadGuests(onLoad?: (guests: Guest[]) => void) {
-  fetch("/api/default/guests")
+  fetch(`/api/${getSlug()}/guests`)
     .then((response) => response.json())
     .then((data) => {
       onLoad && onLoad(data.map((record: any) => {
@@ -22,7 +22,7 @@ export function loadGuests(onLoad?: (guests: Guest[]) => void) {
 };
 
 export function updateGuest(guest: Guest) {
-  return fetch(`/api/default/guests/${guest.id}`,
+  return fetch(`/api/${getSlug()}/guests/${guest.id}`,
     {
       method: 'PUT',
       body: JSON.stringify({ guest: { name: guest.name, status: guest.status } }),
@@ -35,7 +35,7 @@ export function updateGuest(guest: Guest) {
 }
 
 export function createGuest(name: string, group_id: string, onCreate?: () => void) {
-  fetch("/api/default/guests", {
+  fetch(`/api/${getSlug()}/guests`, {
     method: 'POST',
     body: JSON.stringify({ name: name, group_id: group_id }),
     headers: {
@@ -51,7 +51,7 @@ export function createGuest(name: string, group_id: string, onCreate?: () => voi
 }
 
 export function destroyGuest(guest: Guest, onDestroy?: () => void) {
-  fetch(`/api/default/guests/${guest.id}`, {
+  fetch(`/api/${getSlug()}/guests/${guest.id}`, {
     method: 'DELETE',
     headers: {
       'X-CSRF-TOKEN': getCsrfToken(),

app/api/tableSimulations.tsx

@@ -1,9 +1,10 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { TableArrangement } from '@/app/lib/definitions';
+import { getSlug } from '../lib/utils';
 
 export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangement[]) => void) {
-  fetch('/api/default/tables_arrangements')
+  fetch(`/api/${getSlug()}/tables_arrangements`)
     .then((response) => response.json())
     .then((data) => {
       onLoad && onLoad(data.map((record: any) => {

app/lib/definitions.ts

@@ -54,3 +54,8 @@ export type guestsTable = {
   amount: number;
   status: 'pending' | 'paid';
 };
+
+export type User = {
+  id: string;
+  email: string;
+}

app/lib/utils.ts

@@ -6,3 +6,5 @@ export const getCsrfToken = () => {
       .find((row) => row.startsWith("csrf-token"))
       ?.split("=")[1] || 'unknown';
 }
+
+export const getSlug = () => localStorage.getItem('slug') || 'default';

app/page.tsx

@@ -1,12 +0,0 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
-
-import Link from 'next/link';
-import styles from '@/app/ui/home.module.css';
-
-export default function Page() {
-  return (
-    <main className="flex min-h-screen flex-col p-6">
-     
-    </main>
-  );
-}

app/ui/components/login-form.tsx

@@ -0,0 +1,51 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+'use client';
+
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+import { login } from '../../api/authentication';
+import { useState, useEffect } from 'react';
+import { classNames } from './button';
+import { useRouter } from 'next/navigation'
+import { User } from '../../lib/definitions';
+import { getSlug } from '@/app/lib/utils';
+
+export default function LoginForm() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const router = useRouter();
+
+  const [currentUser, setCurrentUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    localStorage.setItem('currentUser', JSON.stringify(currentUser));
+  }, [currentUser]);
+
+  return (
+    <div className="card flex justify-evenly py-5">
+      <FloatLabel>
+        <InputText id="email" type="email" className='rounded-sm' onChange={(e) => setEmail(e.target.value)} />
+        <label htmlFor="email">Email</label>
+      </FloatLabel>
+      <FloatLabel>
+        <InputText id="password" type="password" className='rounded-sm' onChange={(e) => setPassword(e.target.value)} />
+        <label htmlFor="password">Password</label>
+      </FloatLabel>
+      <button
+        className={classNames('primary')}
+        disabled={email.length == 0 || password.length == 0}
+        onClick={() => login({
+          email: email,
+          password: password,
+          onLogin: (user) => {
+            setCurrentUser(user);
+            router.push(`${getSlug()}/dashboard`)
+          }
+        })}>
+        Sign in
+      </button>
+    </div>
+  )
+}

app/ui/dashboard/nav-links.tsx

@@ -10,13 +10,14 @@ import {
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import clsx from 'clsx';
+import { getSlug } from '@/app/lib/utils';
 
 // Map of links to display in the side navigation.
 // Depending on the size of the application, this would be stored in a database.
 const links = [
-  { name: 'Guests', href: '/dashboard/guests', icon: UserGroupIcon },
+  { name: 'Guests', href: `/${getSlug()}/dashboard/guests`, icon: UserGroupIcon },
-  { name: 'Expenses', href: '/dashboard/expenses', icon: BanknotesIcon },
+  { name: 'Expenses', href: `/${getSlug()}/dashboard/expenses`, icon: BanknotesIcon },
-  { name: 'Table distributions', href: '/dashboard/tables', icon: RectangleGroupIcon },
+  { name: 'Table distributions', href: `/${getSlug()}/dashboard/tables`, icon: RectangleGroupIcon },
 ];
 
 

app/ui/dashboard/sidenav.tsx

@@ -1,30 +1,46 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
+'use client';
+
 import Link from 'next/link';
 import NavLinks from '@/app/ui/dashboard/nav-links';
 import { PowerIcon } from '@heroicons/react/24/outline';
 import { gloriaHallelujah } from '@/app/ui/fonts';
+import { logout } from '@/app/api/authentication';
+import { useRouter } from 'next/navigation';
+import { getSlug } from '@/app/lib/utils';
 
 export default function SideNav() {
+  const router = useRouter();
+
   return (
     <div className="flex h-full flex-col px-3 py-4 md:px-2">
       <Link
         className="mb-2 flex h-20 items-center justify-start rounded-md bg-blue-600 p-4 md:h-20"
         href="/dashboard/guests"
       >
-        <div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased` }>
+        <div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased`}>
           <h1>Wedding Planner</h1>
         </div>
       </Link>
       <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
         <NavLinks />
         <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
-        <form>
+        <span>Logged in as {JSON.parse(localStorage.getItem('currentUser') || '{}').email}</span>
-          <button className="flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
+        <button
+          className="flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
+          onClick={() => {
+            logout({
+              onLogout: () => {
+                localStorage.clear();
+                router.push(`/${getSlug()}`);
+              }
+            });
+          }}
+        >
           <PowerIcon className="w-6" />
           <div className="hidden md:block">Sign Out</div>
         </button>
-        </form>
       </div>
     </div>
   );

tests/guests.spec.ts

@@ -65,7 +65,7 @@ const mockGroupsAPI = ({ page }: { page: Page }) => {
 test('should display the list of guests', async ({ page }) => {
   await mockGuestsAPI({ page });
 
-  await page.goto('/dashboard/guests');
+  await page.goto('/default/dashboard/guests');
 
   await expect(page.getByRole('tab', { name: 'Groups' })).toBeVisible();
   await expect(page.getByRole('tab', { name: 'Guests' })).toBeVisible();
@@ -90,7 +90,7 @@ test('should display the list of guests', async ({ page }) => {
 test('should display the list of groups', async ({ page }) => {
   await mockGroupsAPI({ page });
 
-  await page.goto('/dashboard/guests');
+  await page.goto('/default/dashboard/guests');
   await page.getByRole('tab', { name: 'Groups' }).click();
 
   await expect(page.getByText('There are 2 elements in the list')).toBeVisible();