[F] Add resend verification email button

client/src/api/index.js

@@ -49,3 +49,4 @@ export journalsAPI from "./resources/journals";
 export journalIssuesAPI from "./resources/journalIssues";
 export journalVolumesAPI from "./resources/journalVolumes";
 export ingestionSourcesAPI from "./resources/ingestionSources";
+export emailConfirmationsAPI from "./resources/emailConfirmations";

client/src/api/resources/emailConfirmations.js

@@ -0,0 +1,9 @@
+export default {
+  update(id) {
+    return {
+      endpoint: `/api/v1/email_confirmations/${id}`,
+      method: "PUT",
+      options: {}
+    };
+  }
+};

client/src/config/app/locale/en-US/json/frontend/forms.json

@@ -187,7 +187,10 @@
       "terms_header": "First things first...",
       "accept_checkbox_label": "I agree to {{installationName}}'s <privacyLink>privacy policy</privacyLink> and <termsLink>terms and conditions.</termsLink>",
       "accept_checkbox_label_truncated": "I agree to {{installationName}}'s <termsLink>terms and conditions.</termsLink>",
-      "not_verified_warning": "It looks like you haven't verified your email. You will not be able to engage with projects or reading groups on Manifold until you do so."
+      "not_verified_warning": "It looks like you haven't verified your email. You will not be able to engage with projects or reading groups on Manifold until you do so.",
+      "resend_verification": "Resend Verification Email",
+      "email_success_notification": "Verification email sent!",
+      "email_failure_notiication": "Verification email could not be sent. Please try again."
     },
     "attribute_map": {
       "cancel": "Cancel mapping of {{name}} to {{mapping}}",

client/src/global/components/sign-in-up/EditProfileForm/Greeting/index.js

@@ -2,9 +2,10 @@ import React, { useContext } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import PropTypes from "prop-types";
 import { FormContext } from "helpers/contexts";
+import ResendEmailConfirm from "../ResendEmailConfirm";
 import * as Styled from "./styles";
 
-export default function ProfileGreeting({ mode, warn }) {
+export default function ProfileGreeting({ mode, warn, userId, hideOverlay }) {
   const formData = useContext(FormContext);
   const nickname = formData.getModelValue("attributes[nickname]");
 
@@ -30,9 +31,12 @@ export default function ProfileGreeting({ mode, warn }) {
         />
       </Styled.Heading>
       {warn && (
-        <Styled.NotVerifiedWarning>
-          {t("forms.signin_overlay.not_verified_warning")}
-        </Styled.NotVerifiedWarning>
+        <Styled.NotVerifiedWrapper>
+          <Styled.NotVerifiedWarning>
+            {t("forms.signin_overlay.not_verified_warning")}
+          </Styled.NotVerifiedWarning>
+          <ResendEmailConfirm id={userId} hideOverlay={hideOverlay} />
+        </Styled.NotVerifiedWrapper>
       )}
     </>
   );
@@ -42,5 +46,7 @@ ProfileGreeting.displayName = "Global.SignInUp.EditProfileForm.Greeting";
 
 ProfileGreeting.propTypes = {
   mode: PropTypes.oneOf(["new", "existing"]),
-  nickname: PropTypes.string
+  userId: PropTypes.string,
+  hideOverlay: PropTypes.func,
+  warn: PropTypes.bool
 };

client/src/global/components/sign-in-up/EditProfileForm/Greeting/styles.js

@@ -18,6 +18,14 @@ export const Heading = styled.h4`
 
 export const NotVerifiedWarning = styled.span`
   display block;
-  margin-block-end: 25px;
   color: var(--error-color);
 `;
+
+export const NotVerifiedWrapper = styled.div`
+  margin-block-end: 60px;
+
+  > * + * {
+    margin-block-start: 20px;
+    width: 100%;
+  }
+`;

client/src/global/components/sign-in-up/EditProfileForm/ResendEmailConfirm/index.js

@@ -0,0 +1,49 @@
+import React, { useCallback } from "react";
+import PropTypes from "prop-types";
+import { useApiCallback, useNotification } from "hooks";
+import { emailConfirmationsAPI } from "api";
+import { useTranslation } from "react-i18next";
+
+export default function ResendEmailConfirmation({ id, hideOverlay }) {
+  const { t } = useTranslation();
+  const triggerConfirm = useApiCallback(emailConfirmationsAPI?.update);
+
+  const notifyEmailSent = useNotification(() => ({
+    level: 0,
+    id: `CURRENT_USER_VERIFICATION_EMAIL_SENT`,
+    heading: t("forms.signin_overlay.email_success_notification"),
+    expiration: 3000
+  }));
+
+  const onClick = useCallback(
+    async e => {
+      e.preventDefault();
+
+      try {
+        await triggerConfirm(id);
+        notifyEmailSent();
+        if (hideOverlay) hideOverlay();
+      } catch (err) {
+        if (hideOverlay) hideOverlay();
+      }
+    },
+    [id, triggerConfirm, notifyEmailSent, hideOverlay]
+  );
+
+  return (
+    <button
+      className="button-secondary button-secondary--outlined button-secondary--color-white"
+      onClick={onClick}
+    >
+      {t("forms.signin_overlay.resend_verification")}
+    </button>
+  );
+}
+
+ResendEmailConfirmation.displayName =
+  "Global.SignInUp.EditProfileForm.ResendEmailConfirm";
+
+ResendEmailConfirmation.propTypes = {
+  id: PropTypes.string,
+  hideOverlay: PropTypes.func
+};

client/src/global/components/sign-in-up/EditProfileForm/index.js

@@ -81,7 +81,12 @@ export default function EditProfileForm({ hideOverlay, mode }) {
         formatData={formatAttributes}
         update={updateUser}
       >
-        <Greeting mode={mode} warn={!currentUser.attributes.established} />
+        <Greeting
+          mode={mode}
+          warn={!currentUser.attributes.established}
+          userId={currentUser.id}
+          hideOverlay={hideOverlay}
+        />
         <h2 className="screen-reader-text">
           {t("forms.signin_overlay.update_sr_title")}
         </h2>