Added Skeleton Screen Design (#187)

stanleyowen · May 29, 2021 · ce38e99 · ce38e99
1 parent 61d0bff
commit ce38e99
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 20 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -100,7 +100,7 @@ export default function App() {
         <Route path='/account' component={() => <Account userData={userData} />} />
         <Route path='/support' component={() => <Support userData={userData} />} />
         <Route path='/reset-password' exact component={() => <ReqResetPassword userData={userData} />} />
-        <Route path='/reset-password/:id/:token' component={ResetPassword} />
+        <Route path='/reset-password/:id/:token' component={() => <ResetPassword userData={userData} />} />
         <Route path='/verify/:id/:token' component={VerifyAccount} />
         <Route path='/privacy-policy' component={PrivacyPolicy} />
         <Route path='/terms-and-conditions' component={TermsAndConditions} />

diff --git a/client/src/components/404.component.js b/client/src/components/404.component.js
@@ -1,14 +1,16 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+import { Skeleton } from '@material-ui/lab'
 import { Tooltip } from '@material-ui/core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import { faEnvelope, faChartLine } from '@fortawesome/free-solid-svg-icons'
 
 const PageNotFound = ({ userData }) => {
+    const [isLoaded, setLoaded] = useState(false)
     return (
         <div className="main">
             <div className="contact__container">
-                <img className="center-object" src="https://res.cloudinary.com/stanleyowen/image/upload/v1622072616/otlio/4f4adcbf8c6f66dcfc8a3282ac2bf10a_svidxs.webp" alt="Page Not Found" />
+                {isLoaded ? null : <Skeleton variant="rect" animation="wave" className="center-object" width="100%" height="100%" />} <img className={(isLoaded ? '':'none ') + "center-object"} src="https://res.cloudinary.com/stanleyowen/image/upload/v1622072616/otlio/4f4adcbf8c6f66dcfc8a3282ac2bf10a_svidxs.webp" alt="Page Not Found" onLoad={() => setLoaded(true)} />
                 <div className="center-object">
                     <h1 className="blue-text monospace large">404</h1>
                     <h1 className="blue-text monospace">Page Not Found</h1>

diff --git a/client/src/components/account.component.js b/client/src/components/account.component.js
@@ -2,6 +2,7 @@ import axios from 'axios'
 import dompurify from 'dompurify'
 import download from 'js-file-download'
 import React, { useState, useEffect } from 'react'
+import { Skeleton } from '@material-ui/lab'
 import { FormControlLabel, IconButton, Switch } from '@material-ui/core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faGithub, faGoogle, faKeycdn } from '@fortawesome/free-brands-svg-icons'
@@ -25,7 +26,8 @@ const Account = ({ userData }) => {
         disabled: false,
         password: false,
         newPassword: false,
-        confirmPassword: false
+        confirmPassword: false,
+        mfa: false 
     })
     const [data, setData] = useState({
         tokenId: '',
@@ -233,7 +235,7 @@ const Account = ({ userData }) => {
             <div className="main">
                 <div className="account-container">
                     <div className="flex35 center-object p-5p">
-                        <img src="https://res.cloudinary.com/stanleyowen/image/upload/v1622072616/otlio/d0d4cf7a79acbcb98834d05980edc55d_v6zmxx.webp" alt="Introducing 2FA" />
+                        {properties.mfa ? null : <Skeleton variant="rect" animation="wave" className="center-object" width="100%" height="200px" />} <img className={properties.mfa ? '':'none'} src="https://res.cloudinary.com/stanleyowen/image/upload/v1622072616/otlio/d0d4cf7a79acbcb98834d05980edc55d_v6zmxx.webp" alt="Introducing 2FA" onLoad={() => handleChange('mfa', true)} />
                         <h2 className="isCentered mt-20 mb-20 monospace">Introducing 2FA</h2>
                         <p className="isCentered monospace">Two-Factor Authentication is a security control that requires users to verify their identities by providing multiple pieces of evidence before gaining access to a device or application.</p>
                     </div>

diff --git a/client/src/components/home.component.js b/client/src/components/home.component.js
@@ -78,8 +78,8 @@ const Home = ({ userData }) => {
             })
             e.removeAttribute('data-autoresize')
         })
-        if(!isLoading && authenticated) getTodoData()
-    }, [userData, properties.disabled])
+        if(!isLoading && authenticated && SERVER_URL) getTodoData()
+    }, [userData, properties.disabled, SERVER_URL])
 
     const addTodo = (e) => {
         e.preventDefault()

diff --git a/client/src/components/welcome.component.js b/client/src/components/welcome.component.js
@@ -1,5 +1,6 @@
 import axios from 'axios'
 import React, { useEffect, useState } from 'react'
+import Skeleton from '@material-ui/lab/Skeleton'
 import { CardActionArea } from '@material-ui/core'
 
 import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification'
@@ -8,8 +9,17 @@ const GITHUB_API = "https://api.github.com/repos/stanleyowen/otlio"
 
 const Landing = () => {
     const [repoInfo, setRepoInfo] = useState([])
+    const [properties, setProperties] = useState({
+        organizingEasier: false,
+        security: false,
+        cloud: false,
+        github: false,
+        support: false
+    })
     const currentversion = document.querySelector('meta[name="version"]').content
 
+    const handleChange = (a, b) => setProperties({ ...properties, [a]: b })
+
     useEffect(() => {
         const element = document.querySelector('.text-animation')
         const data = element.getAttribute('data-elements').split(',')
@@ -70,7 +80,7 @@ const Landing = () => {
                         <h3 className="mt-40 monospace">An open source project, completed with <b>highest standard security</b>, which is easy to use and organize!</h3>
                         <a className="oauth-box outline-blue isCentered block mt-30 mb-20 p-12 button monospace" href="/get-started">Get Started</a>
                     </div>
-                    <img className="center-object" src="https://res.cloudinary.com/stanleyowen/image/upload/v1622072616/otlio/7c27535f88bae9519ceb14a8983c57ff_mpieim.webp" alt="Organzing Easier" />
+                    {properties.organizingEasier ? null : <Skeleton variant="rect" animation="wave" className="center-object" width="100%" height="100%" />} <img className={(properties.organizingEasier ? "":"none ") + "center-object"} src="https://res.cloudinary.com/stanleyowen/image/upload/v1622072616/otlio/7c27535f88bae9519ceb14a8983c57ff_mpieim.webp" alt="Organzing Easier" onLoad={() => handleChange('organizingEasier', true)} />
                 </div>
             </div>
             <div className="isCentered badges mt-40 mb-40">
@@ -80,7 +90,7 @@ const Landing = () => {
             </div>
             <h1 className="mt-40 isCentered monospace">Features</h1>
             <div className="contact__container mb-20">
-                <img className="center-object" src="https://res.cloudinary.com/stanleyowen/image/upload/v1622072617/otlio/e91e6348157868de9dd8b25c81aebfb9_ynvmkr.webp" alt="Built-In Security" />
+                {properties.security ? null : <Skeleton variant="rect" animation="wave" className="center-object" width="100%" height="100%" />} <img className={(properties.security ? "":"none ") + "center-object"} src="https://res.cloudinary.com/stanleyowen/image/upload/v1622072617/otlio/e91e6348157868de9dd8b25c81aebfb9_ynvmkr.webp" alt="Built-In Security" onLoad={() => handleChange('security', true)} />
                 <div className="center-object full-width">
                     <CardActionArea>
                         <div className="p-12">
@@ -98,7 +108,7 @@ const Landing = () => {
                 </div>
             </div>
             <div className="contact__container mb-20">
-                <img className="center-object phone-device" src="https://res.cloudinary.com/stanleyowen/image/upload/v1622072616/otlio/af051c89597cd018ce51bd8fd53014ff_zpl0bt.webp" alt="Reliable Services" />
+                <img className={(properties.cloud ? "":"none ") + "center-object phone-device"} src="https://res.cloudinary.com/stanleyowen/image/upload/v1622072616/otlio/af051c89597cd018ce51bd8fd53014ff_zpl0bt.webp" alt="Reliable Services" onLoad={() => handleChange('cloud', true)} />
                 <div className="center-object full-width">
                     <CardActionArea>
                         <div className="p-12">
@@ -118,10 +128,10 @@ const Landing = () => {
                     </CardActionArea>
                     <a className="oauth-box outline-blue isCentered block mt-10 mb-20 p-12 button monospace" href="https://otlio.statuspage.io/" target="_blank" rel="noopener">Service Status and Uptime</a>
                 </div>
-                <img className="center-object pc-device" src="https://res.cloudinary.com/stanleyowen/image/upload/v1622072616/otlio/af051c89597cd018ce51bd8fd53014ff_zpl0bt.webp" alt="Reliable Services" />
+                {properties.cloud ? null : <Skeleton variant="rect" animation="wave" className="center-object" width="100%" height="100%" />} <img className={(properties.cloud ? "":"none ") + "center-object pc-device"} src="https://res.cloudinary.com/stanleyowen/image/upload/v1622072616/otlio/af051c89597cd018ce51bd8fd53014ff_zpl0bt.webp" alt="Reliable Services" onLoad={() => handleChange('cloud', true)} />
             </div>
             <div className="contact__container mb-40">
-                <img className="center-object" src="https://res.cloudinary.com/stanleyowen/image/upload/v1622072616/otlio/589612f86db2a2b483b007bc2a1e9665_db0zwi.webp" alt="Open Source Project" />
+                {properties.github ? null : <Skeleton variant="rect" animation="wave" className="center-object" width="100%" height="100%" />} <img className={(properties.github ? "":"none ") + "center-object"} src="https://res.cloudinary.com/stanleyowen/image/upload/v1622072616/otlio/589612f86db2a2b483b007bc2a1e9665_db0zwi.webp" alt="Open Source Project" onLoad={() => handleChange('github', true)} />
                 <div className="center-object full-width">
                     <CardActionArea>
                         <div className="p-12">
@@ -139,17 +149,15 @@ const Landing = () => {
                 </div>
             </div>
             <div className="contact__container mb-20">
-                <img className="center-object phone-device" src="https://res.cloudinary.com/stanleyowen/image/upload/v1622188175/otlio/95cc64dd2825f9df13ec4ad683ecf339_ukjqzi.webp" alt="Customer Support" />
+                <img className={(properties.support ? "":"none ") + "center-object phone-device"} src="https://res.cloudinary.com/stanleyowen/image/upload/v1622188175/otlio/95cc64dd2825f9df13ec4ad683ecf339_ukjqzi.webp" alt="Customer Support" />
                 <div className="center-object full-width">
-                    <CardActionArea>
-                        <div className="p-12">
-                            <h1 className="raleway mb-20">Customer Support</h1>
-                            <h3 className="raleway">We are here to help. Get in touch with us or support, let us know how we can help, and our support teams will get in touch with you as soon as possible.</h3>
-                        </div>
-                    </CardActionArea>
+                    <CardActionArea><div className="p-12">
+                        <h1 className="raleway mb-20">Customer Support</h1>
+                        <h3 className="raleway">We are here to help. Get in touch with us or support, let us know how we can help, and our support teams will get in touch with you as soon as possible.</h3>
+                    </div></CardActionArea>
                     <a className="oauth-box outline-blue isCentered block mt-30 mb-20 p-12 button monospace" href="/support">Get Support</a>
                 </div>
-                <img className="center-object pc-device" src="https://res.cloudinary.com/stanleyowen/image/upload/v1622188175/otlio/95cc64dd2825f9df13ec4ad683ecf339_ukjqzi.webp" alt="Customer Support" />
+                {properties.support ? null : <Skeleton variant="rect" animation="wave" className="center-object" width="100%" height="100%" />} <img className={(properties.support ? "":"none ") + "center-object pc-device"} src="https://res.cloudinary.com/stanleyowen/image/upload/v1622188175/otlio/95cc64dd2825f9df13ec4ad683ecf339_ukjqzi.webp" alt="Customer Support" onLoad={() => handleChange('support', true)} />
             </div>
         </div>
     )

diff --git a/server/routes/todo.route.js b/server/routes/todo.route.js
@@ -63,4 +63,19 @@ router.delete('/data', async (req, res, next) =>
     })(req, res, next)
 )
 
+router.put('/index', async (req, res, next) =>
+    passport.authenticate('jwt', { session: false }, (err, user, info) => {
+        if(err) return res.status(500).send(JSON.stringify({status: 500, message: MSG_DESC[0]}, null, 2))
+        else if(info && (info.status ? info.status >= 300 ? true : false : true)) return res.status(info.status ? info.status : info.status = 400).send(JSON.stringify(info, null, 2))
+        else if(user && (req.body = {...req.body, email: user.email}))
+            passport.authenticate('updateIndex', { session: false }, (err, data, info) => {
+                if(err) return res.status(500).send(JSON.stringify({status: 500, message: MSG_DESC[0]}, null, 2))
+                else if(info && (info.status ? info.status >= 300 ? true : false : true)) return res.status(info.status ? info.status : info.status = 400).send(JSON.stringify(info, null, 2))
+                else if(data) return res.status(info.status).send(JSON.stringify(info, null, 2))
+                else return res.status(504).send(JSON.stringify({status: 504, message: MSG_DESC[34]}, null, 2))
+            })(req, res, next)
+        else return res.status(504).send(JSON.stringify({status: 504, message: MSG_DESC[34]}, null, 2))
+    })(req, res, next)
+)
+
 module.exports = router