Bumped version to 0.2.46

hackforla · Apr 5, 2023 · c7d0fcb · c7d0fcb
2 parents c3ed382 + e31ae8d
commit c7d0fcb
Show file tree

Hide file tree

Showing 19 changed files with 584 additions and 196 deletions.
diff --git a/client/.env b/client/.env
@@ -1,2 +1,2 @@
 # Use to simulate different environments (DEV, UAT, PROD)
-REACT_APP_ENV=DEV
+REACT_APP_ENV=DEV
diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tdm-calculator-client",
-  "version": "0.2.45",
+  "version": "0.2.46",
   "private": true,
   "proxy": "http://localhost:5001",
   "scripts": {

diff --git a/client/src/AppWrapper.js b/client/src/AppWrapper.js
@@ -29,7 +29,7 @@ const AppWrapper = () => {
   const [confirmTransition, setConfirmTransition] = useState(null);
   const [hasConfirmedTransition, setHasConfirmedTransition] = useState(true);
   const [isOpenNavConfirmModal, setIsOpenNavConfirmModal] = useState(false);
-  const [checklistModalOpen, setChecklistModalOpen] = useState(true);
+  const [checklistModalOpen, setChecklistModalOpen] = useState(false);
   const contentContainerRef = useRef();
   const appContainerRef = useRef();
 
@@ -56,8 +56,7 @@ const AppWrapper = () => {
     if (localStorage.getItem("termsAndConditions")) {
       if (localStorage.getItem("checklist")) {
         setChecklistModalOpen(false);
-      }
-      if (localStorage.getItem("checklist") === false) {
+      } else {
         setChecklistModalOpen(true);
         window.localStorage.setItem("checklist", "Accepted");
       }

diff --git a/client/src/components/Authorization/Login.js b/client/src/components/Authorization/Login.js
@@ -2,7 +2,7 @@ import React, { useState, useRef, useContext } from "react";
 import UserContext from "../../contexts/UserContext";
 import PropTypes from "prop-types";
 import { Link, withRouter, useHistory } from "react-router-dom";
-import { createUseStyles } from "react-jss";
+import { createUseStyles, useTheme } from "react-jss";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
 import * as accountService from "../../services/account.service";
@@ -13,7 +13,12 @@ import {
 } from "@microsoft/applicationinsights-react-js";
 import ContentContainer from "../Layout/ContentContainer";
 
-const useStyles = createUseStyles({
+const useStyles = createUseStyles(theme => ({
+  warningText: {
+    ...theme.typography.paragraph1,
+    color: theme.colors.warning,
+    textAlign: "left"
+  },
   buttonsContainer: {
     display: "flex",
     justifyContent: "flex-end",
@@ -23,12 +28,8 @@ const useStyles = createUseStyles({
     color: "red",
     textAlign: "center",
     marginBottom: "2em"
-  },
-  withoutSavingWarning: {
-    visibility: ({ withoutSavingWarningIsVisible }) =>
-      withoutSavingWarningIsVisible ? "visible" : "hidden"
   }
-});
+}));
 
 const Login = props => {
   const focusRef = useRef(null);
@@ -38,8 +39,8 @@ const Login = props => {
   const [errorMsg, setErrorMsg] = useState("");
   const [withoutSavingWarningIsVisible, setWithoutSavingWarningIsVisible] =
     useState(false);
-  const classes = useStyles({ withoutSavingWarningIsVisible });
-
+  const classes = useStyles();
+  const theme = useTheme();
   const initialValues = {
     email: match.params.email ? decodeURIComponent(match.params.email) : "",
     password: ""
@@ -142,97 +143,107 @@ const Login = props => {
 
   return (
     <ContentContainer componentToTrack="Login">
-      <h1 className="tdm-wizard-page-title">
-        Welcome to Los Angeles&rsquo; TDM Calculator
-      </h1>
-      <h3 className="tdm-wizard-page-subtitle">
-        Please sign into your account to save progress
-      </h3>
+      <div style={theme.typography.heading1}>
+        <span>Welcome to Los Angeles&rsquo; TDM Calculator</span>
+      </div>
+      <div style={theme.typography.subHeading}>
+        <span>Please sign into your account to save progress</span>
+      </div>
       <br />
       <div className="auth-form">
         <Formik
           initialValues={initialValues}
           validationSchema={loginSchema}
           onSubmit={(values, actions) => handleSubmit(values, actions, props)}
         >
-          {({ touched, errors, isSubmitting, values }) => (
-            <Form>
-              <div className="form-group">
-                <Field
-                  id="cy-login-email"
-                  innerRef={focusRef}
-                  type="email"
-                  autofill="email"
-                  name="email"
-                  value={values.email}
-                  placeholder="Email Address"
-                  className={`form-control ${
-                    touched.email && errors.email ? "is-invalid" : ""
-                  }`}
-                />
-                <ErrorMessage
-                  name="email"
-                  component="div"
-                  className="invalid-feedback"
-                />
-              </div>
-              <div className="form-group">
-                <Field
-                  id="cy-login-password"
-                  type="password"
-                  autofill="current-password"
-                  value={values.password}
-                  name="password"
-                  placeholder="Password"
-                  className={`form-control ${
-                    touched.password && errors.password ? "is-invalid" : ""
-                  }`}
-                />
-                <ErrorMessage
-                  name="password"
-                  component="div"
-                  className="invalid-feedback"
-                />
-              </div>
-              <Link
-                id="cy-login-nav-to-forgotpassword"
-                to={"/forgotpassword"}
-                style={{ display: "flex", justifyContent: "flex-end" }}
-              >
-                Forgot password?
-              </Link>
-              <div className={classes.buttonsContainer}>
-                <div
-                  onMouseOver={() => setWithoutSavingWarningIsVisible(true)}
-                  onMouseOut={() => setWithoutSavingWarningIsVisible(false)}
+          {({ touched, errors, isSubmitting, values }) => {
+            const isDisabled = !!(
+              isSubmitting ||
+              errors.email ||
+              errors.password ||
+              !values.email ||
+              !values.password
+            );
+
+            return (
+              <Form>
+                <div className="form-group">
+                  <Field
+                    id="cy-login-email"
+                    innerRef={focusRef}
+                    type="email"
+                    autofill="email"
+                    name="email"
+                    value={values.email}
+                    placeholder="Email Address"
+                    className={`form-control ${
+                      touched.email && errors.email ? "is-invalid" : ""
+                    }`}
+                  />
+                  <ErrorMessage
+                    name="email"
+                    component="div"
+                    className={classes.warningText}
+                  />
+                </div>
+                <div className="form-group">
+                  <Field
+                    id="cy-login-password"
+                    type="password"
+                    autofill="current-password"
+                    value={values.password}
+                    name="password"
+                    placeholder="Password"
+                    className={`form-control ${
+                      touched.password && errors.password ? "is-invalid" : ""
+                    }`}
+                  />
+                  <ErrorMessage
+                    name="password"
+                    component="div"
+                    className={classes.warningText}
+                  />
+                </div>
+                <Link
+                  id="cy-login-nav-to-forgotpassword"
+                  to={"/forgotpassword"}
+                  style={{ display: "flex", justifyContent: "flex-end" }}
                 >
+                  Forgot password?
+                </Link>
+                <div className={classes.buttonsContainer}>
+                  <div
+                    onMouseOver={() => setWithoutSavingWarningIsVisible(true)}
+                    onMouseOut={() => setWithoutSavingWarningIsVisible(false)}
+                  >
+                    <Button
+                      color="colorDefault"
+                      variant="text"
+                      onClick={() => {
+                        history.push("/calculation/1");
+                      }}
+                    >
+                      Continue without saving
+                    </Button>
+                  </div>
                   <Button
-                    color="colorDefault"
-                    variant="text"
-                    onClick={() => {
-                      history.push("/calculation/1");
-                    }}
+                    id="cy-login-submit"
+                    type="submit"
+                    disabled={isDisabled}
+                    color="colorPrimary"
                   >
-                    Continue without saving
+                    {isSubmitting ? "Please wait..." : "Login"}
                   </Button>
                 </div>
-                <Button
-                  id="cy-login-submit"
-                  type="submit"
-                  disabled={isSubmitting}
-                  color="colorPrimary"
-                >
-                  {isSubmitting ? "Please wait..." : "Login"}
-                </Button>
-              </div>
-              <div className={classes.warning}>
-                <p className={classes.withoutSavingWarning}>
-                  Your work will not be saved! We recommend logging in.
-                </p>
-                <p>{errorMsg}</p>
-              </div>
-            </Form>
-          )}
+                <div className={classes.warningText}>
+                  <span hidden={!withoutSavingWarningIsVisible}>
+                    Your work will not be saved! We recommend logging in.
+                  </span>
+                  <p>{errorMsg}</p>
+                </div>
+              </Form>
+            );
+          }}
         </Formik>
       </div>
       <br />

diff --git a/client/src/components/Button/Button.js b/client/src/components/Button/Button.js
@@ -5,7 +5,6 @@ import clsx from "clsx";
 
 const useStyles = createUseStyles({
   button: {
-    color: ({ theme }) => theme.colorText,
     cursor: "pointer",
     fontFamily: "Calibri Bold",
     height: "min-content",

diff --git a/client/src/components/Header.js b/client/src/components/Header.js
@@ -94,7 +94,7 @@ const Header = () => {
           />
         </a>
       </div>
-      {environmentBadge}
+      {Environment !== "PROD" ? environmentBadge : null}
       <button
         className={classes.hamburgerButton}
         onClick={handleHamburgerMenuClick}

diff --git a/client/src/components/PrivacyPolicy.js b/client/src/components/PrivacyPolicy.js
@@ -62,15 +62,15 @@ const PrivacyPolicy = () => {
             your information responsibly.
           </h3>
           <p className={classes.indented}>
-            <a href="https://ladot.lacity.org/tdmcalculator">TDM Calculator</a>{" "}
-            is a City of Los Angeles Review Tool managed by Hack for LA which is
-            a project (of Code for America Labs, Inc. (&#34;Code for
-            America&#34;, &#34;we&#34;, &#34;us&#34;, &#34;our&#34;). This
-            Privacy Policy describes how we collect, use, and protect your
-            personal information on the TDM Calculator review tool Website. By
-            submitting your personal information on our websites, you agree to
-            the terms in this Privacy Policy. If you do not agree with these
-            terms, please do not use our websites.
+            <a href="https://tdm.ladot.lacity.org">TDM Calculator</a> is a City
+            of Los Angeles Review Tool managed by Hack for LA which is a project
+            (of Code for America Labs, Inc. (&#34;Code for America&#34;,
+            &#34;we&#34;, &#34;us&#34;, &#34;our&#34;). This Privacy Policy
+            describes how we collect, use, and protect your personal information
+            on the TDM Calculator review tool Website. By submitting your
+            personal information on our websites, you agree to the terms in this
+            Privacy Policy. If you do not agree with these terms, please do not
+            use our websites.
           </p>
 
           <h2 style={{ fontWeight: "bold" }}>Overview</h2>
@@ -92,16 +92,16 @@ const PrivacyPolicy = () => {
           </h2>
           <h3 className={classes.headerIndented}>
             Visiting{" "}
-            <a href="https://ladot.lacity.org/tdmcalculator">
-              https://ladot.lacity.org/tdmcalculator
+            <a href="https://tdm.ladot.lacity.org">
+              https://tdm.ladot.lacity.org
             </a>{" "}
           </h3>
 
           <div className={classes.indented}>
             We may automatically collect and store data about your visit to
             <span> </span>
-            <a href="https://ladot.lacity.org/tdmcalculator">
-              https://ladot.lacity.org/tdmcalculator:
+            <a href="https://tdm.ladot.lacity.org">
+              https://tdm.ladot.lacity.org:
             </a>{" "}
             <li className={classes.bulletIndented}>
               Domain from which you access the Internet
@@ -126,8 +126,8 @@ const PrivacyPolicy = () => {
           <p className={classes.indented}>
             None of the information we collect about you when you visit
             <span> </span>
-            <a href="https://ladot.lacity.org/tdmcalculator ">
-              https://ladot.lacity.org/tdmcalculator
+            <a href="https://tdm.ladot.lacity.org ">
+              https://tdm.ladot.lacity.org
             </a>{" "}
             is personally identifiable unless you submit your contact
             information in the form on the Contact Us submit page.
@@ -136,8 +136,8 @@ const PrivacyPolicy = () => {
             We use this non personally identifiable information to understand
             how the
             <span> </span>
-            <a href="https://ladot.lacity.org/tdmcalculator ">
-              https://ladot.lacity.org/tdmcalculator
+            <a href="https://tdm.ladot.lacity.org ">
+              https://tdm.ladot.lacity.org
             </a>{" "}
             website is used, to improve the website, and to monitor usage for
             security purposes.
@@ -149,8 +149,8 @@ const PrivacyPolicy = () => {
           </p>
           <h3 className={classes.sectionSpacingIndented}>
             Creating an account at{" "}
-            <a href="https://ladot.lacity.org/tdmcalculator ">
-              https://ladot.lacity.org/tdmcalculator
+            <a href="https://tdm.ladot.lacity.org ">
+              https://tdm.ladot.lacity.org
             </a>{" "}
           </h3>
 
@@ -166,8 +166,8 @@ const PrivacyPolicy = () => {
 
           <h3 className={classes.sectionSpacingIndented}>
             Saving projects account at <span> </span>
-            <a href="https://ladot.lacity.org/tdmcalculator ">
-              https://ladot.lacity.org/tdmcalculator
+            <a href="https://tdm.ladot.lacity.org ">
+              https://tdm.ladot.lacity.org
             </a>{" "}
           </h3>