feat(users): add reset password flow (#772)

src/components/Common/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes } from 'react';
+import React from 'react';
 
 export type ButtonType =
   | 'default'
@@ -8,18 +8,35 @@ export type ButtonType =
   | 'success'
   | 'ghost';
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+// Helper type to override types (overrides onClick)
+type MergeElementProps<
+  T extends React.ElementType,
+  P extends Record<string, unknown>
+> = Omit<React.ComponentProps<T>, keyof P> & P;
+
+type ElementTypes = 'button' | 'a';
+
+type BaseProps<P> = {
   buttonType?: ButtonType;
   buttonSize?: 'default' | 'lg' | 'md' | 'sm';
-}
+  // Had to do declare this manually as typescript would assume e was of type any otherwise
+  onClick?: (
+    e: React.MouseEvent<P extends 'a' ? HTMLAnchorElement : HTMLButtonElement>
+  ) => void;
+};
 
-const Button: React.FC<ButtonProps> = ({
+type ButtonProps<P extends React.ElementType> = {
+  as?: P;
+} & MergeElementProps<P, BaseProps<P>>;
+
+function Button<P extends ElementTypes = 'button'>({
   buttonType = 'default',
   buttonSize = 'default',
+  as,
   children,
   className,
   ...props
-}) => {
+}: ButtonProps<P>): JSX.Element {
   const buttonStyle = [
     'inline-flex items-center justify-center border border-transparent leading-5 font-medium rounded-md focus:outline-none transition ease-in-out duration-150',
   ];
@@ -68,14 +85,28 @@ const Button: React.FC<ButtonProps> = ({
     default:
       buttonStyle.push('px-4 py-2 text-sm');
   }
-  if (className) {
-    buttonStyle.push(className);
+
+  buttonStyle.push(className ?? '');
+
+  if (as === 'a') {
+    return (
+      <a
+        className={buttonStyle.join(' ')}
+        {...(props as React.ComponentProps<'a'>)}
+      >
+        <span className="flex items-center">{children}</span>
+      </a>
+    );
+  } else {
+    return (
+      <button
+        className={buttonStyle.join(' ')}
+        {...(props as React.ComponentProps<'button'>)}
+      >
+        <span className="flex items-center">{children}</span>
+      </button>
+    );
   }
-  return (
-    <button className={buttonStyle.join(' ')} {...props}>
-      <span className="flex items-center">{children}</span>
-    </button>
-  );
-};
+}
 
 export default Button;

src/components/Login/LocalLogin.tsx

@@ -12,7 +12,8 @@ const messages = defineMessages({
   validationpasswordrequired: 'Password required',
   loginerror: 'Something went wrong while trying to sign in.',
   signingin: 'Signing in…',
-  signin: 'Sign in',
+  signin: 'Sign In',
+  forgotpassword: 'Forgot Password?',
 });
 
 interface LocalLoginProps {
@@ -95,9 +96,14 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
                   </div>
                 )}
               </div>
-              <div className="actions">
-                <div className="flex justify-end">
-                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+              <div className="pt-5 mt-8 border-t border-gray-700">
+                <div className="flex justify-between">
+                  <span className="inline-flex rounded-md shadow-sm">
+                    <Button as="a" buttonType="ghost" href="/resetpassword">
+                      {intl.formatMessage(messages.forgotpassword)}
+                    </Button>
+                  </span>
+                  <span className="inline-flex rounded-md shadow-sm">
                     <Button
                       buttonType="primary"
                       type="submit"

src/components/ResetPassword/RequestResetLink.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from 'react';
+import ImageFader from '../Common/ImageFader';
+import { defineMessages, useIntl } from 'react-intl';
+import LanguagePicker from '../Layout/LanguagePicker';
+import Button from '../Common/Button';
+import { Field, Form, Formik } from 'formik';
+import * as Yup from 'yup';
+import axios from 'axios';
+
+const messages = defineMessages({
+  forgotpassword: 'Forgot Your Password?',
+  emailresetlink: 'Email Me a Recovery Link',
+  email: 'Email',
+  validationemailrequired: 'You must provide a valid email address',
+  gobacklogin: 'Go Back to Sign-In Page',
+  requestresetlinksuccessmessage:
+    'A password reset link will be sent to the provided email address if it is associated with a valid user.',
+});
+
+const ResetPassword: React.FC = () => {
+  const intl = useIntl();
+  const [hasSubmitted, setSubmitted] = useState(false);
+
+  const ResetSchema = Yup.object().shape({
+    email: Yup.string()
+      .email(intl.formatMessage(messages.validationemailrequired))
+      .required(intl.formatMessage(messages.validationemailrequired)),
+  });
+
+  return (
+    <div className="relative flex flex-col min-h-screen bg-gray-900 py-14">
+      <ImageFader
+        backgroundImages={[
+          '/images/rotate1.jpg',
+          '/images/rotate2.jpg',
+          '/images/rotate3.jpg',
+          '/images/rotate4.jpg',
+          '/images/rotate5.jpg',
+          '/images/rotate6.jpg',
+        ]}
+      />
+      <div className="absolute z-50 top-4 right-4">
+        <LanguagePicker />
+      </div>
+      <div className="relative z-40 px-4 sm:mx-auto sm:w-full sm:max-w-md">
+        <img
+          src="/logo.png"
+          className="w-auto mx-auto max-h-32"
+          alt="Overseerr Logo"
+        />
+        <h2 className="mt-2 text-3xl font-extrabold leading-9 text-center text-gray-100">
+          {intl.formatMessage(messages.forgotpassword)}
+        </h2>
+      </div>
+      <div className="relative z-50 mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div
+          className="bg-gray-800 bg-opacity-50 shadow sm:rounded-lg"
+          style={{ backdropFilter: 'blur(5px)' }}
+        >
+          <div className="px-10 py-8">
+            {hasSubmitted ? (
+              <>
+                <p className="text-md text-gray-300">
+                  {intl.formatMessage(messages.requestresetlinksuccessmessage)}
+                </p>
+                <span className="flex rounded-md shadow-sm justify-center mt-4">
+                  <Button as="a" href="/login" buttonType="ghost">
+                    {intl.formatMessage(messages.gobacklogin)}
+                  </Button>
+                </span>
+              </>
+            ) : (
+              <Formik
+                initialValues={{
+                  email: '',
+                }}
+                validationSchema={ResetSchema}
+                onSubmit={async (values) => {
+                  const response = await axios.post(
+                    `/api/v1/auth/reset-password`,
+                    {
+                      email: values.email,
+                    }
+                  );
+
+                  if (response.status === 200) {
+                    setSubmitted(true);
+                  }
+                }}
+              >
+                {({ errors, touched, isSubmitting, isValid }) => {
+                  return (
+                    <Form>
+                      <div className="sm:border-t sm:border-gray-800">
+                        <label
+                          htmlFor="email"
+                          className="block my-1 text-sm font-medium leading-5 text-gray-400 sm:mt-px"
+                        >
+                          {intl.formatMessage(messages.email)}
+                        </label>
+                        <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
+                          <div className="flex max-w-lg rounded-md shadow-sm">
+                            <Field
+                              id="email"
+                              name="email"
+                              type="text"
+                              placeholder="name@example.com"
+                              className="text-white flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
+                            />
+                          </div>
+                          {errors.email && touched.email && (
+                            <div className="mt-2 text-red-500">
+                              {errors.email}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                      <div className="pt-5 mt-4 border-t border-gray-700">
+                        <div className="flex justify-end">
+                          <span className="inline-flex rounded-md shadow-sm">
+                            <Button
+                              buttonType="primary"
+                              type="submit"
+                              disabled={isSubmitting || !isValid}
+                            >
+                              {intl.formatMessage(messages.emailresetlink)}
+                            </Button>
+                          </span>
+                        </div>
+                      </div>
+                    </Form>
+                  );
+                }}
+              </Formik>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ResetPassword;

src/components/ResetPassword/index.tsx

@@ -0,0 +1,185 @@
+import React, { useState } from 'react';
+import ImageFader from '../Common/ImageFader';
+import { defineMessages, useIntl } from 'react-intl';
+import LanguagePicker from '../Layout/LanguagePicker';
+import Button from '../Common/Button';
+import { Field, Form, Formik } from 'formik';
+import * as Yup from 'yup';
+import axios from 'axios';
+import { useRouter } from 'next/router';
+
+const messages = defineMessages({
+  resetpassword: 'Reset Password',
+  password: 'Password',
+  confirmpassword: 'Confirm Password',
+  validationpasswordrequired: 'You must provide a password',
+  validationpasswordmatch: 'Password must match',
+  validationpasswordminchars:
+    'Password is too short; should be a minimum of 8 characters',
+  gobacklogin: 'Go Back to Sign-In Page',
+  resetpasswordsuccessmessage:
+    'If the link is valid and is connected to a user then the password has been reset.',
+});
+
+const ResetPassword: React.FC = () => {
+  const intl = useIntl();
+  const router = useRouter();
+  const [hasSubmitted, setSubmitted] = useState(false);
+
+  const guid = router.query.guid;
+
+  const ResetSchema = Yup.object().shape({
+    password: Yup.string()
+      .required(intl.formatMessage(messages.validationpasswordrequired))
+      .min(8, intl.formatMessage(messages.validationpasswordminchars)),
+    confirmPassword: Yup.string()
+      .required(intl.formatMessage(messages.validationpasswordmatch))
+      .test(
+        'passwords-match',
+        intl.formatMessage(messages.validationpasswordmatch),
+        function (value) {
+          return this.parent.password === value;
+        }
+      ),
+  });
+
+  return (
+    <div className="relative flex flex-col min-h-screen bg-gray-900 py-14">
+      <ImageFader
+        backgroundImages={[
+          '/images/rotate1.jpg',
+          '/images/rotate2.jpg',
+          '/images/rotate3.jpg',
+          '/images/rotate4.jpg',
+          '/images/rotate5.jpg',
+          '/images/rotate6.jpg',
+        ]}
+      />
+      <div className="absolute z-50 top-4 right-4">
+        <LanguagePicker />
+      </div>
+      <div className="relative z-40 px-4 sm:mx-auto sm:w-full sm:max-w-md">
+        <img
+          src="/logo.png"
+          className="w-auto mx-auto max-h-32"
+          alt="Overseerr Logo"
+        />
+        <h2 className="mt-2 text-3xl font-extrabold leading-9 text-center text-gray-100">
+          {intl.formatMessage(messages.resetpassword)}
+        </h2>
+      </div>
+      <div className="relative z-50 mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div
+          className="bg-gray-800 bg-opacity-50 shadow sm:rounded-lg"
+          style={{ backdropFilter: 'blur(5px)' }}
+        >
+          <div className="px-10 py-8">
+            {hasSubmitted ? (
+              <>
+                <p className="text-md text-gray-300">
+                  {intl.formatMessage(messages.resetpasswordsuccessmessage)}
+                </p>
+                <span className="flex rounded-md shadow-sm justify-center mt-4">
+                  <Button as="a" href="/login" buttonType="ghost">
+                    {intl.formatMessage(messages.gobacklogin)}
+                  </Button>
+                </span>
+              </>
+            ) : (
+              <Formik
+                initialValues={{
+                  confirmPassword: '',
+                  password: '',
+                }}
+                validationSchema={ResetSchema}
+                onSubmit={async (values) => {
+                  const response = await axios.post(
+                    `/api/v1/auth/reset-password/${guid}`,
+                    {
+                      password: values.password,
+                    }
+                  );
+
+                  if (response.status === 200) {
+                    setSubmitted(true);
+                  }
+                }}
+              >
+                {({ errors, touched, isSubmitting, isValid }) => {
+                  return (
+                    <Form>
+                      <div className="sm:border-t sm:border-gray-800">
+                        <label
+                          htmlFor="password"
+                          className="block my-1 text-sm font-medium leading-5 text-gray-400 sm:mt-px"
+                        >
+                          {intl.formatMessage(messages.password)}
+                        </label>
+                        <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
+                          <div className="flex max-w-lg rounded-md shadow-sm">
+                            <Field
+                              id="password"
+                              name="password"
+                              type="password"
+                              placeholder={intl.formatMessage(
+                                messages.password
+                              )}
+                              className="text-white flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
+                            />
+                          </div>
+                          {errors.password && touched.password && (
+                            <div className="mt-2 text-red-500">
+                              {errors.password}
+                            </div>
+                          )}
+                        </div>
+                        <label
+                          htmlFor="confirmPassword"
+                          className="block my-1 text-sm font-medium leading-5 text-gray-400 sm:mt-px"
+                        >
+                          {intl.formatMessage(messages.confirmpassword)}
+                        </label>
+                        <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
+                          <div className="flex max-w-lg rounded-md shadow-sm">
+                            <Field
+                              id="confirmPassword"
+                              name="confirmPassword"
+                              placeholder="Confirm Password"
+                              type="password"
+                              className="text-white flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
+                            />
+                          </div>
+                          {errors.confirmPassword &&
+                            touched.confirmPassword && (
+                              <div className="mt-2 text-red-500">
+                                {errors.confirmPassword}
+                              </div>
+                            )}
+                        </div>
+                      </div>
+                      <div className="pt-5 mt-4 border-t border-gray-700">
+                        <div className="flex justify-end">
+                          <span className="inline-flex rounded-md shadow-sm">
+                            <Button
+                              buttonType="primary"
+                              type="submit"
+                              disabled={isSubmitting || !isValid}
+                            >
+                              {intl.formatMessage(messages.resetpassword)}
+                            </Button>
+                          </span>
+                        </div>
+                      </div>
+                    </Form>
+                  );
+                }}
+              </Formik>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ResetPassword;

src/context/UserContext.tsx

@@ -25,7 +25,7 @@ export const UserContext: React.FC<UserContextProps> = ({
 
   useEffect(() => {
     if (
-      !router.pathname.match(/(setup|login)/) &&
+      !router.pathname.match(/(setup|login|resetpassword)/) &&
       (!user || error) &&
       !routing.current
     ) {

src/i18n/locale/en.json

@@ -31,6 +31,7 @@
   "components.Layout.UserDropdown.signout": "Sign Out",
   "components.Layout.alphawarning": "This is ALPHA software. Features may be broken and/or unstable. Please report issues on GitHub!",
   "components.Login.email": "Email Address",
+  "components.Login.forgotpassword": "Forgot Password?",
   "components.Login.loginerror": "Something went wrong while trying to sign in.",
   "components.Login.password": "Password",
   "components.Login.signin": "Sign In",
@@ -210,6 +211,19 @@
   "components.RequestModal.seasonnumber": "Season {number}",
   "components.RequestModal.selectseason": "Select season(s)",
   "components.RequestModal.status": "Status",
+  "components.ResetPassword.confirmpassword": "Confirm Password",
+  "components.ResetPassword.email": "Email",
+  "components.ResetPassword.emailresetlink": "Email Me a Recovery Link",
+  "components.ResetPassword.forgotpassword": "Forgot Your Password?",
+  "components.ResetPassword.gobacklogin": "Go Back to Sign-In Page",
+  "components.ResetPassword.password": "Password",
+  "components.ResetPassword.requestresetlinksuccessmessage": "A password reset link will be sent to the provided email address if it is associated with a valid user.",
+  "components.ResetPassword.resetpassword": "Reset Password",
+  "components.ResetPassword.resetpasswordsuccessmessage": "If the link is valid and is connected to a user then the password has been reset.",
+  "components.ResetPassword.validationemailrequired": "You must provide a valid email address",
+  "components.ResetPassword.validationpasswordmatch": "Password must match",
+  "components.ResetPassword.validationpasswordminchars": "Password is too short; should be a minimum of 8 characters",
+  "components.ResetPassword.validationpasswordrequired": "You must provide a password",
   "components.Search.search": "Search",
   "components.Search.searchresults": "Search Results",
   "components.Settings.Notifications.NotificationsPushover.accessToken": "Access Token",

src/pages/_app.tsx

@@ -91,7 +91,7 @@ const CoreApp: Omit<NextAppComponentType, 'origGetInitialProps'> = ({
     });
   }, [currentLocale]);
 
-  if (router.pathname.match(/(login|setup)/)) {
+  if (router.pathname.match(/(login|setup|resetpassword)/)) {
     component = <Component {...pageProps} />;
   } else {
     component = (
@@ -184,7 +184,7 @@ CoreApp.getInitialProps = async (initialProps) => {
         // If there is no user, and ctx.res is set (to check if we are on the server side)
         // _AND_ we are not already on the login or setup route, redirect to /login with a 307
         // before anything actually renders
-        if (!router.pathname.match(/(login|setup)/)) {
+        if (!router.pathname.match(/(login|setup|resetpassword)/)) {
           ctx.res.writeHead(307, {
             Location: '/login',
           });

src/pages/resetpassword/[guid]/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { NextPage } from 'next';
+import ResetPassword from '../../../components/ResetPassword';
+
+const ResetPasswordPage: NextPage = () => {
+  return <ResetPassword />;
+};
+
+export default ResetPasswordPage;

src/pages/resetpassword/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { NextPage } from 'next';
+import RequestResetLink from '../../components/ResetPassword/RequestResetLink';
+
+const RequestResetLinkPage: NextPage = () => {
+  return <RequestResetLink />;
+};
+
+export default RequestResetLinkPage;