fix/auth confirm

.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

.github/workflows/test.yml

@@ -22,6 +22,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:

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>

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>
   );
 };

src/components/Quotes/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * Use typografically correct quotes for german
+ */
+export const Quotes: React.FC = ({ children }) => {
+  return <span>&bdquo;{children}&ldquo;</span>;
+};

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 } 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,
@@ -114,8 +119,7 @@ export const SidebarAuth = ({
     }
     if (data.user) {
       setNotification({
-        message:
-          'Überprüfe deine E-Mails nach einem Link um deinen Account zu bestätigen',
+        message: `Eine E-Mail an "${email}" wurde verschickt`,
         type: 'success',
       });
       setView('confirm');
@@ -241,10 +245,31 @@ export const SidebarAuth = ({
       );
       break;
     }
+    case 'confirm': {
+      form = (
+        <Paragraph>
+          Überprüfe deine E-Mails Postfach nach einer E-Mail von{' '}
+          <Quotes>{process.env.NEXT_PUBLIC_FROM_EMAIL}</Quotes> mit einem Link
+          um deinen Account zu bestätigen.
+        </Paragraph>
+      );
+
+      linkText = (
+        <CredentialsSubline
+          text={
+            'Dir ist langweilig bis dahin? Dann lies etwas über Gieß den Kiez!'
+          }
+          aText={'Hier klicken'}
+          onClick={() => Router.push('/about')}
+        />
+      );
+    }
 
-    default:
-      form = null;
-      linkText = null;
+    // default: {
+    //   console.log('default');
+    //   form = null;
+    //   linkText = null;
+    // }
   }
 
   if (isLoading) {
@@ -254,15 +279,19 @@ export const SidebarAuth = ({
   return (
     <>
       <SidebarTitle>{titles[view]}</SidebarTitle>
+      {console.log(form)}
       {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>
     </>