Change password modal

Author: plondon

.gitignore

@@ -0,0 +1 @@
+.DS_Store

client/apollo/cache/modal/index.ts

@@ -1,6 +1,7 @@
 import { makeVar } from '@apollo/client';
 
 export type ModalNameType =
+  | 'changePassword'
   | 'createLesson'
   | 'login'
   | 'register'

client/modals/ChangePassword/index.tsx

@@ -0,0 +1,67 @@
+import { Form, Formik } from 'formik';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import { InitialModalState, modalVar } from '👨‍💻apollo/cache/modal';
+import InputField from '👨‍💻components/Form/InputField';
+import { useChangePasswordMutation } from '👨‍💻generated/graphql';
+import { toErrorMap } from '👨‍💻utils/index';
+
+const ChangePassword: React.FC<Props> = () => {
+  const router = useRouter();
+  const tempPw = modalVar().data;
+  const [changePassword] = useChangePasswordMutation();
+
+  return (
+    <Formik
+      initialValues={{ newPassword: '', tempPw }}
+      onSubmit={async (values, { setErrors }) => {
+        const { data } = await changePassword({
+          variables: {
+            ...values,
+            token: tempPw,
+          },
+        });
+        if (data?.changePassword.errors) {
+          setErrors(toErrorMap(data.changePassword.errors));
+        }
+
+        console.log(data);
+        if (data?.changePassword.user) {
+          router.push('/');
+          modalVar(InitialModalState);
+        }
+      }}
+    >
+      {({ isSubmitting }) => (
+        <Form className="max-w-lg mx-auto p-6 lg:px-8">
+          <h1 className="text-2xl text-text-primary font-semibold justify-center flex mb-4">
+            Change Password
+          </h1>
+          <div className="px-4 sm:p-6">
+            <div className="grid gap-3">
+              <InputField
+                label="New Password"
+                name="newPassword"
+                type="password"
+              ></InputField>
+            </div>
+          </div>
+          <div className="px-4 sm:px-6">
+            <button
+              className="w-full justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-primary bg-accent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
+              disabled={isSubmitting}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+type Props = {};
+
+export default ChangePassword;

client/modals/ResetPasswordSent/index.tsx

@@ -5,6 +5,7 @@ import { modalVar } from '👨‍💻apollo/cache/modal';
 const ResetPasswordSent: React.FC<Props> = () => {
   return (
     <div className="max-w-lg mx-auto p-6 lg:px-8">
+      <div className="text-lg">💌</div>
       <div className="text-text-primary">
         Password reset link sent to {modalVar().data}
       </div>

client/modals/index.tsx

@@ -2,14 +2,15 @@ import { Transition } from '@headlessui/react';
 import React, { useCallback, useEffect } from 'react';
 
 import Icon from '👨‍💻components/Icon';
+import ChangePassword from '👨‍💻modals/ChangePassword';
+import CreateLesson from '👨‍💻modals/CreateLesson';
+import Login from '👨‍💻modals/Login';
+import Register from '👨‍💻modals/Register';
 import RegisterAfterPreview from '👨‍💻modals/RegisterAfterPreview';
 import ResetPasswordSent from '👨‍💻modals/ResetPasswordSent';
 
 import { InitialModalState, modalVar } from '../apollo/cache/modal';
 import { useModalQuery } from '../generated/graphql';
-import CreateLesson from './CreateLesson';
-import Login from './Login';
-import Register from './Register';
 
 const Modals: React.FC<Props> = () => {
   const { data } = useModalQuery();
@@ -79,7 +80,7 @@ const Modals: React.FC<Props> = () => {
           role="dialog"
         >
           <div
-            className="absolute -top-3 -right-3 flex items-center justify-center bg-bg-nav-offset w-10 h-10 rounded-full"
+            className="absolute -top-3 -right-3 flex items-center justify-center bg-bg-primary w-10 h-10 rounded-full"
             onClick={() => modalVar(InitialModalState)}
           >
             <Icon
@@ -88,12 +89,11 @@ const Modals: React.FC<Props> = () => {
             />
           </div>
           {/* eslint-disable */}
+          {data?.modal?.name === 'changePassword' && <ChangePassword />}
           {data?.modal?.name === 'createLesson' && <CreateLesson />}
           {data?.modal?.name === 'login' && <Login />}
           {data?.modal?.name === 'register' && <Register />}
-          {data?.modal?.name === 'registerAfterPreview' && (
-            <RegisterAfterPreview />
-          )}
+          {data?.modal?.name === 'registerAfterPreview' && <RegisterAfterPreview />}
           {data?.modal?.name === 'resetPasswordSent' && <ResetPasswordSent />}
           {/* eslint-enable */}
         </div>

client/pages/change-password/[token].tsx

@@ -1,65 +1,22 @@
-import { Form, Formik } from 'formik';
 import { NextPage } from 'next';
 import { useRouter } from 'next/router';
-import React from 'react';
+import React, { useEffect } from 'react';
 
-import InputField from '../../components/Form/InputField';
-import { useChangePasswordMutation } from '../../generated/graphql';
-import { toErrorMap } from '../../utils';
+import { modalVar } from '👨‍💻apollo/cache/modal';
 
 const ChangePassword: NextPage<{ token: string }> = (props) => {
   const router = useRouter();
-  const [changePassword] = useChangePasswordMutation();
+  // const [changePassword] = useChangePasswordMutation();
+  useEffect(() => {
+    modalVar({
+      callback: () => null,
+      data: props.token,
+      name: 'changePassword',
+    });
+    router.replace('/');
+  }, []);
 
-  return (
-    <Formik
-      initialValues={{ newPassword: '', token: props.token }}
-      onSubmit={async (values, { setErrors }) => {
-        const { data } = await changePassword({
-          variables: {
-            ...values,
-          },
-        });
-        if (data?.changePassword.errors) {
-          setErrors(toErrorMap(data.changePassword.errors));
-        }
-
-        if (data?.changePassword.user) {
-          router.push('/');
-        }
-      }}
-    >
-      {({ errors, isSubmitting }) => (
-        <Form>
-          <div className="max-w-2xl mx-auto py-6 sm:px-6 lg:px-8">
-            <h1 className="text-2xl text-blue-800 font-semibold justify-center flex mb-4">
-              Change Password
-            </h1>
-            <div className="shadow overflow-hidden sm:rounded-md">
-              <div className="px-4 py-5 sm:p-6">
-                <div className="grid gap-6">
-                  <InputField
-                    label="New password"
-                    name="newPassword"
-                    type="password"
-                  />
-                </div>
-              </div>
-              <div className="px-4 py-3 bg-gray-50 text-right sm:px-6">
-                <button
-                  className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-primary bg-accent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
-                  disabled={isSubmitting}
-                  type="submit"
-                >
-                  Change
-                </button>
-              </div>
-            </div>
-          </div>
-        </Form>
-      )}
-    </Formik>
-  );
+  return null;
 };
 
 ChangePassword.getInitialProps = ({ query }) => ({

server/.gitignore

@@ -1,3 +1,5 @@
 .env
 dist/
-node_modules/
+node_modules/
+
+.DS_Store