Added welcome email to new users

2026-09-22 13:39:35 +00:00 · 2022-12-26 09:39:32 -05:00
parent f642a46924
commit a4285df0ff
2 changed files with 80 additions and 45 deletions
--- a/backend/src/controllers/signupController.ts
+++ b/backend/src/controllers/signupController.ts
@@ -10,6 +10,7 @@ import {
 } from '../helpers/signup';
 import { issueTokens, createToken } from '../helpers/auth';
 import { INVITED, ACCEPTED } from '../variables';
+import axios from 'axios';

 /**
 * Signup step 1: Initialize account for user under email [email] and send a verification code
@@ -179,6 +180,21 @@ export const completeAccountSignup = async (req: Request, res: Response) => {

 		token = tokens.token;
 		refreshToken = tokens.refreshToken;
+
+		// sending a welcome email to new users
+		if (process.env.LOOPS_API_KEY) {
+			await axios.post("https://app.loops.so/api/v1/events/send", {
+				"email": email,
+				"eventName": "Sign Up",
+				"firstName": firstName,
+				"lastName": lastName
+			}, {
+				headers: {
+					"Accept": "application/json",
+					"Authorization": "Bearer " + process.env.LOOPS_API_KEY
+				},
+			});
+		}
 	} catch (err) {
 		Sentry.setUser(null);
 		Sentry.captureException(err);
--- a/frontend/pages/signup.tsx
+++ b/frontend/pages/signup.tsx
@@ -260,46 +260,49 @@ export default function SignUp() {

  // Step 1 of the sign up process (enter the email or choose google authentication)
  const step1 = (
-    <div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-8 md:px-6 mx-1 mb-48 md:mb-16 rounded-xl drop-shadow-xl">
-      <p className="text-4xl font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
-        {'Let\''}s get started
-      </p>
-      <div className="flex flex-col items-center justify-center w-full md:pb-2 max-h-24 max-w-md mx-auto pt-2">
+    <div>
+      <div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-8 md:px-6 mx-1 rounded-xl drop-shadow-xl">
+        <p className="text-4xl font-semibold flex justify-center text-primary">
+          {'Let\''}s get started
+        </p>
+        <div className="flex items-center justify-center w-5/6 md:w-full m-auto md:p-2 rounded-lg max-h-24 mt-4">
+          <InputField
+            label="Email"
+            onChangeHandler={setEmail}
+            type="email"
+            value={email}
+            placeholder=""
+            isRequired
+            error={emailError}
+            errorText={emailErrorMessage}
+            autoComplete="username"
+          />
+        </div>
+          {/* <div className='flex flex-row justify-left mt-4 max-w-md mx-auto'>
+            <Checkbox className="mr-4"/>
+            <p className='text-sm'>I do not want to receive emails about Infisical and its products.</p>
+          </div> */}
+        <div className="flex flex-col items-center justify-center w-5/6 md:w-full md:p-2 max-h-28 max-w-xs md:max-w-md mx-auto mt-4 md:mt-4 text-sm text-center md:text-left">
+          <p className="text-gray-400 mt-2 md:mx-0.5">
+            By creating an account, you agree to our Terms and have read and
+            acknowledged the Privacy Policy.
+          </p>
+          <div className="text-l mt-6 m-2 md:m-8 px-8 py-1 text-lg">
+            <Button text="Get Started" type="submit" onButtonPressed={emailCheck} size="lg" />
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center justify-center w-full md:pb-2 max-w-md mx-auto pt-2 mb-48 md:mb-16 mt-2">
        <Link href="/login">
          <button type="button" className="w-max pb-3 hover:opacity-90 duration-200">
-            <u className="font-normal text-md text-sky-500">
+            <u className="font-normal text-sm text-primary-500">
              Have an account? Log in
            </u>
          </button>
        </Link>
      </div>
-      <div className="flex items-center justify-center w-5/6 md:w-full m-auto md:p-2 rounded-lg max-h-24 mt-4">
-        <InputField
-          label="Email"
-          onChangeHandler={setEmail}
-          type="email"
-          value={email}
-          placeholder=""
-          isRequired
-          error={emailError}
-          errorText={emailErrorMessage}
-          autoComplete="username"
-        />
-      </div>
-        {/* <div className='flex flex-row justify-left mt-4 max-w-md mx-auto'>
-          <Checkbox className="mr-4"/>
-          <p className='text-sm'>I do not want to receive emails about Infisical and its products.</p>
-        </div> */}
-      <div className="flex flex-col items-center justify-center w-5/6 md:w-full md:p-2 max-h-28 max-w-xs md:max-w-md mx-auto mt-4 md:mt-4 text-sm text-center md:text-left">
-        <p className="text-gray-400 mt-2 md:mx-0.5">
-          By creating an account, you agree to our Terms and have read and
-          acknowledged the Privacy Policy.
-        </p>
-        <div className="text-l mt-6 m-2 md:m-8 px-8 py-1 text-lg">
-          <Button text="Get Started" type="submit" onButtonPressed={emailCheck} size="lg" />
-        </div>
-      </div>
    </div>
+
  );

  // Step 2 of the signup process (enter the email verification code)
@@ -340,11 +343,11 @@ export default function SignUp() {
        <Button text="Verify" onButtonPressed={incrementStep} size="lg" />
      </div>
      <div className="flex flex-col items-center justify-center w-full max-h-24 max-w-md mx-auto pt-2">
-        <div className="flex flex-row items-baseline gap-1">
+        <div className="flex flex-row items-baseline gap-1 text-sm">
          <span className="text-gray-400">
            Not seeing an email?
          </span>
-          <u className={`font-normal text-sm ${isResendingVerificationEmail ? 'text-gray-400' : 'text-sky-500 hover:opacity-90 duration-200'}`}>
+          <u className={`font-normal ${isResendingVerificationEmail ? 'text-gray-400' : 'text-primary-500 hover:opacity-90 duration-200'}`}>
            <button disabled={isLoading} onClick={resendVerificationEmail}>
              {isResendingVerificationEmail ? 'Resending...' : 'Resend'}
            </button>
@@ -512,17 +515,33 @@ export default function SignUp() {
        It contains your Secret Key which we cannot access or recover for you if
        you lose it.
      </div>
-      <div
-        className="text-l mt-4 text-lg text-gray-400 hover:text-gray-300 duration-200 bg-white/5 px-8 hover:bg-white/10 py-3 rounded-md cursor-pointer"
-        onClick={() => {
-          if (localStorage.getItem("projectData.id")) {
-            router.push("/dashboard/" + localStorage.getItem("projectData.id"));
-          } else {
-            router.push("/noprojects")
-          }
-        }}
-      >
-        Later
+      <div className="flex flex-col items-center justify-center md:px-4 md:py-5 mt-2 px-2 py-3 max-h-24 max-w-max mx-auto text-lg">
+        <Button
+          text="Download PDF"
+          onButtonPressed={async () => {
+            await issueBackupKey({
+              email,
+              password,
+              personalName: firstName + ' ' + lastName,
+              setBackupKeyError,
+              setBackupKeyIssued
+            });
+            router.push('/dashboard/');
+          }}
+          size="lg"
+        />
+        {/* <div
+					className="text-l mt-4 text-lg text-gray-400 hover:text-gray-300 duration-200 bg-white/5 px-8 hover:bg-white/10 py-3 rounded-md cursor-pointer"
+					onClick={() => {
+						if (localStorage.getItem("projectData.id")) {
+							router.push("/dashboard/" + localStorage.getItem("projectData.id"));
+						} else {
+							router.push("/noprojects")
+						}
+					}}
+				>
+					Later
+				</div> */}
      </div>
    </div>
  );