Reset password page/feature (#145)

* Scaffold out reset password route/page

* Implementation of reset password page

* Add header to LoginOrRegister component, move header in ResetPasswordPage -> Form for consistency

* Rename LoginOrRegister with Form appended for consistency

* Move redirection logic to login form only

* Add hook for parsing query param values from reset password redirect

* Add NotFoundPage

* Remove icon from NotFound route

* Add empty state for invalid or expired tokens, add function for clearing out query param data

* Rename useResetPassword to better reflect intent behind hook mutation

* Begin implementing ChangePasswordForm component

* Implement change password hook/form

* Pop success toast and redirect home on success

* Add Forgot password link to login/register form

* Add padding to NotFoundPage and ResetPasswordPage when expired token empty state is shown

* Debounce/update password change validation

* Swap rooks useInput w/ custom

* Simplify validation in LoginOrRegisterForm with custom input hook

Author: brandongregoryscott

src/components/change-password-form.tsx

@@ -0,0 +1,152 @@
+import { ErrorAlert } from "components/error-alert";
+import { Flex } from "components/flex";
+import { Form } from "components/forms/form";
+import { ErrorMessages } from "constants/error-messages";
+import {
+    Button,
+    Heading,
+    majorScale,
+    TextInputField,
+    toaster,
+} from "evergreen-ui";
+import { isEmpty } from "lodash";
+import { ChangeEvent, useCallback, useRef } from "react";
+import { useNavigate } from "react-router";
+import { Sitemap } from "sitemap";
+import { useChangePassword } from "utils/hooks/supabase/use-change-password";
+import { useInput } from "utils/hooks/use-input";
+import { ResetPasswordQueryParams } from "utils/hooks/use-reset-password-route";
+
+interface ChangePasswordFormProps
+    extends Pick<ResetPasswordQueryParams, "access_token"> {}
+
+const ChangePasswordForm: React.FC<ChangePasswordFormProps> = (
+    props: ChangePasswordFormProps
+) => {
+    const { access_token } = props;
+    const navigate = useNavigate();
+    const {
+        value: password,
+        onChange: onPasswordChange,
+        ...passwordValidation
+    } = useInput({ isRequired: true });
+
+    const {
+        value: passwordConfirmation,
+        onChange: onPasswordConfirmationChange,
+        setValidation: setPasswordConfirmationValidation,
+        ...passwordConfirmationValidation
+    } = useInput({ isRequired: true });
+
+    const validationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    const handleChangePasswordSuccess = useCallback(() => {
+        toaster.success("Password successfully updated!");
+        navigate(Sitemap.home);
+    }, [navigate]);
+
+    const {
+        isLoading,
+        error,
+        mutate: changePassword,
+    } = useChangePassword({
+        onSuccess: handleChangePasswordSuccess,
+    });
+
+    const updateValidation = useCallback(
+        (password?: string, passwordConfirmation?: string) => {
+            const passwordsAreEmpty =
+                isEmpty(password) || isEmpty(passwordConfirmation);
+            const passwordsMatch = password === passwordConfirmation;
+
+            if (validationTimeoutRef.current != null) {
+                clearTimeout(validationTimeoutRef.current);
+            }
+
+            if (passwordsAreEmpty || passwordsMatch) {
+                return;
+            }
+
+            validationTimeoutRef.current = setTimeout(() => {
+                setPasswordConfirmationValidation({
+                    isInvalid: true,
+                    validationMessage: ErrorMessages.PASSWORDS_DO_NOT_MATCH,
+                });
+            }, 300);
+        },
+        [setPasswordConfirmationValidation]
+    );
+
+    const handlePasswordChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => {
+            const { value: password } = event.target;
+            onPasswordChange(event);
+            updateValidation(password, passwordConfirmation);
+        },
+        [onPasswordChange, passwordConfirmation, updateValidation]
+    );
+
+    const handlePasswordConfirmationChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => {
+            const { value: passwordConfirmation } = event.target;
+            onPasswordConfirmationChange(event);
+            updateValidation(password, passwordConfirmation);
+        },
+        [onPasswordConfirmationChange, password, updateValidation]
+    );
+
+    const handleSubmit = useCallback(
+        (event: React.FormEvent) => {
+            event.preventDefault();
+
+            const isInvalid =
+                isEmpty(password) ||
+                isEmpty(passwordConfirmation) ||
+                password !== passwordConfirmation;
+
+            if (isInvalid) {
+                return;
+            }
+
+            changePassword({ access_token, password });
+        },
+        [access_token, changePassword, password, passwordConfirmation]
+    );
+
+    return (
+        <Flex.Column alignItems="center" maxWidth={majorScale(60)}>
+            <Heading marginBottom={majorScale(2)} size={800}>
+                Change your password
+            </Heading>
+            <Form onSubmit={handleSubmit} width={majorScale(30)}>
+                <TextInputField
+                    {...passwordValidation}
+                    label="Password"
+                    onChange={handlePasswordChange}
+                    type="password"
+                    value={password}
+                />
+                <TextInputField
+                    {...passwordConfirmationValidation}
+                    label="Confirm Password"
+                    onChange={handlePasswordConfirmationChange}
+                    type="password"
+                    value={passwordConfirmation}
+                />
+                <Button
+                    disabled={
+                        passwordValidation?.isInvalid ||
+                        passwordConfirmationValidation.isInvalid
+                    }
+                    isLoading={isLoading}
+                    onClick={handleSubmit}
+                    width="100%">
+                    Change Password
+                </Button>
+            </Form>
+            {error != null && <ErrorAlert error={error} />}
+        </Flex.Column>
+    );
+};
+
+export { ChangePasswordForm };

src/components/login-or-register-form.tsx

@@ -0,0 +1,187 @@
+import {
+    TextInputField,
+    majorScale,
+    Button,
+    Alert,
+    Link,
+    Heading,
+} from "evergreen-ui";
+import { useBoolean } from "utils/hooks/use-boolean";
+import { useLogin } from "utils/hooks/supabase/use-login";
+import { useRegister } from "utils/hooks/supabase/use-register";
+import { Form } from "components/forms/form";
+import { FormEvent, MouseEvent, useCallback, useMemo } from "react";
+import { isNilOrEmpty } from "utils/core-utils";
+import { Flex } from "components/flex";
+import { SupabaseUser } from "types/supabase-user";
+import { UserRecord } from "models/user-record";
+import { useCreateOrUpdateUser } from "generated/hooks/domain/users/use-create-or-update-user";
+import { useGlobalState } from "utils/hooks/use-global-state";
+import { useNavigate } from "react-router";
+import { Link as ReactRouterLink } from "react-router-dom";
+import { Sitemap } from "sitemap";
+import { ErrorAlert } from "components/error-alert";
+import { absolutePath } from "utils/route-utils";
+import { useInput } from "utils/hooks/use-input";
+
+interface LoginOrRegisterFormProps {
+    initialShowRegister: boolean;
+}
+
+const marginBottom = majorScale(3);
+
+const LoginOrRegisterForm: React.FC<LoginOrRegisterFormProps> = (
+    props: LoginOrRegisterFormProps
+) => {
+    const { initialShowRegister } = props;
+    const { setGlobalState } = useGlobalState();
+    const navigate = useNavigate();
+    const { value: showRegister, toggle: toggleShowRegister } =
+        useBoolean(initialShowRegister);
+    const {
+        value: email,
+        onChange: handleEmailChange,
+        ...emailValidation
+    } = useInput({
+        initialValue: "",
+        isRequired: true,
+    });
+    const {
+        value: password,
+        onChange: handlePasswordChange,
+        ...passwordValidation
+    } = useInput({
+        initialValue: "",
+        isRequired: true,
+    });
+    const { mutate: createOrUpdateUser } = useCreateOrUpdateUser({
+        onConflict: "id",
+    });
+    const {
+        mutate: register,
+        reset: resetRegister,
+        isLoading: isRegisterLoading,
+        isSuccess: isRegisterSuccess,
+        error: registerError,
+    } = useRegister();
+    const {
+        mutate: login,
+        reset: resetLogin,
+        isLoading: isLoginLoading,
+        error: loginError,
+    } = useLogin({
+        onSuccess: (supabaseUser: SupabaseUser) => {
+            const user = UserRecord.fromSupabaseUser(supabaseUser);
+            createOrUpdateUser(user);
+            setGlobalState((prev) => prev.setUser(supabaseUser));
+            navigate(Sitemap.home);
+        },
+    });
+
+    const error = loginError ?? registerError;
+
+    const renderError =
+        (showRegister && registerError != null) ||
+        (!showRegister && loginError != null);
+    const buttonText = showRegister ? "Register" : "Login";
+    const toggleLinkText = showRegister
+        ? "Already have an account? Login here"
+        : "Need an account? Register here";
+
+    const validate = useCallback((): boolean => {
+        const emailIsInvalid = isNilOrEmpty(email);
+        const passwordIsInvalid = isNilOrEmpty(password);
+        const isValid = !emailIsInvalid && !passwordIsInvalid;
+        return isValid;
+    }, [email, password]);
+
+    const handleLogin = useCallback(
+        (event: FormEvent<HTMLFormElement> | MouseEvent<HTMLButtonElement>) => {
+            event.preventDefault();
+            if (!validate()) {
+                return;
+            }
+
+            login({ email: email!, password: password! });
+        },
+        [email, login, password, validate]
+    );
+
+    const handleRegister = useCallback(
+        (event: FormEvent<HTMLFormElement> | MouseEvent<HTMLButtonElement>) => {
+            event.preventDefault();
+
+            if (!validate()) {
+                return;
+            }
+
+            register({ email: email!, password: password! });
+        },
+        [email, password, register, validate]
+    );
+
+    const handleSubmit = useMemo(
+        () => (showRegister ? handleRegister : handleLogin),
+        [handleLogin, handleRegister, showRegister]
+    );
+
+    const toggleAndReset = useCallback(() => {
+        toggleShowRegister();
+        resetLogin();
+        resetRegister();
+    }, [resetLogin, resetRegister, toggleShowRegister]);
+
+    return (
+        <Flex.Column alignItems="center" maxWidth={majorScale(60)}>
+            <Heading marginBottom={majorScale(2)} size={800}>
+                {showRegister ? "Register" : "Login"}
+            </Heading>
+            <Form
+                display="flex"
+                flexDirection="column"
+                onSubmit={handleSubmit}
+                width={majorScale(30)}>
+                <TextInputField
+                    {...emailValidation}
+                    disabled={showRegister ? isRegisterLoading : isLoginLoading}
+                    label="Email"
+                    onChange={handleEmailChange}
+                    value={email}
+                />
+                <TextInputField
+                    {...passwordValidation}
+                    disabled={showRegister ? isRegisterLoading : isLoginLoading}
+                    label="Password"
+                    onChange={handlePasswordChange}
+                    type="password"
+                    value={password}
+                />
+                <Button
+                    isLoading={
+                        showRegister ? isRegisterLoading : isLoginLoading
+                    }
+                    marginBottom={marginBottom}
+                    onClick={handleSubmit}>
+                    {buttonText}
+                </Button>
+                <Link marginBottom={marginBottom} onClick={toggleAndReset}>
+                    {toggleLinkText}
+                </Link>
+                <Link
+                    is={ReactRouterLink}
+                    marginBottom={marginBottom}
+                    to={absolutePath(Sitemap.resetPassword)}>
+                    Forgot your password?
+                </Link>
+            </Form>
+            {renderError && <ErrorAlert error={error} />}
+            {isRegisterSuccess && showRegister && (
+                <Alert intent="success" title="Account successfully created.">
+                    Check your email for a confirmation link to sign in.
+                </Alert>
+            )}
+        </Flex.Column>
+    );
+};
+
+export { LoginOrRegisterForm };