update invitedForm

packages/app/src/components/InvitedForm.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
@@ -17,6 +17,8 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
   const { t } = useTranslation();
   const { data: user } = useCurrentUser();
 
+  const [loginErrors, setLoginErrors] = useState<Error[]>([]);
+
   const { invitedFormUsername, invitedFormName } = props;
 
   const submitHandler = useCallback(async(e) => {
@@ -37,11 +39,11 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
     };
 
     try {
-      await apiv3Post('/invited/activateInvited', { invitedForm });
+      const res = await apiv3Post('/invited', { invitedForm });
       window.location.href = '/';
     }
     catch (err) {
-      // TODO: return error log
+      setLoginErrors(err);
     }
   }, []);
 
@@ -51,10 +53,26 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
 
   return (
     <div className="noLogin-dialog p-3 mx-auto" id="noLogin-dialog">
-      <p className="alert alert-success">
-        <strong>{ t('invited.discription_heading') }</strong><br></br>
-        <small>{ t('invited.discription') }</small>
-      </p>
+
+      {
+        loginErrors != null && loginErrors.length > 0 ? (
+          <p className="alert alert-danger">
+            {loginErrors.map((err, index) => {
+              return (
+                <span key={index}>
+                  {t(`message.${err.message}`)}<br/>
+                </span>
+              );
+            })}
+          </p>
+        ) : (
+          <p className="alert alert-success">
+            <strong>{ t('invited.discription_heading') }</strong><br></br>
+            <small>{ t('invited.discription') }</small>
+          </p>
+        )
+      }
+
       <form role="form" onSubmit={submitHandler} id="invited-form">
         {/* Email Form */}
         <div className="input-group">