diff --git a/.env.sample b/.env.sample index dcebeb324..10987c42b 100644 --- a/.env.sample +++ b/.env.sample @@ -31,5 +31,7 @@ NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321 NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0 NEXT_PUBLIC_API_ENDPOINT=http://localhost:8080 +# The mail used to send emails to users (recovery, confirm, signup, etc) +NEXT_PUBLIC_FROM_EMAIL=noreply@mail.app.supabase.io # Disable NextJs telemetry NEXT_TELEMETRY_DISABLED=1 diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 7508e18da..75eb762f0 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -23,6 +23,7 @@ env: # data generated by the harvester NEXT_PUBLIC_RAIN_DATA_URL: https://tsb-trees.s3.eu-central-1.amazonaws.com/weather_light.geojson.gz NODE_ENV: test + NEXT_PUBLIC_FROM_EMAIL: noreply@giessdenkiez.de on: push: diff --git a/pages/auth.tsx b/pages/auth.tsx index 26eef83dc..a8df00d0c 100644 --- a/pages/auth.tsx +++ b/pages/auth.tsx @@ -6,7 +6,10 @@ import { useSessionContext, useSupabaseClient, } from '@supabase/auth-helpers-react'; -import { SidebarAuth } from '../src/components/Sidebar/SidebarAuth'; +import { + SidebarAuth, + StyledSpacer, +} from '../src/components/Sidebar/SidebarAuth'; import { StyledFlexContainer, StyledFormRow } from '../src/components/Forms'; import { UserNotification, @@ -79,10 +82,13 @@ const AuthPage: Page = () => { {currentNotification && ( - + <> + {' '} + + )} diff --git a/src/__tests__/quotes.test.ts b/src/__tests__/quotes.test.ts new file mode 100644 index 000000000..4b55724bd --- /dev/null +++ b/src/__tests__/quotes.test.ts @@ -0,0 +1,22 @@ +import { quotesTag } from '../components/Quotes'; + +describe('quotesTag', () => { + test('wraps a single string in quotation marks', () => { + expect(quotesTag`hello`).toBe(`„hello“`); + }); + + test('wraps multiple strings in quotation marks', () => { + const world = 'world'; + expect(quotesTag`hello ${world} ${23}`).toBe( + `„hello world 23“` + ); + }); + + test('returns an empty string when provided an empty array', () => { + expect(quotesTag``).toBe(`„“`); + }); + test('should work with undefined and null', () => { + expect(quotesTag`${undefined}`).toBe(`„undefined“`); + expect(quotesTag`hello ${null}`).toBe(`„hello null“`); + }); +}); diff --git a/src/components/NonVerfiedMailMessage/index.tsx b/src/components/NonVerfiedMailMessage/index.tsx index e9b4f481b..b0028fbe2 100644 --- a/src/components/NonVerfiedMailMessage/index.tsx +++ b/src/components/NonVerfiedMailMessage/index.tsx @@ -1,14 +1,15 @@ import React, { FC } from 'react'; import Paragraph from '../Paragraph'; +import { Quotes } from '../Quotes'; export const NonVerfiedMailMessage: FC = () => { return ( Du hast deine E-Mail Adresse noch nicht verifiziert. Bitte wirf einen - Blick in dein Postfach, ob du eine E-Mail von - “noreply@mail.app.supabase.io“ erhalten hast und klicke auf - den enthaltenen Link, um dies zu tun. Vielleicht sind wir auch im - Spam-Ordner gelandet? + Blick in dein Postfach, ob du eine E-Mail von{' '} + {process.env.NEXT_PUBLIC_FROM_EMAIL} erhalten hast und + klicke auf den enthaltenen Link, um dies zu tun. Vielleicht sind wir auch + im Spam-Ordner gelandet? ); }; diff --git a/src/components/Quotes/index.tsx b/src/components/Quotes/index.tsx new file mode 100644 index 000000000..d7d042bb5 --- /dev/null +++ b/src/components/Quotes/index.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +/** + * Use typografically correct quotes for german + */ +export const Quotes: React.FC = ({ children }) => { + return „{children}“; +}; +/** + * Returns a formatted string containing the provided strings wrapped in quotation marks. + * + */ + +type InterpolationItem = string | number | boolean | undefined | null; + +export function quotesTag( + strings: TemplateStringsArray, + ...values: InterpolationItem[] +): string { + let result = ''; + for (let i = 0; i < strings.length; i++) { + result += strings[i]; + if (i < values.length) { + const value = String(values[i]); + result += `${value}`; + } + } + return `„${result}“`; +} diff --git a/src/components/Sidebar/SidebarAuth/index.tsx b/src/components/Sidebar/SidebarAuth/index.tsx index 4c95831be..e8d8c287f 100644 --- a/src/components/Sidebar/SidebarAuth/index.tsx +++ b/src/components/Sidebar/SidebarAuth/index.tsx @@ -1,7 +1,4 @@ -import { - useSessionContext, - useSupabaseClient, -} from '@supabase/auth-helpers-react'; +import { useSupabaseClient } from '@supabase/auth-helpers-react'; import React, { useState } from 'react'; import { AuthView } from '../../../../pages/auth'; import SidebarTitle from '../SidebarTitle'; @@ -11,6 +8,9 @@ import Router from 'next/router'; import { CredentialsData } from '../../../common/interfaces'; import { CredentialsForm } from '../../Forms/CredentialsForm'; import { SidebarLoading } from '../SidebarLoading'; +import styled from 'styled-components'; +import Paragraph from '../../Paragraph'; +import { Quotes, quotesTag } from '../../Quotes'; enum titles { signin = 'Anmelden', @@ -20,6 +20,11 @@ enum titles { change = 'Passwort ändern', } +export const StyledSpacer = styled.div` + padding: 10px; + height: 1px; +`; + export const SidebarAuth = ({ view, setView, @@ -56,7 +61,6 @@ export const SidebarAuth = ({ type: 'error', }); }); - // clearFields(); }; const handleSignUpSubmit = (event: React.FormEvent) => { event.preventDefault(); @@ -67,7 +71,6 @@ export const SidebarAuth = ({ type: 'error', }); }); - // clearFields(); }; const handleRecoverySubmit = (event: React.FormEvent) => { @@ -106,18 +109,19 @@ export const SidebarAuth = ({ message: 'Benutzer bereits registriert', type: 'error', }); - console.error('User already registered'); setView('signin'); return; } throw error; } - if (data.user) { + if (!data.user) { setNotification({ - message: - 'Überprüfe deine E-Mails nach einem Link um deinen Account zu bestätigen', - type: 'success', + message: `Eine E-Mail an "${email}" konnte nicht verschickt werden. Versuch es erneut`, + type: 'error', }); + setView('signup'); + } + if (data.user) { setView('confirm'); } }; @@ -175,8 +179,7 @@ export const SidebarAuth = ({ } if (data) { setNotification({ - message: - 'Überprüfe deine E-Mails nach einem Link um dein Passwort zu ändern', + message: `Überprüfe deine E-Mail ${quotesTag`${email}`} nach einem Link um dein Passwort zu ändern`, type: 'success', }); } @@ -241,10 +244,26 @@ export const SidebarAuth = ({ ); break; } + case 'confirm': { + form = ( + + Überprüfe dein E-Mail Postfach für {formData.email}{' '} + nach einer E-Mail von{' '} + {process.env.NEXT_PUBLIC_FROM_EMAIL} mit einem Link + um deinen Account zu bestätigen. + + ); - default: - form = null; - linkText = null; + linkText = ( + Router.push('/about')} + /> + ); + } } if (isLoading) { @@ -257,12 +276,15 @@ export const SidebarAuth = ({ {form}
{linkText} - {view !== 'recovery' && ( - setView('recovery')} - /> + {view !== 'recovery' && view !== 'confirm' && ( + <> + + setView('recovery')} + /> + )}