From 35f7b3009743551c876a9665c051828a1a8328b5 Mon Sep 17 00:00:00 2001 From: Bailey Pumfleet Date: Tue, 20 Apr 2021 13:56:50 +0100 Subject: [PATCH] Add success modal --- components/Modal.tsx | 67 +++++++++++++++++++++++++++++++++++++ package.json | 2 ++ pages/settings/password.tsx | 9 +++-- pages/settings/profile.tsx | 9 +++-- yarn.lock | 10 ++++++ 5 files changed, 93 insertions(+), 4 deletions(-) create mode 100644 components/Modal.tsx diff --git a/components/Modal.tsx b/components/Modal.tsx new file mode 100644 index 00000000..40f1a5a2 --- /dev/null +++ b/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 ( + + +
+ + + + + {/* This element is to trick the browser into centering the modal contents. */} + + +
+
+
+
+
+ + {props.heading} + +
+

+ {props.description} +

+
+
+
+
+ +
+
+ +
+ + + ) +} \ No newline at end of file diff --git a/package.json b/package.json index 996aead3..6fe122bb 100644 --- a/package.json +++ b/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", diff --git a/pages/settings/password.tsx b/pages/settings/password.tsx index ebbb4ffb..c1ae06b0 100644 --- a/pages/settings/password.tsx +++ b/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) { + ); diff --git a/pages/settings/profile.tsx b/pages/settings/profile.tsx index e2f8afa3..eeb0a020 100644 --- a/pages/settings/profile.tsx +++ b/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) { + ); diff --git a/yarn.lock b/yarn.lock index b390a302..14c9f684 100644 --- a/yarn.lock +++ b/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"