Add Email Unsubscribe Functionality

backend/src/api/app.ts

@@ -5,6 +5,7 @@ import * as cors from 'cors';
 import * as helmet from 'helmet';
 import { handler as healthcheck } from './healthcheck';
 import * as auth from './auth';
+import * as emailUnsubscribe from './email-unsubscribe';
 import * as cpes from './cpes';
 import * as cves from './cves';
 import * as domains from './domains';
@@ -111,6 +112,8 @@ app.use(cookieParser());
 app.get('/', handlerToExpress(healthcheck));
 app.post('/auth/login', handlerToExpress(auth.login));
 app.post('/auth/callback', handlerToExpress(auth.callback));
+app.post('/email-unsubscribe', handlerToExpress(emailUnsubscribe.unsubscribe));
+app.post('/email-resubscribe', handlerToExpress(emailUnsubscribe.resubscribe));
 app.post('/users/register', handlerToExpress(users.register));
 app.post('/readysetcyber/register', handlerToExpress(users.RSCRegister));
 

backend/src/api/email-unsubscribe.ts

@@ -0,0 +1,54 @@
+import { IsString } from 'class-validator';
+import { validateBody, wrapHandler, NotFound } from './helpers';
+import { connectToDatabase, EmailBlocklist } from '../models';
+
+class Email {
+  @IsString()
+  email: string;
+}
+
+/**
+ * @swagger
+ *
+ * /email-unsubscribe:
+ *  post:
+ *    description: Add user to the email blocklist.
+ */
+export const unsubscribe = wrapHandler(async (event) => {
+  console.log(event);
+  const body = await validateBody(Email, event.body);
+
+  await connectToDatabase();
+
+  body.email = body.email.toLowerCase();
+  const email = await EmailBlocklist.create({
+    ...body
+  });
+  await EmailBlocklist.save(email);
+
+  return {
+    statusCode: 200,
+    body: 'Email has been added to blocklist'
+  };
+});
+
+export const resubscribe = wrapHandler(async (event) => {
+  const body = await validateBody(Email, event.body);
+  await connectToDatabase();
+
+  body.email = body.email.toLowerCase();
+
+  const email = await EmailBlocklist.findOne({
+    email: body.email
+  });
+  if (email) {
+    const result = await EmailBlocklist.delete({
+      email: body.email
+    });
+    return {
+      statusCode: 200,
+      body: JSON.stringify(result)
+    };
+  }
+  return NotFound;
+});

backend/src/models/connection.ts

@@ -7,6 +7,7 @@ import {
   Cpe,
   Cve,
   Domain,
+  EmailBlocklist,
   Organization,
   OrganizationTag,
   Question,
@@ -121,6 +122,7 @@ const connectDb = async (logging?: boolean) => {
       Cpe,
       Cve,
       Domain,
+      EmailBlocklist,
       Organization,
       OrganizationTag,
       Question,

backend/src/models/email-blocklist.ts

@@ -0,0 +1,21 @@
+import {
+  Entity,
+  Column,
+  Unique,
+  PrimaryGeneratedColumn,
+  BaseEntity,
+  CreateDateColumn
+} from 'typeorm';
+
+@Entity()
+@Unique(['email'])
+export class EmailBlocklist extends BaseEntity {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column()
+  email: string;
+
+  @CreateDateColumn()
+  createdAt: Date;
+}

backend/src/models/index.ts

@@ -5,6 +5,7 @@ export * from './connection';
 export * from './cpe';
 export * from './cve';
 export * from './domain';
+export * from './email-blocklist';
 export * from './organization';
 export * from './organization-tag';
 export * from './question';

frontend/src/App.tsx

@@ -34,7 +34,8 @@ import {
   Feeds,
   Domains,
   Reports,
-  RegionUsers
+  RegionUsers,
+  EmailUnsubscribe
 } from 'pages';
 import { Layout, RouteGuard } from 'components';
 import './styles.scss';
@@ -131,6 +132,12 @@ const App: React.FC = () => (
                   />
                   <Route exact path="/terms" component={TermsOfUse} />
 
+                  <Route
+                    exact
+                    path="/unsubscribe"
+                    component={EmailUnsubscribe}
+                  />
+
                   <RouteGuard
                     exact
                     path="/inventory"

frontend/src/pages/EmailUnsubscribe/EmailUnsubscribe.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useAuthContext } from 'context';
+import { Button, TextInput, Label } from '@trussworks/react-uswds';
+
+interface FormData {
+  email: string;
+}
+interface Errors extends Partial<FormData> {
+  global?: string;
+}
+
+export const EmailUnsubscribe: React.FC = () => {
+  const history = useHistory();
+  const [errors, setErrors] = useState<Errors>({});
+  const { apiPost } = useAuthContext();
+  const [value, setValue] = useState<FormData>({
+    email: ''
+  });
+
+  const onTextChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setValue({
+      ...value,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  const onSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
+    e.preventDefault();
+    try {
+      if (!value) throw Error('Email must be provided.');
+      await apiPost(`/email-unsubscribe`, {
+        body: value
+      });
+
+      history.push('/unsubscribe', {
+        message: 'You have been successfully unsubscribed from our emails.'
+      });
+    } catch (e: any) {
+      setErrors({
+        global: e.message ?? e.toString()
+      });
+    }
+  };
+
+  const handleResubscribe = async () => {
+    try {
+      if (!value) throw Error('Email must be provided.');
+      await apiPost(`/email-resubscribe`, {
+        body: value
+      });
+
+      history.push('/unsubscribe', {
+        message: 'You have been successfully resubscribed to our emails.'
+      });
+    } catch (e: any) {
+      setErrors({
+        global: e.message ?? e.toString()
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={onSubmit}>
+      <h1>Unsubscribe from our emails.</h1>
+      <p>Youllll no longer receive emails from us.</p>
+      <Label htmlFor="email">Email</Label>
+      <TextInput
+        required
+        id="email"
+        name="email"
+        type="text"
+        value={value.email}
+        onChange={onTextChange}
+      />
+      <p></p>
+      <div className="width-full display-flex flex-justify-start">
+        {errors.global && <p className="text-error">{errors.global}</p>}
+      </div>
+      <Button type="submit">Unsubscribe</Button>
+      <p>Changed your mind?</p>
+      <div className="width-full display-flex flex-justify-start">
+        {errors.global && <p className="text-error">{errors.global}</p>}
+      </div>
+      <Button type="button" onClick={handleResubscribe}>
+        Resubscribe
+      </Button>
+    </form>
+  );
+};

frontend/src/pages/EmailUnsubscribe/index.ts

@@ -0,0 +1 @@
+export * from './EmailUnsubscribe';

frontend/src/pages/index.ts

@@ -5,6 +5,7 @@ export * from './Domains';
 export * from './Domain';
 export * from './Vulnerability';
 export * from './TermsOfUse';
+export * from './EmailUnsubscribe';
 export * from './Search';
 export * from './LoginGovCallback';
 export { default as AdminTools } from './AdminTools';