Merge pull request #577 from technologiestiftung/fix/auth-confirm

technologiestiftung · May 10, 2023 · 35f20e0 · 35f20e0
2 parents 9f77aef + dd82aa0
commit 35f20e0
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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 = () => {
         <StyledFlexContainer>
           <StyledFormRow>
             {currentNotification && (
-              <UserNotification
-                type={currentNotification.type}
-                message={currentNotification.message}
-              />
+              <>
+                <StyledSpacer />{' '}
+                <UserNotification
+                  type={currentNotification.type}
+                  message={currentNotification.message}
+                />
+              </>
             )}
           </StyledFormRow>
         </StyledFlexContainer>

diff --git a/src/__tests__/quotes.test.ts 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(`&bdquo;hello&ldquo;`);
+  });
+
+  test('wraps multiple strings in quotation marks', () => {
+    const world = 'world';
+    expect(quotesTag`hello ${world} ${23}`).toBe(
+      `&bdquo;hello world 23&ldquo;`
+    );
+  });
+
+  test('returns an empty string when provided an empty array', () => {
+    expect(quotesTag``).toBe(`&bdquo;&ldquo;`);
+  });
+  test('should work with undefined and null', () => {
+    expect(quotesTag`${undefined}`).toBe(`&bdquo;undefined&ldquo;`);
+    expect(quotesTag`hello ${null}`).toBe(`&bdquo;hello null&ldquo;`);
+  });
+});
diff --git 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 (
     <Paragraph>
       Du hast deine E-Mail Adresse noch nicht verifiziert. Bitte wirf einen
-      Blick in dein Postfach, ob du eine E-Mail von
-      &ldquo;noreply@mail.app.supabase.io&ldquo; 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{' '}
+      <Quotes>{process.env.NEXT_PUBLIC_FROM_EMAIL}</Quotes> erhalten hast und
+      klicke auf den enthaltenen Link, um dies zu tun. Vielleicht sind wir auch
+      im Spam-Ordner gelandet?
     </Paragraph>
   );
 };
diff --git a/src/components/Quotes/index.tsx 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 <span>&bdquo;{children}&ldquo;</span>;
+};
+/**
+ * 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 `&bdquo;${result}&ldquo;`;
+}
diff --git 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<HTMLFormElement>) => {
     event.preventDefault();
@@ -67,7 +71,6 @@ export const SidebarAuth = ({
         type: 'error',
       });
     });
-    // clearFields();
   };
 
   const handleRecoverySubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -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 = (
+        <Paragraph>
+          Überprüfe dein E-Mail Postfach für <Quotes>{formData.email}</Quotes>{' '}
+          nach einer E-Mail von{' '}
+          <Quotes>{process.env.NEXT_PUBLIC_FROM_EMAIL}</Quotes> mit einem Link
+          um deinen Account zu bestätigen.
+        </Paragraph>
+      );
 
-    default:
-      form = null;
-      linkText = null;
+      linkText = (
+        <CredentialsSubline
+          text={
+            'Dir ist langweilig bis dahin? Dann lies etwas über Gieß den Kiez!'
+          }
+          aText={'Hier klicken'}
+          onClick={() => Router.push('/about')}
+        />
+      );
+    }
   }
 
   if (isLoading) {
@@ -257,12 +276,15 @@ export const SidebarAuth = ({
       {form}
       <div>
         {linkText}
-        {view !== 'recovery' && (
-          <CredentialsSubline
-            text={' Oh nein. Du hast dein '}
-            aText={'Passwort vergessen?'}
-            onClick={() => setView('recovery')}
-          />
+        {view !== 'recovery' && view !== 'confirm' && (
+          <>
+            <StyledSpacer />
+            <CredentialsSubline
+              text={' Oh nein. Du hast dein '}
+              aText={'Passwort vergessen?'}
+              onClick={() => setView('recovery')}
+            />
+          </>
         )}
       </div>
     </>