Merge pull request #208 from stanleyowen/v0.5.6

Version 0.5.6

README.md

@@ -25,7 +25,7 @@ Otlio is an **open source** project, completed with **highest standard security*
   There are some several quick start options available:
     - [Fork this repository](https://github.com/stanleyowen/otlio/fork)
     - Clone this repository, type `https://github.com/stanleyowen/otlio.git` in command line
-    - [Download the latest release](https://github.com/stanleyowen/otlio/archive/v0.5.5.zip)
+    - [Download the latest release](https://github.com/stanleyowen/otlio/archive/v0.5.6.zip)
 2. Install All the Dependencies
     - Open your terminal
     - Change directory `cd` to both `client` and `server` folder

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "private": true,
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
@@ -19,7 +19,6 @@
     "cross-env": "^7.0.3",
     "date-fns": "^2.22.1",
     "dompurify": "^2.2.9",
-    "js-file-download": "^0.4.12",
     "react": "^17.0.2",
     "react-app-polyfill": "^2.0.0",
     "react-beautiful-dnd": "^13.1.0",

client/src/App.css

@@ -1,4 +1,4 @@
-/*! Otlio - CSS Version 0.5.5 Copyright 2021 */
+/*! Otlio - CSS Version 0.5.6 Copyright 2021 */
 @import url('https://fonts.googleapis.com/css2?family=Chilanka&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@@ -165,7 +165,7 @@ label { user-select: none; }
     color: #FFF;
     background-color: rgb(252, 52, 52);
 }
-.oauth-box:hover { opacity: 1; transform: scale(1.02) !important; }
+.oauth-box:hover:not(:disabled) { opacity: 1; transform: scale(1.02) !important; }
 .oauth-box svg {
     display: inline-block;
     margin-top: auto;
@@ -258,7 +258,7 @@ body.dark .box-effect::before, body.dark .box-effect::after {
 .oauth-box:hover span#disconnect { display: inline !important; }
 .disabled, .disabled:hover {
     cursor: auto;
-    opacity: 0.7;
+    opacity: 0.6;
 }
 body.dark .gray-bg {
     background-color: rgb(39, 38, 38);
@@ -742,9 +742,7 @@ img {
     margin-bottom: 15px;
     animation: grow 0.5s ease-in forwards;
 }
-.notification.hide {
-    animation: shrink 0.3s ease-out forwards;
-}
+.notification.hide { animation: shrink 0.3s ease-out forwards; }
 .no-bot {
     opacity: 0;
     position: absolute;
@@ -813,7 +811,7 @@ img {
 .contact__sendBtn:hover { background-color: #1976d2; color: #FFFFFF; }
 .contact__sendBtn:focus { background-color: #116dc9; color: #FFFFFF; }
 .footer {
-    padding: 20px 20px 20px 20px;
+    padding: 20px;
     color: #FFFFFF;
     font-weight: bold;
     background-color: #1a73e8;
@@ -845,23 +843,12 @@ img {
 }
 .footer__socialBtn a:hover { background-color: #1a73e8; color: #FFF; }
 .footer__copyright { margin-top: 40px; width: 100%; text-align: center; }
-.content__transition { display: none; }
-.content__fadeIn {
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(20vh);
-    transition: opacity .6s ease-out, transform 1.2s ease-out;
-    will-change: opacity, visibility;
-}
 .visible {
     opacity: 1;
     transform: none;
     visibility: visible;
 }
 .message { margin: 40px auto; }
-.g-recaptcha { display: inline-block; }
-.unverified path { color: hsl(16, 100%, 50%) !important; }
-.verified path { color: rgb(66, 196, 49) !important; }
 .show-password { user-select: none; text-align: center; }
 .container-bar { display: inline-block; }
 .bar1, .bar2, .bar3 {
@@ -871,16 +858,10 @@ img {
     margin: 4.5px 0;
     transition: .4s;
 }
-.bar1 { margin-top: none!important; }
-.closeIcon .bar1 {
-    -webkit-transform: rotate(-45deg) translate(-9px, 9px);
-    transform: rotate(-45deg) translate(-5px, 5px);
-}
+.bar1 { margin-top: none !important; }
+.closeIcon .bar1 { transform: rotate(-45deg) translate(-5px, 5px); }
 .closeIcon .bar2 { opacity: 0; }
-.closeIcon .bar3 {
-    -webkit-transform: rotate(45deg) translate(-2px, 0px);
-    transform: rotate(45deg) translate(-3px, -4px);
-}
+.closeIcon .bar3 { transform: rotate(45deg) translate(-3px, -4px); }
 blockquote{
     display: block;
     background: rgb(255 229 100 / 30%);
@@ -892,9 +873,6 @@ blockquote{
     color: rgb(0, 0, 0);
     text-align: left;
     border-left: 7px solid #ffe564;
-    /* -moz-box-shadow: 2px 2px 15px #ccc;
-    -webkit-box-shadow: 2px 2px 15px #ccc;
-    box-shadow: 2px 2px 15px #ccc; */
 }
 blockquote a{
     text-decoration: none;
@@ -1042,17 +1020,8 @@ footer a:visited { color: #FFF; }
     background: #1a73e8;
 }
 @keyframes blink {
-    from, to {
-        background-color: transparent;
-    }
-    50% {
-        background-color: #1a73e8;
-    }
-}
-@keyframes octocat-wave {
-    0%,100%{transform:rotate(0)}
-    20%,60%{transform:rotate(-25deg)}
-    40%,80%{transform:rotate(10deg)}
+    from, to { background-color: transparent; }
+    50% { background-color: #1a73e8; }
 }
 @keyframes grow {
     from {
@@ -1115,6 +1084,7 @@ footer a:visited { color: #FFF; }
     .center-object { max-width: 100%; }
 }
 @media only screen and (max-width: 600px) {
+    .MuiSkeleton-root { height: 300px !important; }
     .projects__container { grid-template-columns: auto; }
     #additional-feature { grid-template-columns: 100%; }
     .contact__container p { padding: 0px !important; }

client/src/App.js

@@ -28,7 +28,7 @@ export default function App() {
   const [userData, setUserData] = useState({ isLoading: true, type: {}, credentials: {} })
   const protectedRoute = ['app', 'edit', 'account']
   const redirectRoute = ['login', 'get-started']
-  const server_list = ['http://localhost:5000', 'https://otlio.herokuapp.com', 'https://otlio-us.herokuapp.com', 'https://otlio-eu.herokuapp.com']
+  const server_list = ['https://otlio.herokuapp.com', 'https://otlio-us.herokuapp.com', 'https://otlio-eu.herokuapp.com', 'http://localhost:5000']
   const info = JSON.parse(localStorage.getItem('info'))
 
   if(info && info.status && info.message) {

client/src/components/account.component.js

@@ -1,6 +1,5 @@
 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'
@@ -73,6 +72,19 @@ const Account = ({ userData }) => {
         }
     }, [properties.disabled, data])
 
+    useEffect(() => {
+        if(SERVER_URL)
+        document.querySelectorAll('button').forEach(a => {
+            a.classList.remove('disabled')
+            a.removeAttribute('disabled')
+        })
+        else
+        document.querySelectorAll('button').forEach(a => {
+            a.classList.add('disabled')
+            a.setAttribute('disabled', true)
+        })
+    }, [SERVER_URL])
+
     const BackupCodes = () => {
         const codes = [...valid, ...invalid]
         // function validateToken(token) {
@@ -115,7 +127,15 @@ const Account = ({ userData }) => {
     const DownloadCode = (e) => {
         e.preventDefault()
         const btn = document.getElementById('download-code')
-        download(BackupCode(), 'Backup Codes.txt')
+        const tempLink = document.createElement('a')
+        const blob = new Blob ([BackupCode()], { type: 'application/octet-stream' })
+        tempLink.classList.add('none')
+        tempLink.download = 'Backup Codes.txt'
+        tempLink.href = URL.createObjectURL(blob)
+        tempLink.dataset.downloadurl = ['application/octet-stream', tempLink.download, tempLink.href].join(':')
+        document.body.appendChild(tempLink)
+        tempLink.click()
+        document.body.removeChild(tempLink)
         btn.innerText = "Downloaded"
         setTimeout(() => btn.innerText = "Download", 3000)
     }
@@ -277,12 +297,12 @@ const Account = ({ userData }) => {
                             <div className="get_in_touch mt-40"><h1 className="monospace">Third Party</h1></div>
                             <div className="contact__container mt-10">
                                 <p className="pr-10">
-                                    <button className="oauth-box google mt-10 mb-10" onClick={() => authenticated ? window.location = `${SERVER_URL}/oauth/google/auth/connect` : null}>
+                                    <button className="oauth-box google mt-10 mb-10" onClick={() => authenticated && SERVER_URL ? window.location = `${SERVER_URL}/oauth/google/auth/connect` : null}>
                                         <FontAwesomeIcon icon={faGoogle} size='2x'/> {!isLoading && thirdParty && thirdParty.google ? <FontAwesomeIcon icon={faCheck} size='2x'/> : null } <p>{ thirdParty ? thirdParty.google ? <span><span id="connect">Connected</span><span id="disconnect">Disconnect</span></span> : 'Connect' : 'Connect' } with Google</p>
                                     </button>
                                 </p>
                                 <p className="pl-10">
-                                    <button className="oauth-box github mt-10" onClick={() => authenticated ? window.location = `${SERVER_URL}/oauth/github/auth/connect` : null}>
+                                    <button className="oauth-box github mt-10" onClick={() => authenticated && SERVER_URL ? window.location = `${SERVER_URL}/oauth/github/auth/connect` : null}>
                                         <FontAwesomeIcon icon={faGithub} size='2x'/> {!isLoading && thirdParty && thirdParty.github ? <FontAwesomeIcon icon={faCheck} size='2x'/> : null } <p>{ thirdParty ? thirdParty.github ? <span><span id="connect">Connected</span><span id="disconnect">Disconnect</span></span> : 'Connect' : 'Connect' } with GitHub</p>
                                     </button>
                                 </p>

client/src/components/edit.component.js

@@ -27,6 +27,19 @@ const Edit = ({ userData }) => {
     const handleData = (a, b) => setData({ ...data, [a]: b })
     const handleChange = (a, b) => setProperties({ ...properties, [a]: b })
 
+    useEffect(() => {
+        if(SERVER_URL)
+        document.querySelectorAll('button').forEach(a => {
+            a.classList.remove('disabled')
+            a.removeAttribute('disabled')
+        })
+        else
+        document.querySelectorAll('button').forEach(a => {
+            a.classList.add('disabled')
+            a.setAttribute('disabled', true)
+        })
+    }, [SERVER_URL])
+
     useEffect(() => {
         async function getData() {
             await axios.get(`${SERVER_URL}/todo/data`, { params: {id: data._id}, withCredentials: true })

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

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Tooltip } from '@material-ui/core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
@@ -20,6 +20,19 @@ const ResetPassword = ({ userData }) => {
 
     const handleChange = (a, b) => setProperties({ ...properties, [a]: b })
 
+    useEffect(() => {
+        if(SERVER_URL)
+        document.querySelectorAll('button').forEach(a => {
+            a.classList.remove('disabled')
+            a.removeAttribute('disabled')
+        })
+        else
+        document.querySelectorAll('button').forEach(a => {
+            a.classList.add('disabled')
+            a.setAttribute('disabled', true)
+        })
+    }, [SERVER_URL])
+
     const Submit = (e) => {
         e.preventDefault()
         const btn = document.getElementById('reset-password')

client/src/components/home.component.js

@@ -58,6 +58,19 @@ const Home = ({ userData }) => {
         })
     }
 
+    useEffect(() => {
+        if(SERVER_URL)
+        document.querySelectorAll('button').forEach(a => {
+            a.classList.remove('disabled')
+            a.removeAttribute('disabled')
+        })
+        else
+        document.querySelectorAll('button').forEach(a => {
+            a.classList.add('disabled')
+            a.setAttribute('disabled', true)
+        })
+    }, [SERVER_URL])
+
     useEffect(() => {
         const background = document.getElementById('background')
         const modal = document.getElementById('modal')
@@ -146,7 +159,7 @@ const Home = ({ userData }) => {
                                         </IconButton></Tooltip>
                                     </span>
                                     <span className="btn-config">
-                                        <Tooltip title="Delete Task"><IconButton onClick={() => deleteData(a._id)}>
+                                        <Tooltip title="Delete Task"><IconButton onClick={SERVER_URL ? () => deleteData(a._id) : null}>
                                             <FontAwesomeIcon icon={faTrash} style={{ fontSize: ".8em" }} />
                                         </IconButton></Tooltip>
                                     </span>

client/src/components/landing.component.js

@@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react'
 import Skeleton from '@material-ui/lab/Skeleton'
 import { CardActionArea } from '@material-ui/core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faDraftingCompass, faFingerprint, faSyncAlt } from '@fortawesome/free-solid-svg-icons'
+import { faDraftingCompass, faFingerprint, faMoon, faSyncAlt } from '@fortawesome/free-solid-svg-icons'
 
 import { setNotification, NOTIFICATION_TYPES } from '../libraries/setNotification'
 
@@ -221,6 +221,15 @@ const Landing = () => {
                         <p className="raleway mt-10 p-12">Simply drag the task and drop onto the desired position!</p>
                     </div>
                 </div>
+                <div className="m-10">
+                    <div className="projects__card">
+                        <div className="blue-text flex">
+                            <FontAwesomeIcon className="col isCentered blue-text" icon={faMoon} size="3x" />
+                            <p className="h2 col monospace m-auto">Light and Dark UI</p>
+                        </div>
+                        <p className="raleway mt-10 p-12">Choose how Otlio looks to you, smoothly switch between light and dark mode.</p>
+                    </div>
+                </div>
             </div>
             <footer className="footer">
 				<div>

client/src/components/login.component.js

@@ -38,6 +38,19 @@ const Login = ({ userData }) => {
     const handleLogin = (a, b) => setLogin({ ...login, [a]: b })
     const handleChange = (a, b) => setProperties({ ...properties, [a]: b })
 
+    useEffect(() => {
+        if(SERVER_URL)
+        document.querySelectorAll('button').forEach(a => {
+            a.classList.remove('disabled')
+            a.removeAttribute('disabled')
+        })
+        else
+        document.querySelectorAll('button').forEach(a => {
+            a.classList.add('disabled')
+            a.setAttribute('disabled', true)
+        })
+    }, [SERVER_URL])
+
     useEffect(() => {
         const btn = document.getElementById('send-otp')
         const otp = document.querySelectorAll('#otp > *[id]')
@@ -155,7 +168,7 @@ const Login = ({ userData }) => {
                             </div>
                         </div>
                         <p className="isCentered mt-20">If you're unable to receive a security code, use one of your <button type="button" className="link-btn link" onClick={() => {handleData('isBackupCode', !data.isBackupCode); document.getElementById('token-1').focus()}}>Backup Codes</button></p>
-                        <p className="isCentered mt-10">Hasn't Received the Code? <button type="button" className="link-btn link" id="send-otp" onClick={properties.disabled ? null : () => handleChange('sendOTP', true)}>Resend Code</button></p>
+                        <p className="isCentered mt-10">Hasn't Received the Code? <button type="button" className="link-btn link" id="send-otp" onClick={properties.disabled || !SERVER_URL ? null : () => handleChange('sendOTP', true)}>Resend Code</button></p>
                         <div className="contact__container isCentered no-padding">
                             <p className="pr-10"><button type="reset" className="oauth-box google isCentered block mt-10 mb-10 p-12 button" id="cancel" onClick={() => window.location='/logout'}>Cancel</button></p>
                             <p className="pl-10"><button type="submit" className="oauth-box google isCentered block mt-10 p-12 button" id="verify">Verify</button></p>
@@ -180,10 +193,10 @@ const Login = ({ userData }) => {
         <div className="form__contact">
             <div className="get_in_touch"><h1>Login</h1></div>
             <div className="oauth-container">
-                <button className="oauth-box google" onClick={() => window.location = `${SERVER_URL}/oauth/google/auth`}>
+                <button className="oauth-box google" onClick={SERVER_URL ? () => window.location = `${SERVER_URL}/oauth/google/auth` : null}>
                     <FontAwesomeIcon icon={faGoogle} size='2x'/> <p> Login with Google</p>
                 </button>
-                <button className="oauth-box github mt-20" onClick={() => window.location = `${SERVER_URL}/oauth/github/auth`}>
+                <button className="oauth-box github mt-20" onClick={SERVER_URL ? () => window.location = `${SERVER_URL}/oauth/github/auth` : null}>
                     <FontAwesomeIcon icon={faGithub} size='2x'/> <p> Login with GitHub</p>
                 </button>
             </div>

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

@@ -28,6 +28,19 @@ const OAuth = ({ userData }) => {
     const handleData = (a, b) => setData({ ...data, [a]: b })
     const handleChange = (a, b) => setProperties({ ...properties, [a]: b })
 
+    useEffect(() => {
+        if(SERVER_URL)
+        document.querySelectorAll('button').forEach(a => {
+            a.classList.remove('disabled')
+            a.removeAttribute('disabled')
+        })
+        else
+        document.querySelectorAll('button').forEach(a => {
+            a.classList.add('disabled')
+            a.setAttribute('disabled', true)
+        })
+    }, [SERVER_URL])
+
     useEffect(() => {
         async function validateData() {
             await axios.get(`${SERVER_URL}/oauth/${service}/register`, { params: {email: data.email}, withCredentials: true })