Develop (#54)

* Close burgermenu after search

* Set instructions white/space paragraph to pre-line to preserve newline characters

* Sett the x-api-key header on the api calls

* Update security headers sent in hooks.server.ts and update Dockerfile with api key

* Correct X-Content-Type-Options header value

* Slugify recipe name in RecipeCard

* Use replaceAll

* Layout adjustments

* Set header opacity to 0.95

* Add header bottom border when burgermenu is open

* Deslugify recipe name when not found

* Add see more recipes button in home

* Set navbar max height to 100vh in mobile to fix not being able to submit button on smaller heights

* Use pnpm instead of npm

* Update height of images

* Squashed commit of the following:

commit 5c8a416
Author: Luz <luzojeda@proton.me>
Date:   Fri Apr 5 15:57:58 2024 -0300

    Add space after Preparación in individual recipe page

commit 923799c
Author: Luz <luzojeda@proton.me>
Date:   Fri Apr 5 15:47:54 2024 -0300

    Change laptop grid to 4

commit adf8c38
Author: Luz Ojeda <luzojeda@proton.me>
Date:   Fri Apr 5 15:28:36 2024 -0300

    Develop (#39)

    * Close burgermenu after search

    * Set instructions white/space paragraph to pre-line to preserve newline characters

    * Sett the x-api-key header on the api calls

    * Update security headers sent in hooks.server.ts and update Dockerfile with api key

    * Correct X-Content-Type-Options header value

    * Slugify recipe name in RecipeCard

    * Use replaceAll

    * Layout adjustments

    * Set header opacity to 0.95

commit af71728
Author: Luz Ojeda <luzojeda@proton.me>
Date:   Wed Apr 3 18:33:44 2024 -0300

    Develop (#35)

    * Close burgermenu after search

    * Set instructions white/space paragraph to pre-line to preserve newline characters

    * Sett the x-api-key header on the api calls

    * Update security headers sent in hooks.server.ts and update Dockerfile with api key

    * Correct X-Content-Type-Options header value

    * Slugify recipe name in RecipeCard

    * Use replaceAll

    * Layout adjustments

* Format

* Squashed commit of the following:

commit 5c8a416
Author: Luz <luzojeda@proton.me>
Date:   Fri Apr 5 15:57:58 2024 -0300

    Add space after Preparación in individual recipe page

commit 923799c
Author: Luz <luzojeda@proton.me>
Date:   Fri Apr 5 15:47:54 2024 -0300

    Change laptop grid to 4

commit adf8c38
Author: Luz Ojeda <luzojeda@proton.me>
Date:   Fri Apr 5 15:28:36 2024 -0300

    Develop (#39)

    * Close burgermenu after search

    * Set instructions white/space paragraph to pre-line to preserve newline characters

    * Sett the x-api-key header on the api calls

    * Update security headers sent in hooks.server.ts and update Dockerfile with api key

    * Correct X-Content-Type-Options header value

    * Slugify recipe name in RecipeCard

    * Use replaceAll

    * Layout adjustments

    * Set header opacity to 0.95

commit af71728
Author: Luz Ojeda <luzojeda@proton.me>
Date:   Wed Apr 3 18:33:44 2024 -0300

    Develop (#35)

    * Close burgermenu after search

    * Set instructions white/space paragraph to pre-line to preserve newline characters

    * Sett the x-api-key header on the api calls

    * Update security headers sent in hooks.server.ts and update Dockerfile with api key

    * Correct X-Content-Type-Options header value

    * Slugify recipe name in RecipeCard

    * Use replaceAll

    * Layout adjustments

* Set navbar overflow-y to auto

* Add fly.yml

* Set package version to 1.0.0, change recipe page layout

* Change package version to 1.1.0 to account for the recipe creation functionality plus protected route

* Most basic happy path recipe creation page implementing Basic Auth for protected routes as well

* Add isotipo

* Add type prop to PrimaryButton and set width default to auto

* Update RecipesSearchForm

* Add errors array of objects property to ApiError type

* Adjust footer logotipo alignment in mobile/tablet

* Improve response of recipe creation

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cook-web",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

src/app.scss

@@ -53,12 +53,21 @@ footer {
 	}
 }
 
-input {
+input[type='text'],
+input[type='number'],
+textarea {
+	appearance: none;
 	background-color: $grey100;
+	box-shadow: inset 0 2px 2px hsla(0, 0%, 0%, 0.1);
+	border-radius: 5px;
+	border: 1px solid #cccccc;
+	padding: 6px 8px;
+	-webkit-appearance: none;
 }
 
-input[type='text'] {
-	box-shadow: inset 0 2px 2px hsla(0, 0%, 0%, 0.1);
+input[type='number'] {
+	padding: 6px;
+	width: 38px;
 }
 
 *:focus-visible {
@@ -72,6 +81,7 @@ input[type='text'] {
 	color: $grey100;
 }
 
-input[type='checkbox'] {
+input[type='checkbox'],
+input[type='radio'] {
 	accent-color: $primaryColor;
 }

src/hooks.server.ts

@@ -1,13 +1,13 @@
-import type { Handle, HandleServerError } from '@sveltejs/kit';
+import { type Handle, type HandleServerError } from '@sveltejs/kit';
 import { logRecipesError } from './errorLogging';
 import { MESSAGES } from './constants';
 import type { ApiError } from '$lib/types/ApiError';
+import { env } from '$env/dynamic/private';
 
 const securityHeaders = {
 	'Cross-Origin-Embedder-Policy': 'require-corp',
 	'Cross-Origin-Opener-Policy': 'same-origin',
 	'Strict-Transport-Security': 'max-age=31536000',
-	// [...],
 	'Referrer-Policy': 'no-referrer-when-downgrade',
 	'X-Content-Type-Options': 'nosniff',
 	'X-Frame-Options': 'DENY'
@@ -33,6 +33,19 @@ export const handleError: HandleServerError = async ({ event, error }) => {
 };
 
 export const handle: Handle = async ({ event, resolve }) => {
+	if (event.url.pathname.startsWith('/admin')) {
+		const auth = event.request.headers.get('Authorization');
+
+		if (auth !== `Basic ${btoa(env.ADMIN_LOGIN)}`) {
+			return new Response('Not authorized', {
+				status: 401,
+				headers: {
+					'WWW-Authenticate': 'Basic realm="User Visible Realm", charset="UTF-8"'
+				}
+			});
+		}
+	}
+
 	const response = await resolve(event);
 	Object.entries(securityHeaders).forEach(([header, value]) => response.headers.set(header, value));
 

src/lib/components/Footer.svelte

@@ -1,11 +1,12 @@
 <script>
 	import { page } from '$app/stores';
 	import { GitHubMark, Icon } from '$lib';
+	import isotipo from '$lib/assets/isotipo.svg';
 </script>
 
 <footer class="container">
 	<div class="section">
-		<h3>COOK</h3>
+		<h3 class="logotipo"><img alt="" src={isotipo} width="24" /> Cook</h3>
 		<p>
 			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget sapien venenatis massa
 			fringilla accumsan. Etiam cursus dapibus purus, eget iaculis lacus convallis quis. Sed
@@ -115,4 +116,17 @@
 	* :global(.icon-margin-right) {
 		margin-right: 6px;
 	}
+
+	.logotipo {
+		align-items: center;
+		display: flex;
+
+		img {
+			margin-right: 6px;
+		}
+
+		@media (max-width: $tabletBreakpoint) {
+			justify-content: center;
+		}
+	}
 </style>

src/lib/components/Navbar.svelte

@@ -1,14 +1,14 @@
 <script>
 	import { BurgerMenu, Icon } from '$lib';
-	import logo from '$lib/assets/logo.png';
+	import isotipo from '$lib/assets/isotipo.svg';
 	import { burgerMenuStore } from '../../stores/burgerMenu';
 	import NavLinks from './NavLinks.svelte';
 </script>
 
 <nav>
 	<div class="main-nav flex-center">
-		<a class="flex-center logo" href="/">
-			<img alt="" src={logo} width="32" />
+		<a class="flex-center logotipo" href="/">
+			<img alt="" src={isotipo} width="48" />
 			COOK
 		</a>
 		<div class="nav-links flex-center">
@@ -32,6 +32,7 @@
 
 <style lang="scss">
 	@import '../../sass/variables.scss';
+	@import '../../sass/colors.scss';
 
 	nav {
 		padding: 0 16px;
@@ -70,8 +71,8 @@
 		justify-content: space-between;
 	}
 
-	.logo {
-		color: inherit;
+	.logotipo {
+		color: $darkPrimaryColor;
 		text-decoration: none;
 		font-weight: bold;
 

src/lib/components/PrimaryButton.svelte

@@ -5,10 +5,11 @@
 	export let disabled = false;
 	export let loading = false; // Use local state since we not always want it to sync with a global/different one
 	export let onClick: MouseEventHandler<HTMLButtonElement> | undefined = undefined;
-	export let width: string;
+	export let width = 'auto';
+	export let type: 'button' | 'reset' | 'submit' | null | undefined = 'button';
 </script>
 
-<button {disabled} on:click={onClick} style="width: {width}">
+<button disabled={disabled || loading} on:click={onClick} {type} style="width: {width}">
 	{#if loading}
 		<CircularLoading --background="#a19887" --circle-width="30px" />
 	{:else}

src/lib/components/RecipesSearchForm.svelte

@@ -80,11 +80,12 @@
 	<label for="vegetarian">Solo vegetarianas</label>
 
 	{#if $page.url.pathname !== '/'}
-		<PrimaryButton disabled={$recipes.loading} {loading} onClick={onButtonClick} width="100%">
+		<PrimaryButton {loading} onClick={onButtonClick} width="100%">
 			Buscar
 		</PrimaryButton>
 	{:else}
 		<a
+			class="non-text-anchor-element"
 			href={buildRecipesBrowserUrl({
 				name: $recipes.name,
 				ingredients: $recipes.ingredients,

src/lib/components/TextInput.svelte

@@ -17,10 +17,4 @@
 	label {
 		margin-bottom: 6px;
 	}
-
-	input {
-		border-radius: 5px;
-		border: 1px solid #cccccc;
-		padding: 6px 8px;
-	}
 </style>

src/lib/types/ApiError.d.ts

@@ -3,6 +3,7 @@ type ApiError = {
 	title?: string | null;
 	status?: number | null;
 	detail?: string | null;
+	errors?: object[];
 };
 
 export { ApiError };

src/lib/types/RecipesStore.d.ts

@@ -6,4 +6,4 @@ type RecipesStore = {
 	pagination?: Pagination | null;
 };
 
-export { RecipesStore, RecipeParameters };
+export { RecipesStore };

src/routes/admin/crear-receta/+page.server.ts

@@ -0,0 +1,42 @@
+import type { Actions } from './$types';
+import { env } from '$env/dynamic/private';
+import { fail } from '@sveltejs/kit';
+
+export const actions = {
+	default: async ({ request }) => {
+		const data = await request.formData();
+		const recipeName = data.get('name');
+
+		const body = {
+			name: recipeName,
+			summary: data.get('summary') || null,
+			ingredients: data.getAll('ingredients'),
+			instructions: data.get('instructions'),
+			preparationTime: data.get('preparationTime') || null,
+			cookingTime: data.get('cookingTime') || null,
+			servings: data.get('servings') || null,
+			difficulty: data.get('difficulty'),
+			vegetarian: Boolean(data.get('vegetarian'))
+		};
+
+		const response = await fetch(`${env.API_URL}/recipes`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify(body)
+		});
+
+		const responseJson = await response.json();
+
+		if (response.status === 201) {
+			return { success: true, data: responseJson };
+		}
+
+		if (response.status === 409) {
+			return fail(response.status, { failure: true, message: `La receta con el nombre ${recipeName} ya existe` });
+		}
+
+		return fail(response.status);
+	}
+} satisfies Actions;