query session, error strings consolidated

packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -97,7 +97,6 @@ import { VoiceDesignerVoiceEditPage } from "./pages/voice_designer/VoiceDesigner
 import VoiceDesignerUseVoicePage from "./pages/voice_designer/VoiceDesignerUseVoicePage";
 import { PasswordResetEmailPage } from "./pages/password_reset/PasswordResetEmailPage";
 import { PasswordResetVerificationPage } from "./pages/password_reset/PasswordResetVerificationPage";
-import { PasswordResetChangePage } from "./pages/password_reset/PasswordResetChangePage";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -274,15 +273,13 @@ class PageContainer extends React.Component<
               />
             </Route>
 
-            <Route path="/password-reset/new">
-              <PasswordResetChangePage
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
-
             <Route path="/password-reset/verify">
               <PasswordResetVerificationPage
                 sessionWrapper={this.props.sessionWrapper}
+                querySessionAction={this.props.querySessionAction}
+                querySessionSubscriptionsAction={
+                  this.props.querySessionSubscriptionsAction
+                }
               />
             </Route>
 

packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetChangePage.tsx

@@ -1,80 +0,0 @@
-import React, { useState } from "react";
-import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
-import { useHistory } from "react-router-dom";
-import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
-import Container from "components/common/Container";
-import PageHeader from "components/layout/PageHeader";
-import Input from "components/common/Input";
-import { Button } from "components/common";
-import Panel from "components/common/Panel";
-import { faKey } from "@fortawesome/pro-solid-svg-icons";
-import BackButton from "components/common/BackButton";
-
-interface Props {
-  sessionWrapper: SessionWrapper;
-}
-
-function PasswordResetChangePage(props: Props) {
-  let history = useHistory();
-  const [isPasswordChanged, setIsPasswordChanged] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  if (props.sessionWrapper.isLoggedIn()) {
-    history.push("/");
-  }
-
-  usePrefixedDocumentTitle("Reset Password");
-
-  const handlePasswordChange = async () => {
-    // Simulate a delay using a timer (dummy timer)
-    setIsLoading(true);
-
-    setTimeout(() => {
-      setIsPasswordChanged(true);
-      setIsLoading(false);
-    }, 2000);
-  };
-
-  return (
-    <Container type="panel" className="login-panel">
-      <PageHeader
-        title="Change Password"
-        subText="Set your new password."
-        panel={false}
-      />
-
-      <Panel padding={true}>
-        {isPasswordChanged ? (
-          <div className="d-flex flex-column gap-3 align-items-start">
-            <p>Your password has been successfully changed!</p>
-            <BackButton label="Back to Login" to="/login" />
-          </div>
-        ) : (
-          <form>
-            <div className="d-flex flex-column gap-4">
-              <Input
-                label="New Password"
-                icon={faKey}
-                placeholder="Enter new password"
-              />
-
-              <Input
-                label="Confirm New Password"
-                icon={faKey}
-                placeholder="Confirm new password"
-              />
-
-              <Button
-                label="Confirm Change"
-                onClick={handlePasswordChange}
-                isLoading={isLoading}
-              />
-            </div>
-          </form>
-        )}
-      </Panel>
-    </Container>
-  );
-}
-
-export { PasswordResetChangePage };

packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetVerificationPage.tsx

@@ -14,8 +14,16 @@ import {
 
 interface Props {
   sessionWrapper: SessionWrapper;
+  querySessionAction: () => void;
+  querySessionSubscriptionsAction: () => void;
 }
 
+// TODO(bt,2023-11-12): Localize error messages
+const ERR_CODE_NOT_SET = "password reset code is not set";
+const ERR_CODE_TOO_SHORT = "password reset code is too short";
+const ERR_PASSWORD_TOO_SHORT = "new password is too short";
+const ERR_PASSWORD_DOES_NOT_MATCH = "new password does not match";
+
 function PasswordResetVerificationPage(props: Props) {
   let history = useHistory();
 
@@ -27,11 +35,11 @@ function PasswordResetVerificationPage(props: Props) {
 
   const [newPassword, setNewPassword] = useState("");
   const [newPasswordIsValid, setNewPasswordIsValid] = useState(false);
-  const [newPasswordInvalidReason, setNewPasswordInvalidReason] = useState<string|undefined>("new password is too short");
+  const [newPasswordInvalidReason, setNewPasswordInvalidReason] = useState<string|undefined>(ERR_PASSWORD_TOO_SHORT);
 
   const [newPasswordConfirmation, setNewPasswordConfirmation] = useState("");
   const [newPasswordConfirmationIsValid, setNewPasswordConfirmationIsValid] = useState(false);
-  const [newPasswordConfirmationInvalidReason, setNewPasswordConfirmationInvalidReason] = useState<string|undefined>("new password is too short");
+  const [newPasswordConfirmationInvalidReason, setNewPasswordConfirmationInvalidReason] = useState<string|undefined>(ERR_PASSWORD_TOO_SHORT);
 
   if (props.sessionWrapper.isLoggedIn()) {
     history.push("/");
@@ -53,7 +61,7 @@ function PasswordResetVerificationPage(props: Props) {
 
     if (value.length < 5) {
       isValid = false;
-      invalidReason = "new password is too short";
+      invalidReason = ERR_PASSWORD_TOO_SHORT;
     }
 
     setNewPassword(value);
@@ -62,7 +70,7 @@ function PasswordResetVerificationPage(props: Props) {
 
     if (value !== newPasswordConfirmation) {
       setNewPasswordConfirmationIsValid(false);
-      setNewPasswordConfirmationInvalidReason("new password does not match")
+      setNewPasswordConfirmationInvalidReason(ERR_PASSWORD_DOES_NOT_MATCH)
     } else if (newPasswordConfirmation.length > 4) {
       setNewPasswordConfirmationIsValid(true);
       setNewPasswordConfirmationInvalidReason(undefined)
@@ -77,11 +85,11 @@ function PasswordResetVerificationPage(props: Props) {
 
     if (value !== newPassword) {
       isValid = false;
-      invalidReason = "new password does not match";
+      invalidReason = ERR_PASSWORD_DOES_NOT_MATCH;
     }
     else if (value.length < 5) {
       isValid = false;
-      invalidReason = "new password is too short";
+      invalidReason = ERR_PASSWORD_TOO_SHORT;
     }
 
     setNewPasswordConfirmation(value);
@@ -108,6 +116,8 @@ function PasswordResetVerificationPage(props: Props) {
     // TODO(bt,2023-11-12): Handle server-side errors
 
     if (RedeemResetPasswordIsSuccess(response)) {
+      props.querySessionAction();
+      props.querySessionSubscriptionsAction();
       history.push("/");
     }
 
@@ -135,7 +145,7 @@ function PasswordResetVerificationPage(props: Props) {
             <Input
               label="Verification Code"
               icon={faLock}
-              placeholder="Enter 6-digit code"
+              placeholder="Enter verification code"
               value={resetToken}
               onChange={handleChangeResetToken}
             />
@@ -191,10 +201,10 @@ function getCodeFromUrl() : string | null {
 // Handle error state at initialization
 function getResetCodeErrors(code: string | null) : string | undefined {
   if (!code) {
-    return "no code set";
+    return ERR_CODE_NOT_SET;
   }
   if (code.length < 10) {
-    return "code is too short";
+    return ERR_CODE_TOO_SHORT;
   };
 }