UX improvements

Description

This version includes changes in the login process and small improvements on the movie detail page regarding the likes. In addition the database was transfered from Render to the new Vercel Postgres for better performance.

Changes

In this version small improvements to improve the user experience have been made, they include the following:

• Add Cloudflare Turnstile Captcha
• Vercel Postgres Database

Bug fixes:

• Likes update after liking by using a reactive statement

Features

✅ Add CF Turnstile Captcha to increase security 👮
✅ Vercel Postgres 🔐
✅ Updated like count after liking a movie 👍🏼

Code

Explanation of how the captcha works.

login/+page.svelte

<script>
    import { Turnstile } from 'svelte-turnstile'

    export let form
</script>

<!--Include the Turnstile script in the HTML head-->
<svelte:head>
   <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
</svelte:head>

<!--Add the Turnstile component to the form-->
<form>
    [...]
    <Turnstile siteKey="mySiteKey" theme="light" data-size="compact"/>
</form>

<!--Include an error message for the failed captcha-->
{#if form?.captcha}
    <p class="error">Captcha failed: {form?.error}</p>
{/if}

login/+page.server.ts

// Include the function given in the documentation of svelte-turnstile
async function validateToken(token: string, secret: string) {
    [...]
}

// Change the login method to check for a valid token
const login: Action =async ({ cookies, request}) => {
    const data = await request.formData()
    [...]

    const token = data.get('cf-turnstile-response')
    // Call the validateToken function as included above
    const { success, error } = await validateToken(token, SECRET_KEY)
    if (!success) {
        return fail(400, { captcha: true, error })
    }

    // If everything is ok continue to run the login

}

---

Commits: Version 0.2.2 (1) Version 0.2.2 (2) Version 0.2.2 (3)

Published: 2023-04-19