mythic-insight/calcom
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Add success modal

Browse source
This commit is contained in:
Bailey Pumfleet 2021-04-20 13:56:50 +01:00
parent 026e5475f1
commit 35f7b30097
5 changed files with 93 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
components/Modal.tsx Normal file
View file

@ -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>
)
}

2
package.json
View file

@ -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",

9
pages/settings/password.tsx
View file

@ -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>
);

9
pages/settings/profile.tsx
View file

@ -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>
);

10
yarn.lock
View file

@ -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"