Implement Switching Endpoint on Error (#186)

client/src/App.js

@@ -45,7 +45,7 @@ export default function App() {
     })
   }
 
-  async function ping(a){
+  async function ping(a) {
     await axios.get(`${server_list[a]}/status`)
     .then(() => setServer(server_list[a]))
     .catch(() => {if(server_list[a+1]) ping(a+1)})
@@ -85,8 +85,6 @@ export default function App() {
     ping(0)
   }, [])
 
-
-
   return (
     <Router>
       <Navbar userData={userData} />
@@ -98,7 +96,7 @@ export default function App() {
         <Route path='/logout' component={() => <Logout userData={userData} />} />
         <Route path='/edit/:id' component={() => <EditTodo userData={userData} />} />
         <Route path='/oauth' component={() => <ReqOAuth userData={userData} />} />
-        <Route path='/auth/:service/:email' component={OAuth} />
+        <Route path='/auth/:service/:email' component={() => <OAuth userData={userData} />} />
         <Route path='/account' component={() => <Account userData={userData} />} />
         <Route path='/support' component={() => <Support userData={userData} />} />
         <Route path='/reset-password' exact component={() => <ReqResetPassword userData={userData} />} />

client/src/components/account.component.js

@@ -11,10 +11,9 @@ import { getCSRFToken, openModal, closeModal } from '../libraries/validation'
 import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification'
 
 const sanitizer = dompurify.sanitize
-const SERVER_URL = process.env.REACT_APP_SERVER_URL
 
 const Account = ({ userData }) => {
-    const {email, thirdParty, security, authenticated, isLoading} = userData
+    const {email, thirdParty, security, authenticated, isLoading, server: SERVER_URL} = userData
     const {valid, invalid} = authenticated ? security['backup-codes'] : []
 
     const [password, setPassword] = useState({

client/src/components/edit.component.js

@@ -10,10 +10,8 @@ import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/picker
 import { labels, validateLabel, getCSRFToken } from '../libraries/validation'
 import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification'
 
-const SERVER_URL = process.env.REACT_APP_SERVER_URL
-
 const Edit = ({ userData }) => {
-    const {authenticated, isLoading} = userData
+    const {authenticated, isLoading, server: SERVER_URL} = userData
     const [data, setData] = useState({
         _id: useParams().id,
         title: '',
@@ -56,7 +54,7 @@ const Edit = ({ userData }) => {
             e.removeAttribute('data-autoresize')
         })
         if(!isLoading && authenticated) getData()
-    }, [userData, data._id])
+    }, [userData, data._id, SERVER_URL])
 
     const updateData = (e) => {
         e.preventDefault()

client/src/components/forgot-password.component.js

@@ -8,10 +8,10 @@ import { faEnvelope, faChartLine } from '@fortawesome/free-solid-svg-icons'
 import { getCSRFToken } from '../libraries/validation'
 import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification'
 
-const SERVER_URL = process.env.REACT_APP_SERVER_URL
 const EMAIL_VAL = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
 const ResetPassword = ({ userData }) => {
+    const {server: SERVER_URL} = userData
     const [email, setEmail] = useState(userData.email ? userData.email : '')
     const [properties, setProperties] = useState({
         honeypot: '',

client/src/components/home.component.js

@@ -10,8 +10,6 @@ import { faPen, faTrash, faPlus, faTimes } from '@fortawesome/free-solid-svg-ico
 import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification'
 import { labels, validateLabel, getCSRFToken, openModal, closeModal } from '../libraries/validation'
 
-const SERVER_URL = process.env.REACT_APP_SERVER_URL
-
 const timestamp = (e) => {
     var data = new Date(e)
     var today = new Date()
@@ -31,7 +29,7 @@ const timestamp = (e) => {
 }
 
 const Home = ({ userData }) => {
-    const {email, authenticated, isLoading} = userData
+    const {email, authenticated, isLoading, server: SERVER_URL} = userData
     const cacheTodo = JSON.parse(localStorage.getItem('todoData'))
     const [todoData, setTodoData] = useState()
     const [data, setData] = useState({

client/src/components/login.component.js

@@ -8,10 +8,10 @@ import { faQuestionCircle, faEyeSlash, faEye, faEnvelope, faChartLine } from '@f
 import { getCSRFToken } from '../libraries/validation'
 import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification'
 
-const SERVER_URL = process.env.REACT_APP_SERVER_URL
 const EMAIL_VAL = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
 const Login = ({ userData }) => {
+    const {server: SERVER_URL} = userData
     const {mfa} = userData.type
     const {email} = userData.credentials
     const [properties, setProperties] = useState({
@@ -72,8 +72,8 @@ const Login = ({ userData }) => {
             })
             if(btn) btn.innerText = "Resend"; handleChange('disabled', false)
         }
-        if((userData.status === 302 && !properties.verify && mfa) || properties.sendOTP) {properties.sendOTP = false; sendOTP()}
-    }, [userData, properties, data])
+        if(((userData.status === 302 && !properties.verify && mfa) || properties.sendOTP) && SERVER_URL) {properties.sendOTP = false; sendOTP()}
+    }, [userData, properties, data, SERVER_URL])
 
     const LogIn = (e) => {
         e.preventDefault()

client/src/components/logout.component.js

@@ -4,11 +4,11 @@ import React, { useEffect } from 'react'
 import { getCSRFToken } from '../libraries/validation'
 
 const Logout = ({ userData }) => {
-    const {isLoading, authenticated, status} = userData
+    const {isLoading, authenticated, status, server: SERVER_URL} = userData
 
     useEffect(() => {
         async function logout() {
-            await axios.post(`${process.env.REACT_APP_SERVER_URL}/account/logout`, {}, { headers: { 'XSRF-TOKEN': getCSRFToken() }, withCredentials: true })
+            await axios.post(`${SERVER_URL}/account/logout`, {}, { headers: { 'XSRF-TOKEN': getCSRFToken() }, withCredentials: true })
             .then(() => status !== 302 ? localStorage.setItem('info', JSON.stringify({ status: 200, message: 'You have been logged out successfully.' })) : null)
             .catch(err => localStorage.setItem('info', JSON.stringify(err.response.data)))
             window.location = '/login'

client/src/components/register-oauth.component.js

@@ -9,10 +9,10 @@ import { faEye, faEyeSlash, faEnvelope, faChartLine } from '@fortawesome/free-so
 import { getCSRFToken } from '../libraries/validation'
 import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification'
 
-const SERVER_URL = process.env.REACT_APP_SERVER_URL
 const EMAIL_VAL = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
-const OAuth = () => {
+const OAuth = ({ userData }) => {
+    const {server: SERVER_URL} = userData
     const {service, email: rawEmail} = useParams()
     const [data, setData] = useState({
         email: decodeURIComponent(rawEmail),
@@ -33,8 +33,8 @@ const OAuth = () => {
             await axios.get(`${SERVER_URL}/oauth/${service}/register`, { params: {email: data.email}, withCredentials: true })
             .then().catch(() => window.location='/login')
         }
-        validateData()
-    },[service, data.email])
+        if(SERVER_URL) validateData()
+    },[service, data.email, SERVER_URL])
 
 
     const Submit = (e) => {

client/src/components/register.component.js

@@ -12,7 +12,7 @@ const SERVER_URL = process.env.REACT_APP_SERVER_URL
 const EMAIL_VAL = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
 const Register = ({ userData }) => {
-    const {status} = userData
+    const {status, server: SERVER_URL} = userData
     const {verifyAccount} = userData.type
     const {email} = userData.credentials
     const [properties, setProperties] = useState({

client/src/components/req-oauth.component.js

@@ -4,7 +4,7 @@ import React, { useEffect } from 'react'
 const SERVER_URL = process.env.REACT_APP_SERVER_URL
 
 const ReqOAuth = ({ userData }) => {
-    const {isLoading, authenticated} = userData
+    const {isLoading, authenticated, server: SERVER_URL} = userData
     const {pathname} = window.location
     const code = window.location.search
 
@@ -25,8 +25,8 @@ const ReqOAuth = ({ userData }) => {
                 }
             })
         }
-        if(!isLoading) validateData()
-    },[code, pathname])
+        if(!isLoading && SERVER_URL) validateData()
+    },[code, pathname, SERVER_URL])
 
     return(<div className="loader"><div className="spin-container"><div className="loading">
         <div></div><div></div><div></div>

client/src/components/reset-password.component.js

@@ -12,7 +12,7 @@ const SERVER_URL = process.env.REACT_APP_SERVER_URL
 const EMAIL_VAL = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
 const ResetPassword = () => {
-    const {id, token} = useParams()
+    const {id, token, server: SERVER_URL} = useParams()
     const [data, setData] = useState({
         id,
         token,
@@ -50,8 +50,9 @@ const ResetPassword = () => {
                     }
                 }else window.location='/reset-password'
             })
-        } validateData()
-    },[id, token, data.email])
+        }
+        if(SERVER_URL) validateData()
+    },[id, token, data.email, SERVER_URL])
 
     const Submit = (e) => {
         e.preventDefault()

client/src/components/support.component.js

@@ -22,7 +22,7 @@ const validateType = (e) => {
 }
 
 const Support = ({ userData }) => {
-    var {isLoading, authenticated, status, email} = userData
+    var {isLoading, authenticated, status, email, server: SERVER_URL} = userData
     if(status === 302) email = userData.credentials.email
     const [data, setData] = useState({
         email,

client/src/components/verify-account.component.js

@@ -5,7 +5,7 @@ import { useParams } from 'react-router-dom'
 const SERVER_URL = process.env.REACT_APP_SERVER_URL
 
 const VerifyAccount = () => {
-    const {id, token} = useParams()
+    const {id, token, server: SERVER_URL} = useParams()
 
     useEffect(() => {
         async function validateData() {
@@ -22,8 +22,8 @@ const VerifyAccount = () => {
                 }
             })
         }
-        validateData()
-    },[id, token])
+        if(SERVER_URL) validateData()
+    },[id, token, SERVER_URL])
 
     return (<div className="loader"><div className="spin-container"><div className="loading">
             <div></div><div></div><div></div>