From d1fd49d804b8a0739f3b7261c883ca4c8db96fa9 Mon Sep 17 00:00:00 2001 From: James Nuanez Date: Fri, 24 Apr 2020 12:37:12 -0700 Subject: [PATCH] When navigating back to Create Password page, redirect based on setup progress --- src/components/pages/setup/CreatePassword.js | 248 ++++++++++++++----- 1 file changed, 181 insertions(+), 67 deletions(-) diff --git a/src/components/pages/setup/CreatePassword.js b/src/components/pages/setup/CreatePassword.js index 49afa2e..382ff85 100644 --- a/src/components/pages/setup/CreatePassword.js +++ b/src/components/pages/setup/CreatePassword.js @@ -7,6 +7,7 @@ import Form from '../../elements/Form'; import Button from '../../elements/Button'; import Input from '../../elements/Input'; import FormError from '../../blocks/FormError'; +import Loader from '../../blocks/Loader'; const CreatePassword = () => { let history = useHistory(); @@ -27,6 +28,7 @@ const CreatePassword = () => { const [ invalidPassword, setInvalidPassword ] = useState(false); const [ invalidPasswordConfirm, setInvalidPasswordConfirm ] = useState(false); + const [ showLoader, setShowLoader ] = useState(true); const [ errorMessage, setErrorMessage ] = useState(''); // Handle Password visibility @@ -36,26 +38,134 @@ const CreatePassword = () => { const toggleShowPassword = () => setShowPassword(!showPassword); useEffect(() => { - if (!sessionStorage.getItem('user_sid')) { + const getAPIData = async () => { + try { + if (!sessionStorage.getItem('user_sid')) { - if (localStorage.getItem('token')) { - history.push('/internal/accounts'); - dispatch({ - type: 'ADD', - level: 'error', - message: 'That page is only accessible during setup.', - }); - return; + if (!localStorage.getItem('token')) { + history.push('/'); + dispatch({ + type: 'ADD', + level: 'error', + message: 'You must log in to view that page.', + }); + return; + } + + dispatch({ + type: 'ADD', + level: 'error', + message: 'The create password page can only be used once.', + }); + + //----------------------------------------------------------------------------- + // Get account data + //----------------------------------------------------------------------------- + const serviceProvidersPromise = axios({ + method: 'get', + baseURL: process.env.REACT_APP_API_BASE_URL, + url: '/serviceProviders', + headers: { + Authorization: `Bearer ${localStorage.getItem('token')}`, + }, + }); + + const accountsPromise = axios({ + method: 'get', + baseURL: process.env.REACT_APP_API_BASE_URL, + url: '/Accounts', + headers: { + Authorization: `Bearer ${localStorage.getItem('token')}`, + }, + }); + + const applicationsPromise = axios({ + method: 'get', + baseURL: process.env.REACT_APP_API_BASE_URL, + url: '/applications', + headers: { + Authorization: `Bearer ${localStorage.getItem('token')}`, + }, + }); + + const voipCarriersPromise = axios({ + method: 'get', + baseURL: process.env.REACT_APP_API_BASE_URL, + url: '/voipCarriers', + headers: { + Authorization: `Bearer ${localStorage.getItem('token')}`, + }, + }); + + const promiseAllValues = await Promise.all([ + serviceProvidersPromise, + accountsPromise, + applicationsPromise, + voipCarriersPromise, + ]); + + const serviceProviders = promiseAllValues[0].data; + const accounts = promiseAllValues[1].data; + const applications = promiseAllValues[2].data; + const voipCarriers = promiseAllValues[3].data; + + //----------------------------------------------------------------------------- + // Determine where to route user + //----------------------------------------------------------------------------- + if ( + (serviceProviders.length > 1) || + (accounts.length > 1) || + (accounts.length < 1) || + (applications.length > 1) || + (voipCarriers.length > 0) + ) { + history.push('/internal/accounts'); + return; + } + + const { sip_realm, registration_hook } = accounts[0]; + + if ( + (!sip_realm || !registration_hook) && + !applications.length + ) { + history.push('/configure-account'); + return; + } + + if (!applications.length) { + history.push('/create-application'); + return; + } + + if (!voipCarriers.length) { + history.push('/configure-sip-trunk'); + return; + } + + history.push('/internal/accounts'); + } + } catch (err) { + if (err.response && err.response.status === 401) { + localStorage.removeItem('token'); + sessionStorage.clear(); + history.push('/'); + dispatch({ + type: 'ADD', + level: 'error', + message: 'Your session has expired. Please log in and try again.', + }); + } else { + setErrorMessage((err.response && err.response.data && err.response.data.msg) || 'Something went wrong, please try again.'); + console.log(err.response || err); + } + } finally { + setShowLoader(false); } - - history.push('/'); - dispatch({ - type: 'ADD', - level: 'error', - message: 'You must log in to view that page.', - }); - } - }, [history, dispatch]); + }; + getAPIData(); + // eslint-disable-next-line + }, []); const handleSubmit = async e => { try { @@ -152,45 +262,25 @@ const CreatePassword = () => { }; return ( - -
- setPassword(e.target.value)} - onKeyDown={e => { - if (!showPassword && e.getModifierState('CapsLock')) { - setErrorMessage('CAPSLOCK is enabled!'); - } else { - setErrorMessage(''); - } - }} - ref={refPassword} - invalid={invalidPassword} - autoFocus - /> - {!showPassword && ( + showLoader ? ( + + ) : ( + + setPasswordConfirm(e.target.value)} + type={showPassword ? "text" : "password"} + name="password" + id="password" + placeholder="New Password" + value={password} + onChange={e => setPassword(e.target.value)} onKeyDown={e => { if (!showPassword && e.getModifierState('CapsLock')) { setErrorMessage('CAPSLOCK is enabled!'); @@ -198,21 +288,45 @@ const CreatePassword = () => { setErrorMessage(''); } }} - ref={refPasswordConfirm} - invalid={invalidPasswordConfirm} + ref={refPassword} + invalid={invalidPassword} + autoFocus /> - )} - {errorMessage && ( - - )} - - - + {!showPassword && ( + setPasswordConfirm(e.target.value)} + onKeyDown={e => { + if (!showPassword && e.getModifierState('CapsLock')) { + setErrorMessage('CAPSLOCK is enabled!'); + } else { + setErrorMessage(''); + } + }} + ref={refPasswordConfirm} + invalid={invalidPasswordConfirm} + /> + )} + {errorMessage && ( + + )} + + +
+ ) ); };