From 9957af64312aafc93b479d5e12e80a2368be1fee Mon Sep 17 00:00:00 2001 From: Youri Noel Nelson Date: Sat, 10 Dec 2022 01:01:25 -0500 Subject: [PATCH] add mailbox popup --- .../ModalRoutes/MailboxRegistration.tsx | 296 +++++++++++++++++- app/yarn.lock | 154 +++++++-- 2 files changed, 412 insertions(+), 38 deletions(-) diff --git a/app/main_window/components/Settings/CustomDomains/ModalRoutes/MailboxRegistration.tsx b/app/main_window/components/Settings/CustomDomains/ModalRoutes/MailboxRegistration.tsx index 97e2b04..096a1c5 100644 --- a/app/main_window/components/Settings/CustomDomains/ModalRoutes/MailboxRegistration.tsx +++ b/app/main_window/components/Settings/CustomDomains/ModalRoutes/MailboxRegistration.tsx @@ -1,20 +1,37 @@ -import React, { useState, useRef, useEffect, forwardRef } from 'react'; +import React, { + useState, + useRef, + useEffect, + forwardRef, + Fragment +} from 'react'; import { useDispatch, useSelector } from 'react-redux'; // EXTERNAL LIBRARIES -import { Dialog } from '@headlessui/react'; -import { AtSymbolIcon, InboxIcon } from '@heroicons/react/outline'; -import { generateSlug } from 'random-word-slugs'; +import { Dialog, Combobox, Listbox, Transition } from '@headlessui/react'; +import { + AtSymbolIcon, + LightningBoltIcon, + ChevronLeftIcon, + InboxIcon +} from '@heroicons/react/outline'; +import { + CheckIcon, + SelectorIcon, + CheckCircleIcon +} from '@heroicons/react/solid'; + +// INTERNAL LIBRAIRIES +import useForm from '../../../../../utils/hooks/useForm'; +import { Input } from '../../../../../global_components/input-groups'; // INTERNAL COMPONENT import { Button } from '../../../../../global_components/button'; // SELECTORS -// REDUX ACTION -import { registerNamespace } from '../../../../actions/mailbox/aliases'; - -import i18n from '../../../../../i18n/i18n'; +// HELPER +import generateRandomString from '../../../../../utils/helpers/generators'; import { validateString } from '../../../../../utils/helpers/regex'; @@ -25,6 +42,8 @@ type Props = { const MailboxRegistration = forwardRef((props: Props, ref) => { const { close } = props; const dispatch = useDispatch(); + const domains = useSelector(state => state.domains.allIds); + const [searchDomains, setSearchDomains] = useState(''); const [mailbox, setMailbox] = useState(''); const [loading, setLoader] = useState(false); const [error, setError] = useState({ @@ -32,6 +51,67 @@ const MailboxRegistration = forwardRef((props: Props, ref) => { msg: '' }); + const format = [ + { label: '3 Word String', value: 'words' }, + { label: 'Alphanumeric', value: 'letters' }, + { label: 'UID', value: 'uid' } + ]; + const [randomFormat, setRandomFormat] = useState(format[0]); + + const { + handleChange, + manualChange, + bulkChange, + handleSubmit, + data: form, + errors + } = useForm({ + initialValues: { + domain: domains[0], + address: '', + displayName: '', + recoveryEmail: '' + }, + validations: { + address: { + pattern: { + value: /^\w+([\.-]?\w+)*$/g, // empty ^$ or string + message: 'No special characters allowed except for . allowed.' + }, + displayName: { + pattern: { + value: /^$|^([A-Za-zÀ-ÖØ-öø-ÿ0-9\.\-\/]+\s)*[A-Za-zÀ-ÖØ-öø-ÿ0-9\.\-\/]+$/, // empty ^$ or string + message: 'No special characters allowed except for . - / allowed.' + } + } + } + }, + onSubmit: async data => {} + }); + + const filteredDomains = + searchDomains === '' + ? domains.sort() + : domains + .filter(ns => + ns + .toLowerCase() + .replace(/\s+/g, '') + .includes(searchDomains.toLowerCase().replace(/\s+/g, '')) + ) + .sort(); + + const generateRandomAlias = () => { + const cb = (rstr: string) => { + manualChange('address', rstr); + }; + setError({ + showError: false, + msg: '' + }); + generateRandomString('random', randomFormat.value, cb); + }; + return ( {

- - mailbox1 - - @ - - mydomain.com - - + {form.address}@ + {form.domain}

+
+ + This will create a brand new mailbox. You can switch between + mailboxes by clicking on your profile, in the top right corner of + the app. + + {/* + Optionally, you can add forwarding addresses below to have email + sent to this alias forwarded to additional email addresses + */} +
+
+ manualChange('domain', val)} + > + + Domain + +
+
+ ns} + onChange={event => setSearchDomains(event.target.value)} + /> + + +
+ setSearchDomains('')} + > + + {filteredDomains.length === 0 && searchDomains !== '' ? ( +
+ Nothing found. +
+ ) : ( + filteredDomains.map(dm => ( + + `relative cursor-pointer select-none py-2 pl-10 pr-4 ${ + active ? 'bg-sky-500 text-white' : 'text-gray-900' + }` + } + style={{ cursor: 'pointer' }} + value={dm} + > + {({ selected, active }) => ( + <> + + {dm} + + {selected ? ( + + + ) : null} + + )} + + )) + )} + + +
+ +
+ +
+
+ +
+ +
+
+
+ +
+ Random Format +
+
+ setRandomFormat(format[0])} + /> + +
+
+ setRandomFormat(format[1])} + /> + +
+
+ setRandomFormat(format[2])} + /> + +
+
+
+
+
+ {errors?.address?.length > 0 && errors?.address} +
+
+ +
+
+ {errors?.displayName?.length > 0 && errors?.displayName} +
+