[draft] email account sign up & settings QA demo branch

.env.sample

@@ -90,3 +90,14 @@ CLIENT_SECRET=
 #
 # Head over to the `client` folder to see some client-specific ENV variables.
 #
+
+# =============
+# EMAIL ALERTS API AUTHORIZATION
+# =============
+#
+# Authorization token required to access protected WOW API endpoints 
+# used for Email Alerts. It can be set to any unique string with no spaces. 
+# Must be provided to our email alerts server. Even if not using this
+# feature, a value must be provided.
+
+ALERTS_API_TOKEN="token_required"

.gitignore

@@ -13,3 +13,5 @@ __pycache__/
 db.sqlite3
 *.log
 .ssh/
+.yalc/
+yalc*

client/package.json

@@ -6,6 +6,7 @@
     "@amplitude/analytics-browser": "^1.2.3",
     "@babel/core": "^7.7.2",
     "@contentful/rich-text-react-renderer": "^15.0.0",
+    "@justfixnyc/component-library": "0.33.0",
     "@justfixnyc/contentful-common-strings": "^0.1.0",
     "@justfixnyc/geosearch-requester": "1.0.0",
     "@justfixnyc/util": "^0.4.1",
@@ -75,7 +76,6 @@
     "resize-observer-polyfill": "^1.5.1",
     "rollbar": "^2.14.4",
     "sass": "^1.49.9",
-    "spectre.scss": "0.0.2",
     "typescript": "^4.9.3",
     "widont": "^0.3.3",
     "xstate": "^4.11.0"
@@ -88,8 +88,8 @@
     "contentful": "node pull-contentful-data.js",
     "contentful-common-strings": "contentful-common-strings fetch -o src/data/common-strings.json",
     "typecheck": "tsc",
-    "build-css": "sass src/:src/ --no-source-map --load-path src/ --load-path node_modules/ --load-path node_modules/spectre.scss/src/",
-    "watch-css": "yarn build-css && sass src/:src/ --no-source-map --load-path src/ --load-path node_modules/ --load-path node_modules/spectre.scss/src/ --watch",
+    "build-css": "sass src/:src/ --no-source-map --load-path src/ --load-path node_modules/",
+    "watch-css": "yarn build-css && sass src/:src/ --no-source-map --load-path src/ --load-path node_modules/ --watch",
     "start-js": "lingui compile && react-scripts start",
     "start": "yarn contentful-common-strings --dev && npm-run-all -p watch-css start-js",
     "build": "yarn contentful-common-strings && node write-version.js && yarn build-css && lingui compile && react-scripts build",
@@ -104,7 +104,8 @@
     "dotenv": "^8.2.0",
     "jest-fetch-mock": "^3.0.3",
     "npm-run-all": "^4.0.2",
-    "prettier": "2.0.5"
+    "prettier": "2.0.5",
+    "react-error-overlay": "6.0.9"
   },
   "overrides": {
     "@svgr/webpack": "$@svgr/webpack"
@@ -115,7 +116,8 @@
     "loader-utils": "^2.0.4",
     "set-value": "^2.0.1",
     "minimist": "^0.2.4",
-    "immer": "^9.0.6"
+    "immer": "^9.0.6",
+    "react-error-overlay": "6.0.9"
   },
   "engines": {
     "node": ">=12.0.0"

client/src/components/APIDataTypes.ts

@@ -209,6 +209,7 @@ export type MonthlyTimelineData = {
   dobviolations_ecb: number;
   dobviolations_total: number;
   evictionfilings_total: number;
+  rentstabilizedunits_total: number;
 };
 
 export type IndicatorsHistoryResults = {

client/src/components/AddressSearch.tsx

@@ -225,6 +225,7 @@ export default class AddressSearch extends React.Component<AddressSearchProps, S
                       {this.props.labelText}
                     </label>
                     <input
+                      autoFocus
                       placeholder="Search places"
                       className="geosuggest__input form-input"
                       {...downshift.getInputProps(inputOptions)}

client/src/components/AddressToolbar.tsx

@@ -12,6 +12,8 @@ import ExportDataButton from "./ExportData";
 import { useLocation } from "react-router-dom";
 import { createWhoOwnsWhatRoutePaths } from "routes";
 import { logAmplitudeEvent } from "./Amplitude";
+import { Button, Link as JFCLLink } from "@justfixnyc/component-library";
+import { i18n } from "@lingui/core";
 
 export type AddressToolbarProps = {
   searchAddr: SearchAddress;
@@ -28,25 +30,25 @@ const AddressToolbar: React.FC<AddressToolbarProps> = ({ searchAddr, assocAddrs
     <div className="AddressToolbar">
       <div className="btn-group">
         <Link
-          className="btn"
           onClick={() => {
             logAmplitudeEvent("newSearch");
             window.gtag("event", "new-search");
           }}
           to={isLegacyPath(pathname) ? legacy.home : home}
+          component={JFCLLink}
         >
           <Trans>New Search</Trans>
         </Link>
-        <button
-          className="btn"
+        <Button
+          labelText={i18n._("Export Data")}
+          variant="secondary"
+          size="small"
           onClick={() => {
             setExportModalVisibility(true);
             logAmplitudeEvent("clickExportData");
             window.gtag("event", "click-export-data");
           }}
-        >
-          <Trans>Export Data</Trans>
-        </button>
+        />
       </div>
       <Modal showModal={showExportModal} onClose={() => setExportModalVisibility(false)}>
         <Trans render="p">

client/src/components/AuthClient.ts

@@ -18,6 +18,18 @@ type VerifyEmailResponse = {
   error?: string;
 };
 
+export enum ResetStatusCode {
+  Success = 200,
+  Accepted = 202,
+  Invalid = 400,
+  Expired = 410,
+  Unknown = 500,
+}
+
+type PasswordResetResponse = Omit<VerifyEmailResponse, "statusCode"> & {
+  statusCode: ResetStatusCode;
+};
+
 let _user: JustfixUser | undefined;
 const user = () => _user;
 const fetchUser = async () => {
@@ -47,8 +59,12 @@ const clearUser = () => (_user = undefined);
  * Authenticates a user with the given email and password.
  * Creates an account for this user if one does not already exist.
  */
-const register = async (username: string, password: string) => {
-  const json = await postAuthRequest(`${BASE_URL}auth/register`, { username, password });
+const register = async (username: string, password: string, userType: string) => {
+  const json = await postAuthRequest(`${BASE_URL}auth/register`, {
+    username: username.toLowerCase(),
+    password,
+    user_type: userType,
+  });
   fetchUser();
   return json;
 };
@@ -58,26 +74,84 @@ const register = async (username: string, password: string) => {
  * and expiry time.
  */
 const login = async (username: string, password: string) => {
-  const json = await postAuthRequest(`${BASE_URL}auth/login`, { username, password });
+  const json = await postLoginCredentials(`${BASE_URL}auth/login`, {
+    username: username.toLowerCase(),
+    password,
+  });
   return json;
 };
 
 /**
  * Revokes the current access token, if one is present
  */
 const logout = async () => {
-  await postAuthRequest(`${BASE_URL}auth/logout`);
-  clearUser();
+  return await postAuthRequest(`${BASE_URL}auth/logout`);
 };
 
-const resetPasswordRequest = async (username: string) => {
-  return await postAuthRequest(`${BASE_URL}auth/reset_password`, { username });
+/**
+ * Sends request to send a password reset link to the user's email
+ */
+const resetPasswordRequest = async (username?: string) => {
+  try {
+    if (username) {
+      await postAuthRequest(`${BASE_URL}auth/reset_password_request`, {
+        username: username.toLowerCase(),
+      });
+    } else {
+      const params = new URLSearchParams(window.location.search);
+      await postAuthRequest(
+        `${BASE_URL}auth/reset_password_request_with_token?token=${params.get("token")}`
+      );
+    }
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * Sends an unauthenticated request to checks if the password reset token is valid
+ */
+const resetPasswordCheck = async () => {
+  const params = new URLSearchParams(window.location.search);
+
+  let result: PasswordResetResponse = {
+    statusCode: ResetStatusCode.Unknown,
+    statusText: "",
+  };
+
+  try {
+    const response = await postAuthRequest(
+      `${BASE_URL}auth/reset_password/check?token=${params.get("token")}`
+    );
+    result.statusCode = response.status_code;
+    result.statusText = response.status_text;
+  } catch (e) {
+    if (e instanceof Error) {
+      result.error = e.message;
+    }
+  }
+  return result;
 };
 
 const resetPassword = async (token: string, newPassword: string) => {
-  return await postAuthRequest(`${BASE_URL}auth/set_password?token=${token}`, {
-    new_password: newPassword,
-  });
+  let result: PasswordResetResponse = {
+    statusCode: ResetStatusCode.Unknown,
+    statusText: "",
+  };
+
+  try {
+    const response = await postAuthRequest(`${BASE_URL}auth/set_password?token=${token}`, {
+      new_password: newPassword,
+    });
+    result.statusCode = response.status_code;
+    result.statusText = response.status_text;
+  } catch (e) {
+    if (e instanceof Error) {
+      result.error = e.message;
+    }
+  }
+  return result;
 };
 
 /**
@@ -88,7 +162,7 @@ const userAuthenticated = async () => {
 };
 
 /**
- * Sends an authenticated request to verify the user email
+ * Sends an unauthenticated request to verify the user email
  */
 const verifyEmail = async () => {
   const params = new URLSearchParams(window.location.search);
@@ -115,9 +189,13 @@ const verifyEmail = async () => {
 /**
  * Sends request to resend the account verification link to the user's email
  */
-const resendVerifyEmail = async () => {
+const resendVerifyEmail = async (token?: string) => {
   try {
-    await postAuthRequest(`${BASE_URL}auth/resend_verify_email`);
+    if (token) {
+      await postAuthRequest(`${BASE_URL}auth/resend_verification_with_token?u=${token}`);
+    } else {
+      await postAuthRequest(`${BASE_URL}auth/resend_verification`);
+    }
     return true;
   } catch {
     return false;
@@ -128,7 +206,7 @@ const resendVerifyEmail = async () => {
  * Sends an authenticated request to update the user email
  */
 const updateEmail = async (newEmail: string) => {
-  return await postAuthRequest(`${BASE_URL}auth/update`, { new_email: newEmail });
+  return await postAuthRequest(`${BASE_URL}auth/update`, { new_email: newEmail.toLowerCase() });
 };
 
 /**
@@ -173,7 +251,9 @@ const buildingUnsubscribe = async (bbl: string) => {
 };
 
 const isEmailAlreadyUsed = async (email: string) => {
-  const result = await friendlyFetch(`${BASE_URL}auth/account_exists/${email}`, {
+  const sanitizedEmail = email.toLowerCase();
+
+  const result = await friendlyFetch(`${BASE_URL}auth/account_exists/${sanitizedEmail}`, {
     method: "GET",
     mode: "cors",
     headers: {
@@ -187,15 +267,22 @@ const isEmailAlreadyUsed = async (email: string) => {
 /**
  * Sends an unauthenticated request to unsubscribe the user from the building
  */
-const emailBuildingUnsubscribe = async (bbl: string, token: string) => {
+const emailUnsubscribeBuilding = async (bbl: string, token: string) => {
   return await postAuthRequest(`${BASE_URL}auth/unsubscribe/${bbl}?u=${token}`);
 };
 
+/**
+ * Sends an unauthenticated request to unsubscribe the user from all buildings
+ */
+const emailUnsubscribeAll = async (token: string) => {
+  return await postAuthRequest(`${BASE_URL}auth/email/unsubscribe?u=${token}`);
+};
+
 /**
  * Fetches the list of all subscriptions associated with a user
  */
-const userSubscriptions = async (token: string) => {
-  return await postAuthRequest(`${BASE_URL}auth/subscriptions?u=${token}`);
+const emailUserSubscriptions = async (token: string) => {
+  return await postAuthRequest(`${BASE_URL}auth/email/subscriptions?u=${token}`);
 };
 
 /**
@@ -227,17 +314,49 @@ const postAuthRequest = async (
   try {
     if (result.ok) {
       return await result.json();
+    } else {
+      return await result.json();
     }
   } catch {
     return result;
   }
 };
 
+/**
+ * Wrapper function for POST requests returning JSON response body
+ */
+
+const postLoginCredentials = async (
+  url: string,
+  params?: { [key: string]: string },
+  headers?: { [key: string]: string },
+  method: string = "POST"
+) => {
+  const body = params
+    ? Object.keys(params)
+        .map((k) => `${k}=${encodeURIComponent(params[k])}`)
+        .join("&")
+    : "";
+  const result = await friendlyFetch(url, {
+    method,
+    mode: "cors",
+    body,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      ...headers,
+    },
+    credentials: "include",
+  });
+
+  return await result.json();
+};
+
 // TODO shakao Move shared APIClient functions to util
 const friendlyFetch: typeof fetch = async (input, init) => {
   let response: Response;
   try {
     response = await fetch(input, init);
+    console.log(response);
   } catch (e) {
     if (e instanceof Error) {
       throw new NetworkError(e.message);
@@ -262,11 +381,13 @@ const Client = {
   updateEmail,
   updatePassword,
   resetPasswordRequest,
+  resetPasswordCheck,
   resetPassword,
   buildingSubscribe,
   buildingUnsubscribe,
-  userSubscriptions,
-  emailBuildingUnsubscribe,
+  emailUserSubscriptions,
+  emailUnsubscribeBuilding,
+  emailUnsubscribeAll,
 };
 
 export default Client;