Add success modal

components/Modal.tsx

@@ -0,0 +1,67 @@
+/* This example requires Tailwind CSS v2.0+ */
+import { Fragment, useState } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import { CheckIcon } from '@heroicons/react/outline'
+
+export default function Modal(props) {
+    return (
+        <Transition.Root show={props.open} as={Fragment}>
+            <Dialog as="div" static className="fixed z-10 inset-0 overflow-y-auto" open={props.open} onClose={props.handleClose}>
+                <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+                    <Transition.Child
+                        as={Fragment}
+                        enter="ease-out duration-300"
+                        enterFrom="opacity-0"
+                        enterTo="opacity-100"
+                        leave="ease-in duration-200"
+                        leaveFrom="opacity-100"
+                        leaveTo="opacity-0"
+                    >
+                        <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+                    </Transition.Child>
+
+                    {/* This element is to trick the browser into centering the modal contents. */}
+                    <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+                        &#8203;
+                    </span>
+                    <Transition.Child
+                        as={Fragment}
+                        enter="ease-out duration-300"
+                        enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        enterTo="opacity-100 translate-y-0 sm:scale-100"
+                        leave="ease-in duration-200"
+                        leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                        leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    >
+                        <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
+                            <div>
+                                <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
+                                    <CheckIcon className="h-6 w-6 text-green-600" aria-hidden="true" />
+                                </div>
+                                <div className="mt-3 text-center sm:mt-5">
+                                    <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
+                                        {props.heading}
+                                    </Dialog.Title>
+                                    <div className="mt-2">
+                                        <p className="text-sm text-gray-500">
+                                            {props.description}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="mt-5 sm:mt-6">
+                                <button
+                                    type="button"
+                                    className="btn-wide btn-primary"
+                                    onClick={() => props.handleClose()}
+                                >
+                                    Dismiss
+                                </button>
+                            </div>
+                        </div>
+                    </Transition.Child>
+                </div>
+            </Dialog>
+        </Transition.Root>
+    )
+}

package.json

@@ -9,6 +9,8 @@
     "postinstall": "prisma generate"
   },
   "dependencies": {
+    "@headlessui/react": "^1.0.0",
+    "@heroicons/react": "^1.0.1",
     "@prisma/client": "2.21.2",
     "@tailwindcss/forms": "^0.2.1",
     "bcryptjs": "^2.4.3",

pages/settings/password.tsx

@@ -1,13 +1,15 @@
 import Head from 'next/head';
 import Link from 'next/link';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import prisma from '../../lib/prisma';
+import Modal from '../../components/Modal';
 import Shell from '../../components/Shell';
 import SettingsShell from '../../components/Settings';
 import { signIn, useSession, getSession } from 'next-auth/client';
 
 export default function Settings(props) {
     const [ session, loading ] = useSession();
+    const [successModalOpen, setSuccessModalOpen] = useState(false);
     const oldPasswordRef = useRef();
     const newPasswordRef = useRef();
 
@@ -19,6 +21,8 @@ export default function Settings(props) {
         }
     }
 
+    const closeSuccessModal = () => { setSuccessModalOpen(false); }
+
     async function changePasswordHandler(event) {
         event.preventDefault();
 
@@ -35,7 +39,7 @@ export default function Settings(props) {
             }
         });
 
-        console.log(response);
+        setSuccessModalOpen(true);
     }
 
     return(
@@ -79,6 +83,7 @@ export default function Settings(props) {
                         </div>
                     </div>
                 </form>
+                <Modal heading="Password updated successfully" description="Your password has been successfully changed." open={successModalOpen} handleClose={closeSuccessModal} />
             </SettingsShell>
         </Shell>
     );

pages/settings/profile.tsx

@@ -1,13 +1,15 @@
 import Head from 'next/head';
 import Link from 'next/link';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import prisma from '../../lib/prisma';
+import Modal from '../../components/Modal';
 import Shell from '../../components/Shell';
 import SettingsShell from '../../components/Settings';
 import { signIn, useSession, getSession } from 'next-auth/client';
 
 export default function Settings(props) {
     const [ session, loading ] = useSession();
+    const [successModalOpen, setSuccessModalOpen] = useState(false);
     const usernameRef = useRef();
     const nameRef = useRef();
     const descriptionRef = useRef();
@@ -21,6 +23,8 @@ export default function Settings(props) {
         }
     }
 
+    const closeSuccessModal = () => { setSuccessModalOpen(false); }
+
     async function updateProfileHandler(event) {
         event.preventDefault();
 
@@ -39,7 +43,7 @@ export default function Settings(props) {
             }
         });
 
-        console.log(response);
+        setSuccessModalOpen(true);
     }
 
     return(
@@ -636,6 +640,7 @@ export default function Settings(props) {
                         </div>
                     </div>
                 </form>
+                <Modal heading="Profile updated successfully" description="Your user profile has been updated successfully." open={successModalOpen} handleClose={closeSuccessModal} />
             </SettingsShell>
         </Shell>
     );

yarn.lock

@@ -78,6 +78,16 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
+"@headlessui/react@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.0.0.tgz#661b50ebfd25041abb45d8eedd85e7559056bcaf"
+  integrity sha512-mjqRJrgkbcHQBfAHnqH0yRxO/y/22jYrdltpE7WkurafREKZ+pj5bPBwYHMt935Sdz/n16yRcVmsSCqDFHee9A==
+
+"@heroicons/react@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.1.tgz#66d25f6441920bd5c2146ea27fd33995885452dd"
+  integrity sha512-uikw2gKCmqnvjVxitecWfFLMOKyL9BTFcU4VM3hHj9OMwpkCr5Ke+MRMyY2/aQVmsYs4VTq7NCFX05MYwAHi3g==
+
 "@next/env@10.0.8":
   version "10.0.8"
   resolved "https://registry.npmjs.org/@next/env/-/env-10.0.8.tgz"