From 83fe9a5355715a8325fdee589e78cb9da7fc1d5e Mon Sep 17 00:00:00 2001 From: Ravinou Date: Mon, 22 Jul 2024 11:26:30 +0200 Subject: [PATCH] =?UTF-8?q?config:=20=F0=9F=94=A7=20update=20prettier=20fo?= =?UTF-8?q?rmat?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierrc.json | 37 +- .../Repo/QuickCommands/QuickCommands.js | 119 +-- .../QuickCommands/QuickCommands.module.css | 152 +-- Components/Repo/Repo.js | 353 +++---- Components/Repo/Repo.module.css | 319 +++--- Components/UI/CopyButton/CopyButton.js | 77 +- .../UI/CopyButton/CopyButton.module.css | 48 +- Components/UI/Error/Error.js | 2 +- Components/UI/Error/Error.module.css | 24 +- Components/UI/Info/Info.js | 15 +- Components/UI/Info/Info.module.css | 24 +- Components/UI/Layout/Footer/Footer.js | 32 +- Components/UI/Layout/Footer/Footer.module.css | 30 +- Components/UI/Layout/Header/Header.js | 20 +- Components/UI/Layout/Header/Header.module.css | 46 +- Components/UI/Layout/Header/Nav/Nav.js | 80 +- .../UI/Layout/Header/Nav/Nav.module.css | 48 +- Components/UI/Layout/Layout.js | 36 +- Components/UI/Layout/Layout.module.css | 30 +- Components/UI/Layout/NavSide/NavSide.js | 76 +- .../UI/Layout/NavSide/NavSide.module.css | 92 +- .../UI/ShimmerRepoList/ShimmerRepoList.js | 28 +- .../ShimmerRepoList.module.css | 66 +- Components/UI/StorageBar/StorageBar.js | 46 +- .../UI/StorageBar/StorageBar.module.css | 44 +- Components/UI/Switch/Switch.js | 40 +- Components/UI/Switch/Switch.module.css | 176 +-- .../WizardSteps/WizardStep1/WizardStep1.js | 107 +- .../WizardStep1/WizardStep1.module.css | 166 +-- .../WizardSteps/WizardStep2/WizardStep2.js | 262 +++-- .../WizardSteps/WizardStep3/WizardStep3.js | 333 +++--- .../WizardSteps/WizardStep4/WizardStep4.js | 139 ++- .../WizardStepBar/WizardStepBar.js | 153 ++- .../WizardStepBar/WizardStepBar.module.css | 110 +- .../StorageUsedChartBar.js | 152 ++- Containers/RepoList/RepoList.js | 280 +++-- Containers/RepoList/RepoList.module.css | 162 +-- Containers/RepoManage/RepoManage.js | 998 ++++++++---------- Containers/RepoManage/RepoManage.module.css | 350 +++--- Containers/SetupWizard/SetupWizard.js | 253 +++-- Containers/SetupWizard/SetupWizard.module.css | 26 +- .../AppriseAlertSettings.js | 384 ++++--- .../AppriseMode/AppriseMode.js | 298 +++--- .../AppriseURLs/AppriseURLs.js | 283 +++-- .../EmailAlertSettings/EmailAlertSettings.js | 359 +++---- .../EmailSettings/EmailSettings.js | 229 ++-- .../UserSettings/Integrations/Integrations.js | 577 +++++----- .../PasswordSettings/PasswordSettings.js | 220 ++-- Containers/UserSettings/UserSettings.js | 124 +-- .../UserSettings/UserSettings.module.css | 568 +++++----- .../UsernameSettings/UsernameSettings.js | 246 ++--- helpers/functions/auth.js | 4 +- helpers/functions/lanCommandOption.js | 27 +- helpers/functions/nodemailerSMTP.js | 26 +- helpers/functions/repoHistory.js | 63 +- helpers/functions/timestampConverter.js | 18 +- helpers/templates/emailAlertStatus.js | 52 +- helpers/templates/emailTest.js | 34 +- package.json | 4 +- pages/404.js | 52 +- pages/_app.js | 29 +- pages/account/index.js | 56 +- pages/api/account/getAppriseAlert.js | 102 +- pages/api/account/getAppriseMode.js | 105 +- pages/api/account/getAppriseServices.js | 102 +- pages/api/account/getEmailAlert.js | 102 +- pages/api/account/getWizardEnv.js | 78 +- pages/api/account/sendTestApprise.js | 288 +++-- pages/api/account/sendTestEmail.js | 77 +- pages/api/account/token-manager.js | 465 ++++---- pages/api/account/updateAppriseAlert.js | 142 ++- pages/api/account/updateAppriseMode.js | 152 ++- pages/api/account/updateAppriseServices.js | 150 ++- pages/api/account/updateEmail.js | 162 ++- pages/api/account/updateEmailAlert.js | 142 ++- pages/api/account/updatePassword.js | 159 ++- pages/api/account/updateUsername.js | 162 ++- pages/api/auth/[...nextauth].js | 161 ++- pages/api/cronjob/checkStatus.js | 427 ++++---- pages/api/cronjob/getStorageUsed.js | 148 ++- pages/api/repo/add.js | 223 ++-- pages/api/repo/id/[slug]/delete.js | 205 ++-- pages/api/repo/id/[slug]/edit.js | 197 ++-- pages/api/repo/id/[slug]/index.js | 101 +- pages/api/repo/index.js | 86 +- pages/api/version/index.js | 22 +- pages/index.js | 52 +- pages/login.js | 317 +++--- pages/manage-repo/add.js | 30 +- pages/manage-repo/edit/[slug].js | 30 +- pages/monitoring/index.js | 100 +- pages/setup-wizard/[slug].js | 50 +- styles/default.css | 259 +++-- 93 files changed, 6586 insertions(+), 7414 deletions(-) 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}
-