diff --git a/.prettierrc.json b/.prettierrc.json index d4fb785..a7c797f 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,21 +1,20 @@ { - "trailingComma": "es5", - "tabWidth": 4, - "semi": true, - "singleQuote": true, - "arrowParens": "always", - "bracketSpacing": true, - "endOfLine": "lf", - "htmlWhitespaceSensitivity": "css", - "insertPragma": false, - "singleAttributePerLine": false, - "bracketSameLine": false, - "jsxBracketSameLine": false, - "jsxSingleQuote": true, - "printWidth": 80, - "proseWrap": "preserve", - "quoteProps": "as-needed", - "requirePragma": false, - "useTabs": false, - "embeddedLanguageFormatting": "auto" + "trailingComma": "es5", + "tabWidth": 2, + "semi": true, + "singleQuote": true, + "arrowParens": "always", + "bracketSpacing": true, + "endOfLine": "lf", + "htmlWhitespaceSensitivity": "css", + "insertPragma": false, + "singleAttributePerLine": false, + "bracketSameLine": false, + "jsxSingleQuote": true, + "printWidth": 100, + "proseWrap": "preserve", + "quoteProps": "as-needed", + "requirePragma": false, + "useTabs": false, + "embeddedLanguageFormatting": "auto" } diff --git a/Components/Repo/QuickCommands/QuickCommands.js b/Components/Repo/QuickCommands/QuickCommands.js index 4208f18..d73d4a2 100644 --- a/Components/Repo/QuickCommands/QuickCommands.js +++ b/Components/Repo/QuickCommands/QuickCommands.js @@ -5,73 +5,62 @@ import classes from './QuickCommands.module.css'; import { IconSettingsAutomation, IconCopy } from '@tabler/icons-react'; export default function QuickCommands(props) { - ////Vars - const wizardEnv = props.wizardEnv; - //Needed to generate command for borg over LAN instead of WAN if env vars are set and option enabled. - let FQDN; - let SSH_SERVER_PORT; - if ( - props.lanCommand && - wizardEnv.FQDN_LAN && - wizardEnv.SSH_SERVER_PORT_LAN - ) { - FQDN = wizardEnv.FQDN_LAN; - SSH_SERVER_PORT = - wizardEnv.SSH_SERVER_PORT_LAN === 'false' - ? '' - : ':' + wizardEnv.SSH_SERVER_PORT_LAN; - } else { - FQDN = wizardEnv.FQDN; - SSH_SERVER_PORT = - wizardEnv.SSH_SERVER_PORT === 'false' - ? '' - : ':' + wizardEnv.SSH_SERVER_PORT; - } + ////Vars + const wizardEnv = props.wizardEnv; + //Needed to generate command for borg over LAN instead of WAN if env vars are set and option enabled. + let FQDN; + let SSH_SERVER_PORT; + if (props.lanCommand && wizardEnv.FQDN_LAN && wizardEnv.SSH_SERVER_PORT_LAN) { + FQDN = wizardEnv.FQDN_LAN; + SSH_SERVER_PORT = + wizardEnv.SSH_SERVER_PORT_LAN === 'false' ? '' : ':' + wizardEnv.SSH_SERVER_PORT_LAN; + } else { + FQDN = wizardEnv.FQDN; + SSH_SERVER_PORT = wizardEnv.SSH_SERVER_PORT === 'false' ? '' : ':' + wizardEnv.SSH_SERVER_PORT; + } - //State - const [isCopied, setIsCopied] = useState(false); + //State + const [isCopied, setIsCopied] = useState(false); - //Functions - const handleCopy = async () => { - // Asynchronously call copy to clipboard - navigator.clipboard - .writeText( - `ssh://${wizardEnv.UNIX_USER}@${FQDN}${SSH_SERVER_PORT}/./${props.repositoryName}` - ) - .then(() => { - // If successful, update the isCopied state value - setIsCopied(true); - setTimeout(() => { - setIsCopied(false); - }, 1500); - }) - .catch((err) => { - console.log(err); - }); - }; + //Functions + const handleCopy = async () => { + // Asynchronously call copy to clipboard + navigator.clipboard + .writeText(`ssh://${wizardEnv.UNIX_USER}@${FQDN}${SSH_SERVER_PORT}/./${props.repositoryName}`) + .then(() => { + // If successful, update the isCopied state value + setIsCopied(true); + setTimeout(() => { + setIsCopied(false); + }, 1500); + }) + .catch((err) => { + console.log(err); + }); + }; - return ( -
- {isCopied ? ( -
Copied !
- ) : ( -
- ssh://{wizardEnv.UNIX_USER}@{FQDN} - {SSH_SERVER_PORT}/./ - {props.repositoryName} -
- )} - - {props.lanCommand &&
LAN
} - -
- -
- -
-
+ return ( +
+ {isCopied ? ( +
Copied !
+ ) : ( +
+ ssh://{wizardEnv.UNIX_USER}@{FQDN} + {SSH_SERVER_PORT}/./ + {props.repositoryName}
- ); + )} + + {props.lanCommand &&
LAN
} + +
+ +
+ +
+
+
+ ); } diff --git a/Components/Repo/QuickCommands/QuickCommands.module.css b/Components/Repo/QuickCommands/QuickCommands.module.css index 13ce01f..faba43d 100644 --- a/Components/Repo/QuickCommands/QuickCommands.module.css +++ b/Components/Repo/QuickCommands/QuickCommands.module.css @@ -1,116 +1,116 @@ .container { - display: flex; - align-items: center; - align-self: flex-start; - margin: auto 47px auto auto; + display: flex; + align-items: center; + align-self: flex-start; + margin: auto 47px auto auto; } .icons { - position: relative; - bottom: 13px; + position: relative; + bottom: 13px; } .quickSetting { - position: absolute; - visibility: visible; - opacity: 1; + position: absolute; + visibility: visible; + opacity: 1; } .lanBadge { - border-radius: 5px; - border: 1px solid #6d4aff; - color: #6d4aff; - font-size: 0.9em; - padding: 2px 5px; - margin-right: 8px; + border-radius: 5px; + border: 1px solid #6d4aff; + color: #6d4aff; + font-size: 0.9em; + padding: 2px 5px; + margin-right: 8px; } .tooltip { - visibility: hidden; - opacity: 0; - width: 100%; - height: 100%; - border: 1px solid #6d4aff21; - background-color: #f5f5f5; - border-radius: 5px; - box-shadow: 0 0px 1px rgba(0, 0, 0, 0.1) inset; - color: #65748b; - font-size: 0.95rem; - padding: 5px 5px; - transition: 0.5s opacity; + visibility: hidden; + opacity: 0; + width: 100%; + height: 100%; + border: 1px solid #6d4aff21; + background-color: #f5f5f5; + border-radius: 5px; + box-shadow: 0 0px 1px rgba(0, 0, 0, 0.1) inset; + color: #65748b; + font-size: 0.95rem; + padding: 5px 5px; + transition: 0.5s opacity; } .copyButton { - position: absolute; - visibility: hidden; - opacity: 0; - border: none; - background-color: none; + position: absolute; + visibility: hidden; + opacity: 0; + border: none; + background-color: none; } .copyValid { - margin: auto 8px auto auto; - font-size: 0.95rem; - color: #6d4aff; - animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + margin: auto 8px auto auto; + font-size: 0.95rem; + color: #6d4aff; + animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } @keyframes scale-in-center { - 0% { - -webkit-transform: scale(0); - transform: scale(0); - opacity: 1; - } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 1; - } + 0% { + -webkit-transform: scale(0); + transform: scale(0); + opacity: 1; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } } /* On Hover */ .container:hover .tooltip { - visibility: visible; - opacity: 1; - width: 100%; - height: 100%; - border: 1px solid #6d4aff21; - background-color: #f5f5f5; - border-radius: 5px; - box-shadow: 0 0px 1px rgba(0, 0, 0, 0.1) inset; - color: #65748b; - font-size: 0.95rem; - padding: 5px 5px; - transition: 0.5s opacity; + visibility: visible; + opacity: 1; + width: 100%; + height: 100%; + border: 1px solid #6d4aff21; + background-color: #f5f5f5; + border-radius: 5px; + box-shadow: 0 0px 1px rgba(0, 0, 0, 0.1) inset; + color: #65748b; + font-size: 0.95rem; + padding: 5px 5px; + transition: 0.5s opacity; } .container:hover .copyButton { - position: absolute; - visibility: visible; - opacity: 1; - border: none; - background-color: transparent; - cursor: pointer; + position: absolute; + visibility: visible; + opacity: 1; + border: none; + background-color: transparent; + cursor: pointer; } .container:hover .quickSetting { - position: absolute; - visibility: hidden; - opacity: 0; + position: absolute; + visibility: hidden; + opacity: 0; } .container:hover .lanBadge { - visibility: hidden; - opacity: 0; - width: 0; - height: 0; - margin: 0; - padding: 0; + visibility: hidden; + opacity: 0; + width: 0; + height: 0; + margin: 0; + padding: 0; } @media all and (max-width: 1000px) { - .container { - display: none; - } + .container { + display: none; + } } diff --git a/Components/Repo/Repo.js b/Components/Repo/Repo.js index 2dce1ae..1e2312a 100644 --- a/Components/Repo/Repo.js +++ b/Components/Repo/Repo.js @@ -2,216 +2,179 @@ import { useState } from 'react'; import classes from './Repo.module.css'; import { - IconSettings, - IconInfoCircle, - IconChevronDown, - IconChevronUp, - IconBellOff, - IconLockPlus, + IconSettings, + IconInfoCircle, + IconChevronDown, + IconChevronUp, + IconBellOff, + IconLockPlus, } from '@tabler/icons-react'; import timestampConverter from '../../helpers/functions/timestampConverter'; import StorageBar from '../UI/StorageBar/StorageBar'; import QuickCommands from './QuickCommands/QuickCommands'; export default function Repo(props) { - //Load displayDetails from LocalStorage - const displayDetailsFromLS = () => { - try { - if ( - localStorage.getItem('displayDetailsRepo' + props.id) === null - ) { - localStorage.setItem( - 'displayDetailsRepo' + props.id, - JSON.stringify(true) - ); - return true; - } else { - return JSON.parse( - localStorage.getItem('displayDetailsRepo' + props.id) - ); - } - } catch (error) { - console.log( - 'LocalStorage error, key', - 'displayDetailsRepo' + props.id, - 'will be removed. Try again.', - 'Error message on this key : ', - error - ); - localStorage.removeItem('displayDetailsRepo' + props.id); - } - }; + //Load displayDetails from LocalStorage + const displayDetailsFromLS = () => { + try { + if (localStorage.getItem('displayDetailsRepo' + props.id) === null) { + localStorage.setItem('displayDetailsRepo' + props.id, JSON.stringify(true)); + return true; + } else { + return JSON.parse(localStorage.getItem('displayDetailsRepo' + props.id)); + } + } catch (error) { + console.log( + 'LocalStorage error, key', + 'displayDetailsRepo' + props.id, + 'will be removed. Try again.', + 'Error message on this key : ', + error + ); + localStorage.removeItem('displayDetailsRepo' + props.id); + } + }; - //States - const [displayDetails, setDisplayDetails] = useState(displayDetailsFromLS); + //States + const [displayDetails, setDisplayDetails] = useState(displayDetailsFromLS); - //BUTTON : Display or not repo details for ONE repo - const displayDetailsForOneHandler = (boolean) => { - //Update localStorage - localStorage.setItem( - 'displayDetailsRepo' + props.id, - JSON.stringify(boolean) - ); - setDisplayDetails(boolean); - }; + //BUTTON : Display or not repo details for ONE repo + const displayDetailsForOneHandler = (boolean) => { + //Update localStorage + localStorage.setItem('displayDetailsRepo' + props.id, JSON.stringify(boolean)); + setDisplayDetails(boolean); + }; - //Status indicator - const statusIndicator = () => { - return props.status - ? classes.statusIndicatorGreen - : classes.statusIndicatorRed; - }; + //Status indicator + const statusIndicator = () => { + return props.status ? classes.statusIndicatorGreen : classes.statusIndicatorRed; + }; - //Alert indicator - const alertIndicator = () => { - if (props.alert === 0) { - return ( -
- -
- ); - } - }; + //Alert indicator + const alertIndicator = () => { + if (props.alert === 0) { + return ( +
+ +
+ ); + } + }; - const appendOnlyModeIndicator = () => { - if (props.appendOnlyMode) { - return ( -
- -
- ); - } - }; + const appendOnlyModeIndicator = () => { + if (props.appendOnlyMode) { + return ( +
+ +
+ ); + } + }; - return ( + return ( + <> + {displayDetails ? ( <> - {displayDetails ? ( - <> -
-
-
-
{props.alias}
- {appendOnlyModeIndicator()} - {alertIndicator()} - {props.comment && ( -
- -
- {props.comment} -
-
- )} - -
+
+
+
+
{props.alias}
+ {appendOnlyModeIndicator()} + {alertIndicator()} + {props.comment && ( +
+ +
{props.comment}
+
+ )} + +
- - - - - - - - - - - - - - - - - - - - - -
Repository - Storage Size - - Storage Used - - Last change - IDEdit
{props.repositoryName}{props.storageSize} GB - - -
- {props.lastSave === 0 - ? '-' - : timestampConverter( - props.lastSave - )} -
- 		#{props.id} -
- - props.repoManageEditHandler() - } - /> -
-
+ + + + + + + + + + + + + + + + + + + + + +
RepositoryStorage SizeStorage UsedLast changeIDEdit
{props.repositoryName}{props.storageSize} GB + + +
+ {props.lastSave === 0 ? '-' : timestampConverter(props.lastSave)}
- - ) : ( - <> -
-
-
-
{props.alias}
- {appendOnlyModeIndicator()} - {alertIndicator()} - {props.comment && ( -
- -
- {props.comment} -
-
- )} -
-
- {props.lastSave === 0 - ? null - : timestampConverter(props.lastSave)} - - #{props.id} - -
+
#{props.id} +
+ props.repoManageEditHandler()} + />
- - )} - {displayDetails ? ( -
- { - displayDetailsForOneHandler(false); - }} - /> -
- ) : ( -
- { - displayDetailsForOneHandler(true); - }} - /> -
- )} +
+
- ); + ) : ( + <> +
+
+
+
{props.alias}
+ {appendOnlyModeIndicator()} + {alertIndicator()} + {props.comment && ( +
+ +
{props.comment}
+
+ )} +
+
+ {props.lastSave === 0 ? null : timestampConverter(props.lastSave)} + #{props.id} +
+
+ + )} + {displayDetails ? ( +
+ { + displayDetailsForOneHandler(false); + }} + /> +
+ ) : ( +
+ { + displayDetailsForOneHandler(true); + }} + /> +
+ )} + + ); } diff --git a/Components/Repo/Repo.module.css b/Components/Repo/Repo.module.css index edbf05e..d2f52fe 100644 --- a/Components/Repo/Repo.module.css +++ b/Components/Repo/Repo.module.css @@ -1,250 +1,249 @@ /*Repo CLOSE*/ .RepoClose { - display: flex; - justify-content: space-between; - align-items: center; - box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.12), - 0 1px 2px rgba(0, 0, 0, 0.24); - width: auto; - max-height: 65px; - margin: 20px 0px 0px 0px; - border-radius: 5px; - overflow: visible; - /* Need to display comment on hover (which is position : absolute) */ - position: relative; + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: + 0 1px 3px rgba(0, 0, 0, 0.12), + 0 1px 2px rgba(0, 0, 0, 0.24); + width: auto; + max-height: 65px; + margin: 20px 0px 0px 0px; + border-radius: 5px; + overflow: visible; + /* Need to display comment on hover (which is position : absolute) */ + position: relative; } .closeFlex { - display: flex; - align-items: center; - padding: 15px; + display: flex; + align-items: center; + padding: 15px; } .RepoClose .lastSave { - padding: 15px; + padding: 15px; } /* REPO OPEN */ .RepoOpen { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.12), - 0 1px 2px rgba(0, 0, 0, 0.24); - width: auto; - max-height: 200px; - margin: 20px 0px 0px 0px; - padding: 15px; - border-radius: 5px; - transition: max-height 0.1s linear; - overflow: visible; - /* Need to display comment on hover (which is position : absolute) */ - position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + box-shadow: + 0 1px 3px rgba(0, 0, 0, 0.12), + 0 1px 2px rgba(0, 0, 0, 0.24); + width: auto; + max-height: 200px; + margin: 20px 0px 0px 0px; + padding: 15px; + border-radius: 5px; + transition: max-height 0.1s linear; + overflow: visible; + /* Need to display comment on hover (which is position : absolute) */ + position: relative; } .openFlex { - display: flex; - align-items: center; - align-self: flex-start; - width: 100%; + display: flex; + align-items: center; + align-self: flex-start; + width: 100%; } .tabInfo { - width: 100%; - overflow-wrap: break-word; - border-collapse: collapse; - background: #fff; - border-radius: 10px; - overflow: hidden; - margin: 25px auto; - table-layout: fixed; + width: 100%; + overflow-wrap: break-word; + border-collapse: collapse; + background: #fff; + border-radius: 10px; + overflow: hidden; + margin: 25px auto; + table-layout: fixed; } .tabInfo thead tr { - height: 50px; - background: #111827; - color: #fff; + height: 50px; + background: #111827; + color: #fff; } .tabInfo thead th { - font-size: 1em; - color: #fff; - line-height: 1.2; - font-weight: normal; + font-size: 1em; + color: #fff; + line-height: 1.2; + font-weight: normal; } .tabInfo tbody tr { - background-color: #f3f4f6; - height: 50px; + background-color: #f3f4f6; + height: 50px; } .tabInfo tbody tr th { - color: #65748b; - font-size: 0.95rem; - font-weight: 400; + color: #65748b; + font-size: 0.95rem; + font-weight: 400; } /*STATUS*/ .statusIndicatorGreen { - background: rgb(9, 255, 0); - border-radius: 50%; - margin: 10px; - height: 15px; - width: 15px; - box-shadow: 0 0 0 0 rgb(9, 255, 0); - transform: scale(1); - animation: pulseGreen 5s infinite; - animation-delay: 1s; + background: rgb(9, 255, 0); + border-radius: 50%; + margin: 10px; + height: 15px; + width: 15px; + box-shadow: 0 0 0 0 rgb(9, 255, 0); + transform: scale(1); + animation: pulseGreen 5s infinite; + animation-delay: 1s; } @keyframes pulseGreen { - 0% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(17, 255, 0, 0.7); - } + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(17, 255, 0, 0.7); + } - 10% { - transform: scale(1); - box-shadow: 0 0 0 10px rgba(17, 255, 0, 0); - } + 10% { + transform: scale(1); + box-shadow: 0 0 0 10px rgba(17, 255, 0, 0); + } - 90% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(17, 255, 0, 0); - } + 90% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(17, 255, 0, 0); + } } .statusIndicatorRed { - background: rgb(255, 0, 0); - border-radius: 50%; - margin: 10px; - height: 15px; - width: 15px; + background: rgb(255, 0, 0); + border-radius: 50%; + margin: 10px; + height: 15px; + width: 15px; - box-shadow: 0 0 0 0 rgb(255, 0, 0); - transform: scale(1); - animation: pulseRed 5s infinite; - animation-delay: 0.5s; + box-shadow: 0 0 0 0 rgb(255, 0, 0); + transform: scale(1); + animation: pulseRed 5s infinite; + animation-delay: 0.5s; } @keyframes pulseRed { - 0% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); - } + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); + } - 10% { - transform: scale(1); - box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); - } + 10% { + transform: scale(1); + box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); + } - 90% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); - } + 90% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); + } } /* Alert icon */ .alertIcon { - display: flex; - flex-direction: row; - align-items: center; - margin-left: 10px; + display: flex; + flex-direction: row; + align-items: center; + margin-left: 10px; } .appendOnlyModeIcon { - display: flex; - flex-direction: row; - align-items: center; - margin-left: 10px; + display: flex; + flex-direction: row; + align-items: center; + margin-left: 10px; } /* GENERAL */ .alias { - font-weight: bold; - color: #111827; - font-size: 1.05em; + font-weight: bold; + color: #111827; + font-size: 1.05em; } .lastSave { - color: #65748b; + color: #65748b; } .editButton { - cursor: pointer; + cursor: pointer; } /* Comment */ .comment { - display: flex; - flex-direction: row; - align-items: center; - margin-left: 10px; + display: flex; + flex-direction: row; + align-items: center; + margin-left: 10px; } .toolTip { - visibility: hidden; - width: auto; - height: auto; - max-width: 400px; - max-height: 250px; - background-color: #fff; - color: #637381; - text-align: center; - border-radius: 6px; - padding: 5px 5px; - position: absolute; - z-index: 1; - margin: 0px 0 0 20px; - opacity: 1; - transition: 0.5s opacity; - box-shadow: - 0 3px 6px rgba(0, 0, 0, 0.16), - 0 3px 6px rgba(0, 0, 0, 0.23); - overflow: auto; + visibility: hidden; + width: auto; + height: auto; + max-width: 400px; + max-height: 250px; + background-color: #fff; + color: #637381; + text-align: center; + border-radius: 6px; + padding: 5px 5px; + position: absolute; + z-index: 1; + margin: 0px 0 0 20px; + opacity: 1; + transition: 0.5s opacity; + box-shadow: + 0 3px 6px rgba(0, 0, 0, 0.16), + 0 3px 6px rgba(0, 0, 0, 0.23); + overflow: auto; } .comment:hover .toolTip, .comment:active .toolTip { - visibility: visible; - opacity: 1; + visibility: visible; + opacity: 1; } .chevron { - margin: auto; + margin: auto; } .chevron :focus, .chevron :hover { - cursor: pointer; - filter: invert(27%) sepia(82%) saturate(2209%) hue-rotate(240deg) - brightness(99%) contrast(105%); + cursor: pointer; + filter: invert(27%) sepia(82%) saturate(2209%) hue-rotate(240deg) brightness(99%) contrast(105%); } /* MOBILE */ @media all and (max-width: 1000px) { - .tabInfo { - display: none; - } - .toolTip { - display: none; - } - .comment { - display: none; - } - .lastSave { - display: none; - } - .closeFlex { - margin: auto; - } - .openFlex { - margin: auto; - width: auto; - } + .tabInfo { + display: none; + } + .toolTip { + display: none; + } + .comment { + display: none; + } + .lastSave { + display: none; + } + .closeFlex { + margin: auto; + } + .openFlex { + margin: auto; + width: auto; + } } diff --git a/Components/UI/CopyButton/CopyButton.js b/Components/UI/CopyButton/CopyButton.js index b9eb0b2..6de1f00 100644 --- a/Components/UI/CopyButton/CopyButton.js +++ b/Components/UI/CopyButton/CopyButton.js @@ -4,51 +4,38 @@ import { useState } from 'react'; import { IconChecks, IconCopy } from '@tabler/icons-react'; export default function CopyButton(props) { - //State - const [isCopied, setIsCopied] = useState(false); + //State + const [isCopied, setIsCopied] = useState(false); - //Function - const handleCopy = async (data) => { - navigator.clipboard - .writeText(data) - .then(() => { - // If successful, update the isCopied state value - setIsCopied(true); - setTimeout(() => { - setIsCopied(false); - }, 1500); - }) - .catch((err) => { - console.log(err); - }); - }; + //Function + const handleCopy = async (data) => { + navigator.clipboard + .writeText(data) + .then(() => { + // If successful, update the isCopied state value + setIsCopied(true); + setTimeout(() => { + setIsCopied(false); + }, 1500); + }) + .catch((err) => { + console.log(err); + }); + }; - return ( - <> - - {isCopied - ? !props.displayIconConfirmation && ( - Copied ! - ) - : null} - - ); + return ( + <> + + {isCopied + ? !props.displayIconConfirmation && Copied ! + : null} + + ); } diff --git a/Components/UI/CopyButton/CopyButton.module.css b/Components/UI/CopyButton/CopyButton.module.css index c9ad029..9e8a4ea 100644 --- a/Components/UI/CopyButton/CopyButton.module.css +++ b/Components/UI/CopyButton/CopyButton.module.css @@ -1,35 +1,35 @@ .copyButton { - visibility: visible; - opacity: 1; - border: none; - background-color: transparent; - cursor: pointer; - display: flex; - align-items: center; + visibility: visible; + opacity: 1; + border: none; + background-color: transparent; + cursor: pointer; + display: flex; + align-items: center; } .copyButton span { - font-size: 0.95rem; - color: #6d4aff; - margin-right: 5px; - user-select: text; + font-size: 0.95rem; + color: #6d4aff; + margin-right: 5px; + user-select: text; } .copyValid { - font-size: 0.95rem; - color: #6d4aff; - animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + font-size: 0.95rem; + color: #6d4aff; + animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } @keyframes scale-in-center { - 0% { - -webkit-transform: scale(0); - transform: scale(0); - opacity: 1; - } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 1; - } + 0% { + -webkit-transform: scale(0); + transform: scale(0); + opacity: 1; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } } diff --git a/Components/UI/Error/Error.js b/Components/UI/Error/Error.js index 2a3fe1f..f677994 100644 --- a/Components/UI/Error/Error.js +++ b/Components/UI/Error/Error.js @@ -2,5 +2,5 @@ import classes from './Error.module.css'; export default function Error(props) { - return
{props.message}
; + return
{props.message}
; } diff --git a/Components/UI/Error/Error.module.css b/Components/UI/Error/Error.module.css index 19b75f6..9947cb2 100644 --- a/Components/UI/Error/Error.module.css +++ b/Components/UI/Error/Error.module.css @@ -1,18 +1,18 @@ .errorMessage { - margin: 15px 0px; - background-color: red; - color: white; - padding: 15px; - border-radius: 5px; - animation: myAnim 1s ease 0s 1 normal forwards; + margin: 15px 0px; + background-color: red; + color: white; + padding: 15px; + border-radius: 5px; + animation: myAnim 1s ease 0s 1 normal forwards; } @keyframes myAnim { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 100% { - opacity: 1; - } + 100% { + opacity: 1; + } } diff --git a/Components/UI/Info/Info.js b/Components/UI/Info/Info.js index a818253..5597ef9 100644 --- a/Components/UI/Info/Info.js +++ b/Components/UI/Info/Info.js @@ -2,13 +2,10 @@ import classes from './Info.module.css'; export default function Info(props) { - return ( -
- {props.message} - {props.children} -
- ); + return ( +
+ {props.message} + {props.children} +
+ ); } diff --git a/Components/UI/Info/Info.module.css b/Components/UI/Info/Info.module.css index 0bb624d..d6df06d 100644 --- a/Components/UI/Info/Info.module.css +++ b/Components/UI/Info/Info.module.css @@ -1,18 +1,18 @@ .infoMessage { - margin: 15px 0px; - background-color: rgb(17, 147, 0); - color: white; - padding: 15px; - border-radius: 5px; - animation: myAnim 1s ease 0s 1 normal forwards; + margin: 15px 0px; + background-color: rgb(17, 147, 0); + color: white; + padding: 15px; + border-radius: 5px; + animation: myAnim 1s ease 0s 1 normal forwards; } @keyframes myAnim { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 100% { - opacity: 1; - } + 100% { + opacity: 1; + } } diff --git a/Components/UI/Layout/Footer/Footer.js b/Components/UI/Layout/Footer/Footer.js index 10e2566..0e16c54 100644 --- a/Components/UI/Layout/Footer/Footer.js +++ b/Components/UI/Layout/Footer/Footer.js @@ -3,22 +3,22 @@ import classes from './Footer.module.css'; import packageInfo from '../../../../package.json'; function Footer() { - return ( -
-

- About{' '} - - BorgWarehouse - {' '} - - v{packageInfo.version} -

-
- ); + return ( +
+

+ About{' '} + + BorgWarehouse + {' '} + - v{packageInfo.version} +

+
+ ); } export default Footer; diff --git a/Components/UI/Layout/Footer/Footer.module.css b/Components/UI/Layout/Footer/Footer.module.css index c966167..60819d2 100644 --- a/Components/UI/Layout/Footer/Footer.module.css +++ b/Components/UI/Layout/Footer/Footer.module.css @@ -1,26 +1,26 @@ .footer { - color: #494b7a; - text-align: center; - position: absolute; - bottom: 0; - width: 100%; - height: 50px; + color: #494b7a; + text-align: center; + position: absolute; + bottom: 0; + width: 100%; + height: 50px; } .footer p { - padding-left: 70px; + padding-left: 70px; } a.site { - color: #6d4aff; - text-decoration: none; + color: #6d4aff; + text-decoration: none; } @media all and (max-width: 1000px) { - .footer { - width: 100%; - } - .footer p { - padding-left: 0; - } + .footer { + width: 100%; + } + .footer p { + padding-left: 0; + } } diff --git a/Components/UI/Layout/Header/Header.js b/Components/UI/Layout/Header/Header.js index 9bb2f64..d96a71d 100644 --- a/Components/UI/Layout/Header/Header.js +++ b/Components/UI/Layout/Header/Header.js @@ -5,17 +5,17 @@ import classes from './Header.module.css'; import Nav from './Nav/Nav'; function Header() { - return ( -
-
-
BorgWarehouse
+ return ( +
+
+
BorgWarehouse
-
-
- ); +
+
+ ); } export default Header; diff --git a/Components/UI/Layout/Header/Header.module.css b/Components/UI/Layout/Header/Header.module.css index c213172..d90271d 100644 --- a/Components/UI/Layout/Header/Header.module.css +++ b/Components/UI/Layout/Header/Header.module.css @@ -1,31 +1,31 @@ .Header { - width: 100%; - background: #111827; - box-shadow: - 0 3px 6px rgba(0, 0, 0, 0.16), - 0 3px 6px rgba(0, 0, 0, 0.23); - height: 50px; - color: white; - display: flex; - align-items: center; - position: static; - top: 0; - z-index: 1000; + width: 100%; + background: #111827; + box-shadow: + 0 3px 6px rgba(0, 0, 0, 0.16), + 0 3px 6px rgba(0, 0, 0, 0.23); + height: 50px; + color: white; + display: flex; + align-items: center; + position: static; + top: 0; + z-index: 1000; } .flex { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - max-width: 1500px; - margin: auto; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + max-width: 1500px; + margin: auto; } .logo { - font-size: 1.5em; - font-weight: bold; - color: #6d4aff; - text-shadow: #6d4aff 0px 0px 18px; - margin-left: 20px; + font-size: 1.5em; + font-weight: bold; + color: #6d4aff; + text-shadow: #6d4aff 0px 0px 18px; + margin-left: 20px; } diff --git a/Components/UI/Layout/Header/Nav/Nav.js b/Components/UI/Layout/Header/Nav/Nav.js index 24d035b..af38d71 100644 --- a/Components/UI/Layout/Header/Nav/Nav.js +++ b/Components/UI/Layout/Header/Nav/Nav.js @@ -6,52 +6,42 @@ import { useRouter } from 'next/router'; import { useSession, signOut } from 'next-auth/react'; export default function Nav() { - ////Var - //Get the current route to light the right Item - const router = useRouter(); - const currentRoute = router.pathname; - const { status, data } = useSession(); + ////Var + //Get the current route to light the right Item + const router = useRouter(); + const currentRoute = router.pathname; + const { status, data } = useSession(); - //Function - const onLogoutClickedHandler = async () => { - //This bug is open : https://github.com/nextauthjs/next-auth/issues/1542 - //I put redirect to false and redirect with router. - //The result on logout click is an ugly piece of page for a few milliseconds before returning to the login page. - //It's ugly if you are perfectionist but functional and invisible for most of users while waiting for a next-auth fix. - await signOut({ redirect: false }); - router.replace('/login'); - }; + //Function + const onLogoutClickedHandler = async () => { + //This bug is open : https://github.com/nextauthjs/next-auth/issues/1542 + //I put redirect to false and redirect with router. + //The result on logout click is an ugly piece of page for a few milliseconds before returning to the login page. + //It's ugly if you are perfectionist but functional and invisible for most of users while waiting for a next-auth fix. + await signOut({ redirect: false }); + router.replace('/login'); + }; - return ( -
    -
  • - -
    -
    - -
    -
    - {status === 'authenticated' && data.user.name} -
    -
    - -
    • + return ( +
      +
    • + +
      +
      + +
      +
      {status === 'authenticated' && data.user.name}
      +
      + +
      • -
    • -
      - - - -
      -
      • -
    - ); +
  • +
    + + + +
    +
    • +
+ ); } diff --git a/Components/UI/Layout/Header/Nav/Nav.module.css b/Components/UI/Layout/Header/Nav/Nav.module.css index 5b8c396..8032f69 100644 --- a/Components/UI/Layout/Header/Nav/Nav.module.css +++ b/Components/UI/Layout/Header/Nav/Nav.module.css @@ -1,54 +1,54 @@ .Nav { - list-style-type: none; - margin: 0px 15px 0px 0px; - padding: 0; - display: flex; + list-style-type: none; + margin: 0px 15px 0px 0px; + padding: 0; + display: flex; } .user { - display: flex; - align-items: center; + display: flex; + align-items: center; } .username::first-letter { - text-transform: capitalize; + text-transform: capitalize; } .account { - background: none; - border: none; - cursor: pointer; - color: #494b7a; + background: none; + border: none; + cursor: pointer; + color: #494b7a; } .account a { - color: #494b7a; - text-decoration: none; + color: #494b7a; + text-decoration: none; } .account :focus, .account .active, .account :hover { - color: #6d4aff; - text-shadow: #6d4aff 0px 0px 18px; + color: #6d4aff; + text-shadow: #6d4aff 0px 0px 18px; } .logout { - background: none; - border: none; - cursor: pointer; - color: #494b7a; + background: none; + border: none; + cursor: pointer; + color: #494b7a; } .logout :focus, .logout .active, .logout :hover { - color: #6d4aff; - text-shadow: #6d4aff 0px 0px 18px; + color: #6d4aff; + text-shadow: #6d4aff 0px 0px 18px; } @media all and (max-width: 1000px) { - .account { - display: none; - } + .account { + display: none; + } } diff --git a/Components/UI/Layout/Layout.js b/Components/UI/Layout/Layout.js index 96fcedd..f09e325 100644 --- a/Components/UI/Layout/Layout.js +++ b/Components/UI/Layout/Layout.js @@ -6,25 +6,25 @@ import classes from './Layout.module.css'; import { useSession } from 'next-auth/react'; function Layout(props) { - //Var - const { status } = useSession(); + //Var + const { status } = useSession(); - if (status === 'authenticated') { - return ( - <> -
- -
{props.children}
-