+
+ );
+ }
+ };
+
+ const appendOnlyModeIndicator = () => {
+ if (props.appendOnlyMode) {
+ return (
+
+
+ );
+ }
+ };
+
+ const mobileView = () => {
+ return (
+ <>
+
+
+
+ );
+ };
+
+ if (isMobile) {
+ return mobileView();
+ } else {
+ return (
+ <>
+ {displayDetails ? (
+ <>
+
+
+
+
+
+ {appendOnlyModeIndicator()}
+ {alertIndicator()}
+ {props.comment && (
+ {props.alias}
+
+
+ )}
+
+ {props.comment}
+
+
+ {props.lastSave === 0
+ ? '-'
+ : formatDistanceStrict(fromUnixTime(props.lastSave), currentDate, {
+ addSuffix: true,
+ })}
+
+
+
+
+
+
+
+
+ ) : (
+ <>
+
+
+ {props.comment && (
+
+
+
+ )}
+ {appendOnlyModeIndicator()}
+ {alertIndicator()}
+ {props.comment}
+
+
+
+ {props.alias}
+ | Repository | +Storage Size | +Storage Used | +Last change | +Edit | +
|---|---|---|---|---|
| {props.repositoryName} | +{props.storageSize} GB | +
+ |
+
+
+ {props.lastSave === 0
+ ? '-'
+ : formatDistanceStrict(fromUnixTime(props.lastSave), currentDate, {
+ addSuffix: true,
+ })}
+
+ |
+
+
+
+ |
+
+
+
+ )}
+ {displayDetails ? (
+
+
+
+
+
+ {appendOnlyModeIndicator()}
+ {alertIndicator()}
+ {props.comment && (
+ {props.alias}
+
+
+ )}
+
+ {props.comment}
+
+
+ {props.lastSave === 0
+ ? '-'
+ : formatDistanceStrict(fromUnixTime(props.lastSave), currentDate, {
+ addSuffix: true,
+ })}
+
+
+
+ {
+ displayDetailsForOneHandler(false);
+ }}
+ />
+
+ ) : (
+
+ {
+ displayDetailsForOneHandler(true);
+ }}
+ />
+
+ )}
+
+ );
+ }
+}
diff --git a/Components/UI/CopyButton/CopyButton.js b/Components/UI/CopyButton/CopyButton.js
deleted file mode 100644
index 0079d35..0000000
--- a/Components/UI/CopyButton/CopyButton.js
+++ /dev/null
@@ -1,39 +0,0 @@
-//Lib
-import classes from './CopyButton.module.css';
-import { useState } from 'react';
-import { IconCopy } from '@tabler/icons-react';
-
-export default function CopyButton(props) {
- //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);
- });
- };
-
- return (
- <>
-
- {isCopied ? (
- Copied !
- ) : null}
-
- );
-}
diff --git a/Components/UI/CopyButton/CopyButton.module.css b/Components/UI/CopyButton/CopyButton.module.css
index ab59788..9e8a4ea 100644
--- a/Components/UI/CopyButton/CopyButton.module.css
+++ b/Components/UI/CopyButton/CopyButton.module.css
@@ -1,26 +1,35 @@
.copyButton {
- visibility: visible;
- opacity: 1;
- border: none;
- background-color: transparent;
- cursor: pointer;
+ 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;
}
.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/CopyButton/CopyButton.tsx b/Components/UI/CopyButton/CopyButton.tsx
new file mode 100644
index 0000000..1258f39
--- /dev/null
+++ b/Components/UI/CopyButton/CopyButton.tsx
@@ -0,0 +1,46 @@
+import classes from './CopyButton.module.css';
+import { useState, ReactNode } from 'react';
+import { IconChecks, IconCopy } from '@tabler/icons-react';
+
+type CopyButtonProps = {
+ dataToCopy: string;
+ children?: ReactNode;
+ displayIconConfirmation?: boolean;
+ size?: number;
+ stroke?: number;
+};
+
+export default function CopyButton(props: CopyButtonProps) {
+ const [isCopied, setIsCopied] = useState(false);
+
+ const handleCopy = async (data: string) => {
+ 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}
+
+ );
+}
diff --git a/Components/UI/Error/Error.js b/Components/UI/Error/Error.js
deleted file mode 100644
index 2a3fe1f..0000000
--- a/Components/UI/Error/Error.js
+++ /dev/null
@@ -1,6 +0,0 @@
-//Lib
-import classes from './Error.module.css';
-
-export default function Error(props) {
- 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/Error/Error.tsx b/Components/UI/Error/Error.tsx
new file mode 100644
index 0000000..d0c4da8
--- /dev/null
+++ b/Components/UI/Error/Error.tsx
@@ -0,0 +1,9 @@
+import classes from './Error.module.css';
+
+type ErrorProps = {
+ message: string;
+};
+
+export default function Error(props: ErrorProps) {
+ return {props.message}
;
+}
diff --git a/Components/UI/Info/Info.js b/Components/UI/Info/Info.js
deleted file mode 100644
index e06c0bd..0000000
--- a/Components/UI/Info/Info.js
+++ /dev/null
@@ -1,6 +0,0 @@
-//Lib
-import classes from './Info.module.css';
-
-export default function Info(props) {
- return {props.message}
;
-}
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/Info/Info.tsx b/Components/UI/Info/Info.tsx
new file mode 100644
index 0000000..8e2f729
--- /dev/null
+++ b/Components/UI/Info/Info.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import classes from './Info.module.css';
+
+type InfoProps = {
+ message: string;
+ color?: string;
+ children?: ReactNode;
+};
+
+export default function Info(props: InfoProps) {
+ return (
+
+ {props.message}
+ {props.children}
+
+ );
+}
diff --git a/Components/UI/Layout/Footer/Footer.js b/Components/UI/Layout/Footer/Footer.js
deleted file mode 100644
index 10e2566..0000000
--- a/Components/UI/Layout/Footer/Footer.js
+++ /dev/null
@@ -1,24 +0,0 @@
-//Lib
-import classes from './Footer.module.css';
-import packageInfo from '../../../../package.json';
-
-function Footer() {
- return (
-
-
- );
-}
-
-export default Footer;
diff --git a/Components/UI/Layout/Footer/Footer.module.css b/Components/UI/Layout/Footer/Footer.module.css
index c966167..e19fc52 100644
--- a/Components/UI/Layout/Footer/Footer.module.css
+++ b/Components/UI/Layout/Footer/Footer.module.css
@@ -1,26 +1,25 @@
.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%;
}
.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/Footer/Footer.tsx b/Components/UI/Layout/Footer/Footer.tsx
new file mode 100644
index 0000000..58cd034
--- /dev/null
+++ b/Components/UI/Layout/Footer/Footer.tsx
@@ -0,0 +1,23 @@
+import classes from './Footer.module.css';
+import packageInfo from '~/package.json';
+
+function Footer() {
+ return (
+ - About{' '} - - BorgWarehouse - {' '} - - v{packageInfo.version} -
-
+
+ );
+}
+
+export default Footer;
diff --git a/Components/UI/Layout/Header/Header.js b/Components/UI/Layout/Header/Header.js
deleted file mode 100644
index 9bb2f64..0000000
--- a/Components/UI/Layout/Header/Header.js
+++ /dev/null
@@ -1,21 +0,0 @@
-//Lib
-import classes from './Header.module.css';
-
-//Components
-import Nav from './Nav/Nav';
-
-function Header() {
- return (
- + About{' '} + + BorgWarehouse + {' '} + - v{packageInfo.version} +
+
-
- BorgWarehouse
-
-
-
+
+
+
+
+
+ -
-
-
-
- -- ---
- - {status === 'authenticated' && data.user.name} --
-
- -
- - --
- -
-
-
+
-
+
+ ++ +++
+ {status === 'authenticated' && data.user?.name}+
+
+ -
+ + ++
+ +
+
{props.children}
-
-
- );
- } else if (status === 'unauthenticated') {
- return (
- <>
- {props.children}
-
- );
- }
-}
-
-export default Layout;
diff --git a/Components/UI/Layout/Layout.module.css b/Components/UI/Layout/Layout.module.css
index c49a84f..1d428e9 100644
--- a/Components/UI/Layout/Layout.module.css
+++ b/Components/UI/Layout/Layout.module.css
@@ -1,23 +1,23 @@
.mainWrapper {
- margin: auto;
- max-width: 1400px;
- height: calc(100vh - 100px);
- display: flex;
- justify-content: center;
- align-items: flex-start;
- overflow: auto;
- /* to prevent main content under navside on little screen */
- padding-left: 90px;
- /* Disable scrollbar */
- scrollbar-width: none;
+ margin: auto;
+ max-width: 1400px;
+ height: calc(100vh - 100px);
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ overflow: auto;
+ /* to prevent main content under navside on little screen */
+ padding-left: 90px;
+ /* Disable scrollbar */
+ scrollbar-width: none;
}
.login {
- background-color: #111827;
+ background-color: #111827;
}
@media all and (max-width: 1000px) {
- .mainWrapper {
- padding-left: 0px;
- }
+ .mainWrapper {
+ padding-left: 0px;
+ }
}
diff --git a/Components/UI/Layout/Layout.tsx b/Components/UI/Layout/Layout.tsx
new file mode 100644
index 0000000..b9444e4
--- /dev/null
+++ b/Components/UI/Layout/Layout.tsx
@@ -0,0 +1,32 @@
+import Footer from './Footer/Footer';
+import Header from './Header/Header';
+import NavSide from './NavSide/NavSide';
+import classes from './Layout.module.css';
+import { useSession } from 'next-auth/react';
+
+type LayoutProps = {
+ children: React.ReactNode;
+};
+
+function Layout(props: LayoutProps) {
+ const { status } = useSession();
+
+ if (status === 'authenticated') {
+ return (
+ <>
+ {props.children}
+
+
+ );
+ } else if (status === 'unauthenticated') {
+ return (
+ <>
+ {props.children}
+
+ );
+ }
+}
+
+export default Layout;
diff --git a/Components/UI/Layout/NavSide/NavSide.js b/Components/UI/Layout/NavSide/NavSide.js
deleted file mode 100644
index 921ef1b..0000000
--- a/Components/UI/Layout/NavSide/NavSide.js
+++ /dev/null
@@ -1,56 +0,0 @@
-//Lib
-import classes from './NavSide.module.css';
-import {
- IconServer,
- IconSettingsAutomation,
- IconActivityHeartbeat,
-} from '@tabler/icons-react';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-
-//Composants
-
-export default function NavSide() {
- ////Var
- //Get the current route to light the right Item
- const router = useRouter();
- const currentRoute = router.pathname;
-
- return (
- -
-
-
-
-
- - Repositories -
- -
-
-
- - Setup Wizard -
- -
-
-
- - Monitoring -
-
-
+
-
+
+
+ + Repositories +
+ -
+
+
+ + Setup Wizard +
+ -
+
+
+ + Monitoring +
+
-
- );
-}
diff --git a/Components/UI/ShimmerRepoList/ShimmerRepoList.module.css b/Components/UI/ShimmerRepoList/ShimmerRepoList.module.css
index e0045c1..4d386f9 100644
--- a/Components/UI/ShimmerRepoList/ShimmerRepoList.module.css
+++ b/Components/UI/ShimmerRepoList/ShimmerRepoList.module.css
@@ -1,50 +1,50 @@
.container {
- display: flex;
- width: 90%;
- justify-content: center;
- flex-direction: column;
+ display: flex;
+ width: 90%;
+ justify-content: center;
+ flex-direction: column;
}
.loadingButtonContainer {
- display: flex;
- flex-direction: column;
- margin: 20px auto;
- width: 90%;
- justify-content: center;
+ display: flex;
+ flex-direction: column;
+ margin: 20px auto;
+ width: 90%;
+ justify-content: center;
}
.buttonIsLoading {
- height: 62px;
- width: 211px;
- margin: auto;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
- background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
- border-radius: 5px;
- background-size: 200% 100%;
- animation: 1.5s shine linear infinite;
+ height: 62px;
+ width: 211px;
+ margin: auto;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+ background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
+ border-radius: 5px;
+ background-size: 200% 100%;
+ animation: 1.5s shine linear infinite;
}
.loadingRepoContainer {
- display: flex;
- justify-content: center;
- flex-direction: column;
- width: 100%;
- margin: auto;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ width: 100%;
+ margin: auto;
}
.repoIsLoading {
- width: 100%;
- height: 65px;
- margin: 20px auto;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
- background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
- border-radius: 5px;
- background-size: 200% 100%;
- animation: 1.5s shine linear infinite;
+ width: 100%;
+ height: 65px;
+ margin: 20px auto;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+ background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
+ border-radius: 5px;
+ background-size: 200% 100%;
+ animation: 1.5s shine linear infinite;
}
@keyframes shine {
- to {
- background-position-x: -200%;
- }
+ to {
+ background-position-x: -200%;
+ }
}
diff --git a/Components/UI/ShimmerRepoList/ShimmerRepoList.tsx b/Components/UI/ShimmerRepoList/ShimmerRepoList.tsx
new file mode 100644
index 0000000..f23ef90
--- /dev/null
+++ b/Components/UI/ShimmerRepoList/ShimmerRepoList.tsx
@@ -0,0 +1,22 @@
+import classes from './ShimmerRepoList.module.css';
+
+const LOADING_REPO_COUNT = 5;
+
+function ShimmerRepoItem() {
+ return ;
+}
+
+export default function ShimmerRepoList() {
+ return (
+
-
-
-
-
-
-
-
-
-
-
+
+ );
+}
diff --git a/Components/UI/StorageBar/StorageBar.js b/Components/UI/StorageBar/StorageBar.js
deleted file mode 100644
index d94c482..0000000
--- a/Components/UI/StorageBar/StorageBar.js
+++ /dev/null
@@ -1,32 +0,0 @@
-//Lib
-import classes from './StorageBar.module.css';
-
-export default function StorageBar(props) {
- //Var
- //storageUsed is in octet, storageSize is in GB. Round to 1 decimal for %.
- const storageUsedPercent = (
- ((props.storageUsed / 1000000) * 100) /
- props.storageSize
- ).toFixed(1);
-
- return (
-
+
+
+
+ {Array.from({ length: LOADING_REPO_COUNT }, (_, i) => (
+
+
-
- );
-}
diff --git a/Components/UI/StorageBar/StorageBar.module.css b/Components/UI/StorageBar/StorageBar.module.css
index 77296e2..11df1d9 100644
--- a/Components/UI/StorageBar/StorageBar.module.css
+++ b/Components/UI/StorageBar/StorageBar.module.css
@@ -1,36 +1,36 @@
.barContainer {
- margin: auto;
+ margin: auto;
}
.barBackground {
- background-color: #704dff5e;
- border-radius: 3px;
- height: 19px;
- width: 100%;
- position: relative;
+ background-color: #704dff5e;
+ border-radius: 3px;
+ height: 19px;
+ width: 100%;
+ position: relative;
}
.progressionStyle {
- background-color: #704dff;
- border-radius: 3px;
- height: 19px;
- width: 100%;
+ background-color: #704dff;
+ border-radius: 3px;
+ height: 19px;
+ width: 100%;
}
.tooltip {
- visibility: hidden;
- width: auto;
- height: auto;
- color: #fff;
- text-align: center;
- opacity: 0;
- transition: 0.5s opacity;
- position: absolute;
- left: calc(30%);
- top: 0px;
+ visibility: hidden;
+ width: auto;
+ height: auto;
+ color: #fff;
+ text-align: center;
+ opacity: 0;
+ transition: 0.5s opacity;
+ position: absolute;
+ left: calc(30%);
+ top: 0px;
}
.barBackground:hover .tooltip {
- visibility: visible;
- opacity: 1;
+ visibility: visible;
+ opacity: 1;
}
diff --git a/Components/UI/StorageBar/StorageBar.tsx b/Components/UI/StorageBar/StorageBar.tsx
new file mode 100644
index 0000000..e34b6ee
--- /dev/null
+++ b/Components/UI/StorageBar/StorageBar.tsx
@@ -0,0 +1,33 @@
+import classes from './StorageBar.module.css';
+
+type StorageBarProps = {
+ storageUsed: number;
+ storageSize: number;
+};
+
+export default function StorageBar(props: StorageBarProps) {
+ //storageUsed is in kB, storageSize is in GB. Round to 1 decimal for %.
+ const storageUsedPercent = (((props.storageUsed / 1024 ** 2) * 100) / props.storageSize).toFixed(
+ 1
+ );
+
+ return (
+
-
-
-
-
-
- {storageUsedPercent}% (
- {(props.storageUsed / 1000000).toFixed(1)} GB /{' '}
- {props.storageSize} GB)
-
-
+
+ );
+}
diff --git a/Components/UI/Switch/Switch.js b/Components/UI/Switch/Switch.js
deleted file mode 100644
index caf75d9..0000000
--- a/Components/UI/Switch/Switch.js
+++ /dev/null
@@ -1,26 +0,0 @@
-//Lib
-import classes from './Switch.module.css';
-
-export default function Switch(props) {
- return (
- <>
-
+
+
+
+
+
+ {storageUsedPercent}% ({(props.storageUsed / 1024 ** 2).toFixed(1)} GB /{' '}
+ {props.storageSize} GB)
+
+
-
-
- );
-}
diff --git a/Components/UI/Switch/Switch.module.css b/Components/UI/Switch/Switch.module.css
index cb50cc3..90a0166 100644
--- a/Components/UI/Switch/Switch.module.css
+++ b/Components/UI/Switch/Switch.module.css
@@ -1,157 +1,84 @@
+/* Wrapper styles */
.switchWrapper {
- display: flex;
- flex-direction: column;
- margin-bottom: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin-bottom: 20px;
}
+/* Switch container */
.switch {
- display: flex;
+ display: flex;
+ align-items: center;
+ gap: 10px;
}
-.switchDescription {
- display: flex;
- margin: 8px 0px 0px 0px;
- color: #6c737f;
- font-size: 0.875rem;
-}
-
-.pureMaterialSwitch {
- z-index: 0;
- position: relative;
- display: inline-block;
- color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
- font-family: var(
- --pure-material-font,
- 'Roboto',
- 'Segoe UI',
- BlinkMacSystemFont,
- system-ui,
- -apple-system
- );
- font-size: 16px;
- line-height: 1.5;
+/* Label */
+.switchLabel {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ cursor: pointer;
+ position: relative;
+ user-select: none;
}
/* Input */
-.pureMaterialSwitch > input {
- appearance: none;
- -moz-appearance: none;
- -webkit-appearance: none;
- z-index: -1;
- position: absolute;
- right: 6px;
- top: -8px;
- display: block;
- margin: 0;
- border-radius: 50%;
- width: 40px;
- height: 40px;
- background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
- outline: none;
- opacity: 0;
- transform: scale(1);
- pointer-events: none;
- transition:
- opacity 0.3s 0.1s,
- transform 0.2s 0.1s;
+.switchLabel input {
+ display: none;
}
-/* Span */
-.pureMaterialSwitch > span {
- display: inline-block;
- width: 100%;
- cursor: pointer;
- font-size: 1rem;
- font-weight: 500;
- color: #494b7a;
+/* Slider */
+.switchSlider {
+ position: relative;
+ width: 40px;
+ height: 20px;
+ background: #ccc;
+ border-radius: 12px;
+ transition: #ccc 0.3s ease;
}
-/* Track */
-.pureMaterialSwitch > span::before {
- content: '';
- float: right;
- display: inline-block;
- margin: 5px 0 5px 30px;
- border-radius: 7px;
- width: 36px;
- height: 14px;
- background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
- vertical-align: top;
- transition:
- background-color 0.2s,
- opacity 0.2s;
+.switchSlider::after {
+ content: '';
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ width: 16px;
+ height: 16px;
+ background: #fff;
+ border-radius: 50%;
+ transition: transform 0.3s ease;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
-/* Thumb */
-.pureMaterialSwitch > span::after {
- content: '';
- position: absolute;
- top: 2px;
- right: 16px;
- border-radius: 50%;
- width: 20px;
- height: 20px;
- background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
- box-shadow:
- 0 3px 1px -2px rgba(0, 0, 0, 0.2),
- 0 2px 2px 0 rgba(0, 0, 0, 0.14),
- 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- transition:
- background-color 0.2s,
- transform 0.2s;
+/* Checked styles */
+.switchLabel input:checked + .switchSlider {
+ background: #704dff;
}
-/* Checked */
-.pureMaterialSwitch > input:checked {
- right: -10px;
- background-color: rgb(var(--pure-material-primary-rgb, 109, 74, 255));
+.switchLabel input:checked + .switchSlider::after {
+ transform: translateX(20px);
}
-.pureMaterialSwitch > input:checked + span::before {
- background-color: rgba(var(--pure-material-primary-rgb, 109, 74, 255), 0.6);
+/* Disabled styles */
+.switchLabel input:disabled + .switchSlider {
+ background: #e0e0e0;
}
-.pureMaterialSwitch > input:checked + span::after {
- background-color: rgb(var(--pure-material-primary-rgb, 109, 74, 255));
- transform: translateX(16px);
+.switchLabel input:disabled + .switchSlider::after {
+ background: #bdbdbd;
}
-/* Active */
-.pureMaterialSwitch > input:active {
- opacity: 1;
- transform: scale(0);
- transition:
- transform 0s,
- opacity 0s;
+/* Switch text */
+.switchText {
+ font-size: 1rem;
+ color: #494b7a;
+ font-weight: 500;
}
-.pureMaterialSwitch > input:active + span::before {
- background-color: rgba(var(--pure-material-primary-rgb, 109, 74, 255), 0.6);
+/* Description */
+.switchDescription {
+ font-size: 0.875rem;
+ color: #6c737f;
+ margin-top: 4px;
}
-
-.pureMaterialSwitch > input:checked:active + span::before {
- background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-}
-
-/* Disabled */
-.pureMaterialSwitch > input:disabled + span {
- cursor: wait;
-}
-
-/* .pureMaterialSwitch > input:disabled {
- opacity: 0;
-}
-
-.pureMaterialSwitch > input:disabled + span {
- color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
- opacity: 0.38;
- cursor: default;
-}
-
-.pureMaterialSwitch > input:disabled + span::before {
- background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-}
-
-.pureMaterialSwitch > input:checked:disabled + span::before {
- background-color: rgba(var(--pure-material-primary-rgb, 109, 74, 255), 0.6);
-} */
diff --git a/Components/UI/Switch/Switch.tsx b/Components/UI/Switch/Switch.tsx
new file mode 100644
index 0000000..f32fa42
--- /dev/null
+++ b/Components/UI/Switch/Switch.tsx
@@ -0,0 +1,45 @@
+import { Optional } from '~/types';
+import classes from './Switch.module.css';
+import { useLoader } from '~/contexts/LoaderContext';
+import { useEffect } from 'react';
+
+type SwitchProps = {
+ switchName: string;
+ switchDescription: string;
+ checked: Optional
-
-
-
- {props.switchDescription}
-
-
+
+ );
+}
diff --git a/Components/WizardSteps/WizardStep1/WizardStep1.js b/Components/WizardSteps/WizardStep1/WizardStep1.js
deleted file mode 100644
index 93b4d3c..0000000
--- a/Components/WizardSteps/WizardStep1/WizardStep1.js
+++ /dev/null
@@ -1,69 +0,0 @@
-//Lib
-import React from 'react';
-import classes from '../WizardStep1/WizardStep1.module.css';
-import { IconDeviceDesktopAnalytics, IconTerminal2 } from '@tabler/icons-react';
-
-function WizardStep1() {
- return (
-
+
+
+ {props.switchDescription}
+
-
-
-
-
- 
-
- );
-}
-
-export default WizardStep1;
diff --git a/Components/WizardSteps/WizardStep1/WizardStep1.module.css b/Components/WizardSteps/WizardStep1/WizardStep1.module.css
index e9ec3f5..b62ae36 100644
--- a/Components/WizardSteps/WizardStep1/WizardStep1.module.css
+++ b/Components/WizardSteps/WizardStep1/WizardStep1.module.css
@@ -1,137 +1,137 @@
.container {
- margin: 40px 20px 20px 5px;
- box-shadow:
- 0 1px 3px rgba(0, 0, 0, 0.12),
- 0 1px 2px rgba(0, 0, 0, 0.24);
- border-radius: 5px;
- text-align: left;
- padding: 30px 70px;
- animation: animStep ease-in 0.3s 1 normal none;
+ margin: 40px 20px 20px 5px;
+ box-shadow:
+ 0 1px 3px rgba(0, 0, 0, 0.12),
+ 0 1px 2px rgba(0, 0, 0, 0.24);
+ border-radius: 5px;
+ text-align: left;
+ padding: 30px 70px;
+ animation: animStep ease-in 0.3s 1 normal none;
}
@keyframes animStep {
- 0% {
- opacity: 0;
- }
+ 0% {
+ opacity: 0;
+ }
- 50% {
- opacity: 0.5;
- }
+ 50% {
+ opacity: 0.5;
+ }
- 100% {
- opacity: 1;
- }
+ 100% {
+ opacity: 1;
+ }
}
.container h1 {
- text-align: center;
- font-size: 1.7em;
- padding-bottom: 20px;
- display: flex;
- align-items: center;
+ text-align: center;
+ font-size: 1.7em;
+ padding-bottom: 20px;
+ display: flex;
+ align-items: center;
}
.container a {
- color: #6d4aff;
+ color: #6d4aff;
}
.separator {
- height: 15px;
+ height: 15px;
}
.container {
- line-height: 1.8em;
- font-size: 1.05em;
+ line-height: 1.8em;
+ font-size: 1.05em;
}
h1 .icon {
- color: #6d4aff;
- margin-right: 5px;
+ color: #6d4aff;
+ margin-right: 5px;
}
.container img {
- max-width: 650px;
+ max-width: 650px;
}
.code {
- background-color: #111827;
- color: #f8f8f2;
- font-family:
- ui-monospace,
- SFMono-Regular,
- Menlo,
- Monaco,
- Consolas,
- liberation mono,
- courier new,
- monospace;
- padding: 5px 15px;
- border-radius: 5px;
- display: inline-block;
- margin: 5px 0px 10px 0px;
- font-size: 0.8em;
- white-space: pre;
- line-height: 1em;
+ background-color: #111827;
+ color: #f8f8f2;
+ font-family:
+ ui-monospace,
+ SFMono-Regular,
+ Menlo,
+ Monaco,
+ Consolas,
+ liberation mono,
+ courier new,
+ monospace;
+ padding: 5px 15px;
+ border-radius: 5px;
+ display: inline-block;
+ margin: 5px 0px 10px 0px;
+ font-size: 0.8em;
+ white-space: pre;
+ line-height: 1em;
}
.verifyOrange {
- background-color: #ff7a1b;
- color: #fff;
- font-weight: 500;
- border-radius: 5px;
- padding: 15px;
+ background-color: #ff7a1b;
+ color: #fff;
+ font-weight: 500;
+ border-radius: 5px;
+ padding: 15px;
}
.verifyRed {
- background-color: #ea1313;
- color: #fff;
- font-weight: 500;
- border-radius: 5px;
- padding: 15px;
- margin-top: 10px;
+ background-color: #ea1313;
+ color: #fff;
+ font-weight: 500;
+ border-radius: 5px;
+ padding: 15px;
+ margin-top: 10px;
}
.verifyOrange li,
.container li {
- list-style: disc;
- margin-top: 1px;
- margin-left: 30px;
+ list-style: disc;
+ margin-top: 1px;
+ margin-left: 30px;
}
.verifyOrange li .sshPublicKey {
- background-color: #282a36;
- font-family:
- ui-monospace,
- SFMono-Regular,
- Menlo,
- Monaco,
- Consolas,
- liberation mono,
- courier new,
- monospace;
- border-radius: 5px;
- padding: 5px;
+ background-color: #282a36;
+ font-family:
+ ui-monospace,
+ SFMono-Regular,
+ Menlo,
+ Monaco,
+ Consolas,
+ liberation mono,
+ courier new,
+ monospace;
+ border-radius: 5px;
+ padding: 5px;
}
.verifyRed .alert,
.verifyOrange .alert {
- text-align: center;
- font-size: 1.1em;
- padding-bottom: 10px;
- display: flex;
- align-items: center;
+ text-align: center;
+ font-size: 1.1em;
+ padding-bottom: 10px;
+ display: flex;
+ align-items: center;
}
.iconAlert {
- margin-right: 5px;
+ margin-right: 5px;
}
.note {
- font-style: italic;
- color: #494b7a4d;
- font-size: 0.8em;
+ font-style: italic;
+ color: #494b7a4d;
+ font-size: 0.8em;
}
.note a {
- color: #6d4aff73;
+ color: #6d4aff73;
}
diff --git a/Components/WizardSteps/WizardStep1/WizardStep1.tsx b/Components/WizardSteps/WizardStep1/WizardStep1.tsx
new file mode 100644
index 0000000..d417ddc
--- /dev/null
+++ b/Components/WizardSteps/WizardStep1/WizardStep1.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import classes from '../WizardStep1/WizardStep1.module.css';
+import { IconDeviceDesktopAnalytics, IconTerminal2 } from '@tabler/icons-react';
+
+function WizardStep1() {
+ return (
+
-
-
- We recommend using the official BorgBackup client which
- is supported by most Linux distributions.
-
- More information about installation can be{' '} - - found here - - .
- To automate your backup, you can also use{' '} - - Borgmatic - {' '} - which is a{' '} - - Debian package - - . On the step 4, you will find a pattern of default config. -
-
- - More information about installation can be{' '} - - found here - - .
- To automate your backup, you can also use{' '} - - Borgmatic - {' '} - which is a{' '} - - Debian package - - . On the step 4, you will find a pattern of default config. -
-
-
- Vorta is an opensource (GPLv3) backup client for Borg
- Backup.
-
- It runs on Linux, MacOS and Windows (via Windowsโ Linux - Subsystem (WSL)). Find the right way to install it{' '} - - just here - - . -
- - It runs on Linux, MacOS and Windows (via Windowsโ Linux - Subsystem (WSL)). Find the right way to install it{' '} - - just here - - . -
-
+
+
+
+
+
+ );
+}
+
+export default WizardStep1;
diff --git a/Components/WizardSteps/WizardStep2/WizardStep2.js b/Components/WizardSteps/WizardStep2/WizardStep2.js
deleted file mode 100644
index 5963eaf..0000000
--- a/Components/WizardSteps/WizardStep2/WizardStep2.js
+++ /dev/null
@@ -1,149 +0,0 @@
-//Lib
-import React from 'react';
-import classes from '../WizardStep1/WizardStep1.module.css';
-import { IconTool, IconAlertCircle } from '@tabler/icons-react';
-import CopyButton from '../../UI/CopyButton/CopyButton';
-import lanCommandOption from '../../../helpers/functions/lanCommandOption';
-
-function WizardStep2(props) {
- ////Vars
- const wizardEnv = props.wizardEnv;
- const UNIX_USER = wizardEnv.UNIX_USER;
- //Needed to generate command for borg over LAN instead of WAN if env vars are set and option enabled.
- const { FQDN, SSH_SERVER_PORT } = lanCommandOption(
- wizardEnv,
- props.selectedOption.lanCommand
- );
-
- return (
-
+
+
+ We recommend using the official BorgBackup client which is supported by most Linux
+ distributions.
+
+ More information about installation can be{' '} + + found here + + .
+ To automate your backup, you can also use{' '} + + Borgmatic + {' '} + which is a{' '} + + Debian package + + . On the step 4, you will find a pattern of default config. +
+
+ + More information about installation can be{' '} + + found here + + .
+ To automate your backup, you can also use{' '} + + Borgmatic + {' '} + which is a{' '} + + Debian package + + . On the step 4, you will find a pattern of default config. +
+
+
+ BorgWarehouse is compatible with all BorgBackup graphical clients, including the
+ well-known{' '}
+
+ Pika Backup
+ {' '}
+ and{' '}
+
+ Vorta
+
+ .
+
+
-
-
-
- );
-}
-
-export default WizardStep2;
diff --git a/Components/WizardSteps/WizardStep2/WizardStep2.tsx b/Components/WizardSteps/WizardStep2/WizardStep2.tsx
new file mode 100644
index 0000000..e4f760b
--- /dev/null
+++ b/Components/WizardSteps/WizardStep2/WizardStep2.tsx
@@ -0,0 +1,132 @@
+import { IconAlertCircle, IconTool } from '@tabler/icons-react';
+import CopyButton from '../../UI/CopyButton/CopyButton';
+import { WizardStepProps } from '~/types';
+import classes from '../WizardStep1/WizardStep1.module.css';
+import { lanCommandOption } from '~/helpers/functions';
+
+function WizardStep2(props: WizardStepProps) {
+ const wizardEnv = props.wizardEnv;
+ const UNIX_USER = wizardEnv?.UNIX_USER;
+ //Needed to generate command for borg over LAN instead of WAN if env vars are set and option enabled.
+ const { FQDN, SSH_SERVER_PORT } = lanCommandOption(wizardEnv, props.selectedRepo?.lanCommand);
+
+ return (
+
-
-
- To initialize your repository with borgbackup :
-
-
-
-
- -
-
-
- borg init -e repokey-blake2 ssh://
- {UNIX_USER}@{FQDN}:{SSH_SERVER_PORT}/./
- {props.selectedOption.repositoryName}
-
-
- The encryption mode is the one recommended by BorgBackup.
- For more information,{' '}
-
- click here
-
- .
-
- Borgmatic
-
- If you are using Borgmatic and have already edited the configuration file
- (find a sample on the step 4) :
-
-
-
- -
-
-
- borgmatic init -e repokey-blake2
-
- Vorta
-
- To "Initialize a new repository" or "Add existing repository",
- copy this into the field "Repository URL" of Vorta :
-
-
-
-
- -
-
- For more information about the Vorta graphical client, please
- refer to{' '}
-
- this documentation
-
- .
-
- ssh://
- {UNIX_USER}@{FQDN}:{SSH_SERVER_PORT}/./
- {props.selectedOption.repositoryName}
-
-
-
-
- ECDSA : {wizardEnv.SSH_SERVER_FINGERPRINT_ECDSA}
-
-
-
-
- ED25519 : {wizardEnv.SSH_SERVER_FINGERPRINT_ED25519}
-
-
-
-
- RSA : {wizardEnv.SSH_SERVER_FINGERPRINT_RSA}
-
-
-
-
-
-
- To check that you are talking to the right server, please make
- sure to validate one of the following key's fingerprint when you
- first connect :
-
-
-
-
- Once again, the server cannot access your encrypted backup data
- or the encryption passphrase. Remember to put your passphrase in
- your password manager when you initialise your repository.
-
+
+
+
+ );
+}
+
+export default WizardStep2;
diff --git a/Components/WizardSteps/WizardStep3/WizardStep3.js b/Components/WizardSteps/WizardStep3/WizardStep3.js
deleted file mode 100644
index cb30a5c..0000000
--- a/Components/WizardSteps/WizardStep3/WizardStep3.js
+++ /dev/null
@@ -1,184 +0,0 @@
-//Lib
-import React from 'react';
-import classes from '../WizardStep1/WizardStep1.module.css';
-import { IconChecks, IconPlayerPlay } from '@tabler/icons-react';
-import CopyButton from '../../UI/CopyButton/CopyButton';
-import lanCommandOption from '../../../helpers/functions/lanCommandOption';
-
-function WizardStep3(props) {
- ////Vars
- const wizardEnv = props.wizardEnv;
- const UNIX_USER = wizardEnv.UNIX_USER;
- //Needed to generate command for borg over LAN instead of WAN if env vars are set and option enabled.
- const { FQDN, SSH_SERVER_PORT } = lanCommandOption(
- wizardEnv,
- props.selectedOption.lanCommand
- );
-
- return (
-
+
+
+ To initialize your repository with borgbackup :
+
+
+
+
+ +
+
+
+ borg init -e repokey-blake2 ssh://
+ {UNIX_USER}@{FQDN}
+ {SSH_SERVER_PORT}/./
+ {props.selectedRepo?.repositoryName}
+
+
+ The encryption mode is the one recommended by BorgBackup. For more information,{' '}
+
+ click here
+
+ .
+
+ Borgmatic
+
+ If you are using Borgmatic and have already edited the configuration file (find a
+ sample on the step 4) :
+
+
+
+ +
+
+ borgmatic init -e repokey-blake2
+ Pika, Vorta...
+
+ To "Initialize a new repository" or "Add existing repository", copy this
+ into the field "Repository URL" of your graphical client :
+
+
+
+
+ +
+
+
+ ssh://
+ {UNIX_USER}@{FQDN}
+ {SSH_SERVER_PORT}/./
+ {props.selectedRepo?.repositoryName}
+
+
+
+
+ ECDSA : {wizardEnv?.SSH_SERVER_FINGERPRINT_ECDSA}
+
+
+
+
+ ED25519 : {wizardEnv?.SSH_SERVER_FINGERPRINT_ED25519}
+
+
+
+
+ RSA : {wizardEnv?.SSH_SERVER_FINGERPRINT_RSA}
+
+
+
+
+
+
+ To check that you are talking to the right server, please make sure to validate one of the
+ following key's fingerprint when you first connect :
+
+
+
+
+ Once again, the server cannot access your encrypted backup data or the encryption
+ passphrase. Remember to put your passphrase in your password manager when you initialise
+ your repository.
+
-
-
-
-
-
-Check the integrity of a repository with :
- List the remote archives with :
- Download a remote archive with the following command :
-
- Mount an archive to compare or backup some files without
- download all the archive :
-
-
- To verify the consistency of a repository and the corresponding - archives, please refer to{' '} - - this documentation - - - -
- );
-}
-
-export default WizardStep3;
diff --git a/Components/WizardSteps/WizardStep3/WizardStep3.tsx b/Components/WizardSteps/WizardStep3/WizardStep3.tsx
new file mode 100644
index 0000000..1b065f1
--- /dev/null
+++ b/Components/WizardSteps/WizardStep3/WizardStep3.tsx
@@ -0,0 +1,174 @@
+import React from 'react';
+import classes from '../WizardStep1/WizardStep1.module.css';
+import { IconChecks, IconPlayerPlay } from '@tabler/icons-react';
+import CopyButton from '../../UI/CopyButton/CopyButton';
+import { WizardStepProps } from '~/types';
+import { lanCommandOption } from '~/helpers/functions';
+
+function WizardStep3(props: WizardStepProps) {
+ const wizardEnv = props.wizardEnv;
+ const UNIX_USER = wizardEnv?.UNIX_USER;
+ //Needed to generate command for borg over LAN instead of WAN if env vars are set and option enabled.
+ const { FQDN, SSH_SERVER_PORT } = lanCommandOption(wizardEnv, props.selectedRepo?.lanCommand);
+
+ return (
+
-
-
- To launch a backup with borgbackup :
-
-
-
-
-
- borg create ssh://
- {UNIX_USER}@{FQDN}:{SSH_SERVER_PORT}/./
- {props.selectedOption.repositoryName}
- ::archive1 /your/pathToBackup
-
-
-
-
- BorgWarehouse only stores your backups. They are
- encrypted and there is no way for BorgWarehouse to know
- if the backup is intact.
-
- You should regularly test your backups and check that the data - is recoverable.{' '} - - BorgWarehouse cannot do this for you and does not guarantee - anything. - -
-
-
-
- Based on the Borg documentation, you have multiple ways to check
- that your backups are correct with your tools (tar, rsync, diff
- or other tools).
- - You should regularly test your backups and check that the data - is recoverable.{' '} - - BorgWarehouse cannot do this for you and does not guarantee - anything. - -
-
-
-
-
- borg check -v --progress ssh://
- {UNIX_USER}@{FQDN}:{SSH_SERVER_PORT}/./
- {props.selectedOption.repositoryName}
-
-
-
-
- borg list ssh://
- {UNIX_USER}@{FQDN}:{SSH_SERVER_PORT}/./
- {props.selectedOption.repositoryName}
-
-
-
-
- borg export-tar --tar-filter="gzip -9" ssh://
- {UNIX_USER}@{FQDN}:{SSH_SERVER_PORT}/./
- {props.selectedOption.repositoryName}
- ::archive1 archive1.tar.gz
-
-
-
-
- borg mount ssh://
- {UNIX_USER}@{FQDN}:{SSH_SERVER_PORT}/./
- {props.selectedOption.repositoryName}
- ::archive1 /tmp/yourMountPoint
-
- - To verify the consistency of a repository and the corresponding - archives, please refer to{' '} - - this documentation - - - -
Borgmatic
-
- If you are using Borgmatic, please refer to{' '}
-
- this documentation
- {' '}
- for a consistency check.
-
- Vorta
-
- If you are using the Vorta graphical client, please refer to{' '}
-
- this documentation
-
- .
-
-
+
+
+
+
+
+Check the integrity of a repository with :
+ List the remote archives with :
+ Download a remote archive with the following command :
+ Mount an archive to compare or backup some files without download all the archive :
+
+ To verify the consistency of a repository and the corresponding archives, please refer to{' '} + + this documentation + + + +
+ );
+}
+
+export default WizardStep3;
diff --git a/Components/WizardSteps/WizardStep4/WizardStep4.js b/Components/WizardSteps/WizardStep4/WizardStep4.js
deleted file mode 100644
index 99dcc8d..0000000
--- a/Components/WizardSteps/WizardStep4/WizardStep4.js
+++ /dev/null
@@ -1,125 +0,0 @@
-//Lib
-import React from 'react';
-import classes from '../WizardStep1/WizardStep1.module.css';
-import { IconWand } from '@tabler/icons-react';
-import CopyButton from '../../UI/CopyButton/CopyButton';
-import lanCommandOption from '../../../helpers/functions/lanCommandOption';
-
-function WizardStep4(props) {
- ////Vars
- const wizardEnv = props.wizardEnv;
- const UNIX_USER = wizardEnv.UNIX_USER;
- //Needed to generate command for borg over LAN instead of WAN if env vars are set and option enabled.
- const { FQDN, SSH_SERVER_PORT } = lanCommandOption(
- wizardEnv,
- props.selectedOption.lanCommand
- );
-
- const configBorgmatic = `location:
- # List of source directories to backup.
- source_directories:
- - /your-repo-to-backup
- - /another/repo-to-backup
-
-repositories:
- # Paths of local or remote repositories to backup to.
- - ssh://${UNIX_USER}@${FQDN}:${SSH_SERVER_PORT}/./${props.selectedOption.repositoryName}
-
-storage:
- archive_name_format: '{FQDN}-documents-{now}'
- encryption_passphrase: "YOUR PASSPHRASE"
-
-retention:
- # Retention policy for how many backups to keep.
- keep_daily: 7
- keep_weekly: 4
- keep_monthly: 6
-
-consistency:
- # List of checks to run to validate your backups.
- checks:
- - name: repository
- - name: archives
- frequency: 2 weeks
-
-#hooks:
- # Custom preparation scripts to run.
- #before_backup:
- # - prepare-for-backup.sh
-
- # Databases to dump and include in backups.
- #postgresql_databases:
- # - name: users
-
- # Third-party services to notify you if backups aren't happening.
- #healthchecks: https://hc-ping.com/be067061-cf96-4412-8eae-62b0c50d6a8c`;
-
- return (
-
+
+
+ To launch a backup with borgbackup :
+
+
+
+
+
+ borg create ssh://
+ {UNIX_USER}@{FQDN}
+ {SSH_SERVER_PORT}/./
+ {props.selectedRepo?.repositoryName}
+ ::archive1 /your/pathToBackup
+
+
+
+
+ BorgWarehouse only stores your backups. They are encrypted and there is no way{' '}
+ for BorgWarehouse to know if the backup is intact.
+
+ You should regularly test your backups and check that the data is recoverable.{' '} + BorgWarehouse cannot do this for you and does not guarantee anything. +
+
+
+
+ Based on the Borg documentation, you have multiple ways to check that your backups are
+ correct with your tools (tar, rsync, diff or other tools).
+ + You should regularly test your backups and check that the data is recoverable.{' '} + BorgWarehouse cannot do this for you and does not guarantee anything. +
+
+
+
+
+ borg check -v --progress ssh://
+ {UNIX_USER}@{FQDN}
+ {SSH_SERVER_PORT}/./
+ {props.selectedRepo?.repositoryName}
+
+
+
+
+ borg list ssh://
+ {UNIX_USER}@{FQDN}
+ {SSH_SERVER_PORT}/./
+ {props.selectedRepo?.repositoryName}
+
+
+
+
+ borg export-tar --tar-filter="gzip -9" ssh://
+ {UNIX_USER}@{FQDN}
+ {SSH_SERVER_PORT}/./
+ {props.selectedRepo?.repositoryName}
+ ::archive1 archive1.tar.gz
+
+
+
+
+ borg mount ssh://
+ {UNIX_USER}@{FQDN}
+ {SSH_SERVER_PORT}/./
+ {props.selectedRepo?.repositoryName}
+ ::archive1 /tmp/yourMountPoint
+
+ + To verify the consistency of a repository and the corresponding archives, please refer to{' '} + + this documentation + + + +
Borgmatic
+
+ If you are using Borgmatic, please refer to{' '}
+
+ this documentation
+ {' '}
+ for a consistency check.
+
+ Pika, Vorta...
+
+ If you are using the Vorta graphical client, please refer to{' '}
+
+ this documentation
+
+ .
+ If you are using Pika, please refer to{' '} + + this documentation + + . +
+ + If you are using Pika, please refer to{' '} + + this documentation + + . +
-
-
-
- );
-}
-
-export default WizardStep4;
diff --git a/Components/WizardSteps/WizardStep4/WizardStep4.tsx b/Components/WizardSteps/WizardStep4/WizardStep4.tsx
new file mode 100644
index 0000000..17d355a
--- /dev/null
+++ b/Components/WizardSteps/WizardStep4/WizardStep4.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import classes from '../WizardStep1/WizardStep1.module.css';
+import { IconWand } from '@tabler/icons-react';
+import CopyButton from '../../UI/CopyButton/CopyButton';
+import { WizardStepProps } from '~/types';
+import { lanCommandOption } from '~/helpers/functions';
+
+function WizardStep4(props: WizardStepProps) {
+ const wizardEnv = props.wizardEnv;
+ const UNIX_USER = wizardEnv?.UNIX_USER;
+ //Needed to generate command for borg over LAN instead of WAN if env vars are set and option enabled.
+ const { FQDN, SSH_SERVER_PORT } = lanCommandOption(wizardEnv, props.selectedRepo?.lanCommand);
+
+ const configBorgmatic = `
+ # List of source directories to backup.
+ source_directories:
+ - /your-repo-to-backup
+ - /another/repo-to-backup
+
+repositories:
+ # Paths of local or remote repositories to backup to.
+ - path: ssh://${UNIX_USER}@${FQDN}${SSH_SERVER_PORT}/./${props.selectedRepo?.repositoryName}
+
+archive_name_format: '{FQDN}-documents-{now}'
+encryption_passphrase: "YOUR PASSPHRASE"
+
+# Retention policy for how many backups to keep.
+keep_daily: 7
+keep_weekly: 4
+keep_monthly: 6
+
+# List of checks to run to validate your backups.
+checks:
+ - name: repository
+ - name: archives
+ frequency: 2 weeks
+
+#hooks:
+ # Custom preparation scripts to run.
+ #before_backup:
+ # - prepare-for-backup.sh
+
+ # Databases to dump and include in backups.
+ #postgresql_databases:
+ # - name: users
+
+ # Third-party services to notify you if backups aren't happening.
+ #healthchecks: https://hc-ping.com/be067061-cf96-4412-8eae-62b0c50d6a8c`;
+
+ return (
+
-
-
- The official borgbackup project provides a script in its
- documentation
-
- right here
-
- .
-
-
-
- Vorta
-
- If you are using the Vorta graphical client, please refer
- to
-
- this documentation
-
- .
-
-
- Borgmatic
-
- If you are using Borgmatic, you can check
-
- this documentation
-
- and adapt and use the following script :
-
-
-
- {configBorgmatic}
-
-
-
+
+
+
+ );
+}
+
+export default WizardStep4;
diff --git a/Components/WizardSteps/WizardStepBar/WizardStepBar.js b/Components/WizardSteps/WizardStepBar/WizardStepBar.js
deleted file mode 100644
index f79e48e..0000000
--- a/Components/WizardSteps/WizardStepBar/WizardStepBar.js
+++ /dev/null
@@ -1,103 +0,0 @@
-//Lib
-import React from 'react';
-import classes from './WizardStepBar.module.css';
-import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
-
-function WizardStepBar(props) {
- ////Functions
- //Color onClick on a step
- const colorHandler = (step) => {
- if (step <= props.step) {
- return classes.active;
- } else {
- return classes.inactive;
- }
- };
- //Color onClick on next step button
- const colorChevronNextStep = () => {
- if (props.step < 4) {
- return classes.activeChevron;
- } else {
- return classes.inactiveChevron;
- }
- };
- //Color onClick on previous step button
- const colorChevronPreviousStep = () => {
- if (props.step > 1) {
- return classes.activeChevron;
- } else {
- return classes.inactiveChevron;
- }
- };
-
- return (
-
+
+
+ The official borgbackup project provides a script in its documentation
+
+ right here
+
+ .
+
+
+
+ Pika, Vorta...
+
+ If you are using the Vorta graphical client, please refer to
+
+ this documentation
+
+ .
+ If you are using Pika Backup, please refer to + + this documentation + + . +
+
+ + If you are using Pika Backup, please refer to + + this documentation + + . +
Borgmatic
+
+ If you are using Borgmatic, you can check
+
+ this documentation
+
+ and adapt and use the following script :
+
+
+
+ {configBorgmatic}
+
+
+
-
- );
-}
-
-export default WizardStepBar;
diff --git a/Components/WizardSteps/WizardStepBar/WizardStepBar.module.css b/Components/WizardSteps/WizardStepBar/WizardStepBar.module.css
index b5453c2..434e2c7 100644
--- a/Components/WizardSteps/WizardStepBar/WizardStepBar.module.css
+++ b/Components/WizardSteps/WizardStepBar/WizardStepBar.module.css
@@ -1,94 +1,94 @@
/* General */
.stepBarContainer {
- text-transform: uppercase;
- color: #494b7a;
- font-size: 1em;
- margin-top: 40px;
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
+ text-transform: uppercase;
+ color: #494b7a;
+ font-size: 1em;
+ margin-top: 40px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
}
.stepBarContainer li {
- display: inline-block;
- position: relative;
- margin: 0px 30px;
- width: 180px;
- cursor: pointer;
+ display: inline-block;
+ position: relative;
+ margin: 0px 30px;
+ width: 180px;
+ cursor: pointer;
}
.stepBarContainer ul {
- padding-top: 10px;
- margin: 0;
- padding-inline-start: 0px;
+ padding-top: 10px;
+ margin: 0;
+ padding-inline-start: 0px;
}
/* Transition Active / Inactive */
.number {
- display: inline-block;
- position: relative;
- color: #494b7a4d;
- background: #fff;
- border: 1px solid #494b7a4d;
- border-radius: 50%;
- width: 37px;
- padding: 8px 5px;
- margin-bottom: 4px;
- font-weight: 700;
- z-index: 1;
+ display: inline-block;
+ position: relative;
+ color: #494b7a4d;
+ background: #fff;
+ border: 1px solid #494b7a4d;
+ border-radius: 50%;
+ width: 37px;
+ padding: 8px 5px;
+ margin-bottom: 4px;
+ font-weight: 700;
+ z-index: 1;
}
.active.number {
- box-shadow: 0 0 15px 5px rgba(110, 74, 255, 0.405);
- color: #fff;
- background: #6d4aff;
- transition: all 1000ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
- transition-delay: 500ms;
+ box-shadow: 0 0 15px 5px rgba(110, 74, 255, 0.405);
+ color: #fff;
+ background: #6d4aff;
+ transition: all 1000ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
+ transition-delay: 500ms;
}
.text {
- padding: 8px 0 0 0;
- color: #494b7a4d;
+ padding: 8px 0 0 0;
+ color: #494b7a4d;
}
.active.text {
- transition: all 1000ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
- transition-delay: 500ms;
- color: #494b7a;
+ transition: all 1000ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
+ transition-delay: 500ms;
+ color: #494b7a;
}
.line {
- background: #6d4aff;
- width: 0;
- height: 2px;
- position: absolute;
- top: 17px;
- left: 108px;
- z-index: 0;
- transition: all 500ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
+ background: #6d4aff;
+ width: 0;
+ height: 2px;
+ position: absolute;
+ top: 17px;
+ left: 108px;
+ z-index: 0;
+ transition: all 500ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
.active .line {
- background: #6d4aff;
- width: 204px;
- height: 2px;
- position: absolute;
- top: 17px;
- left: 108px;
- z-index: 0;
+ background: #6d4aff;
+ width: 204px;
+ height: 2px;
+ position: absolute;
+ top: 17px;
+ left: 108px;
+ z-index: 0;
}
.activeChevron {
- cursor: pointer;
+ cursor: pointer;
}
.activeChevron:hover {
- color: #6d4aff;
+ color: #6d4aff;
}
.inactiveChevron {
- color: #494b7a4d;
+ color: #494b7a4d;
}
diff --git a/Components/WizardSteps/WizardStepBar/WizardStepBar.tsx b/Components/WizardSteps/WizardStepBar/WizardStepBar.tsx
new file mode 100644
index 0000000..a6adb7c
--- /dev/null
+++ b/Components/WizardSteps/WizardStepBar/WizardStepBar.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import classes from './WizardStepBar.module.css';
+import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
+
+type WizardStepBarProps = {
+ step: number;
+ setStep: (step: number) => void;
+ previousStepHandler: () => void;
+ nextStepHandler: () => void;
+};
+
+function WizardStepBar(props: WizardStepBarProps) {
+ //Color onClick on a step
+ const colorHandler = (step: number) => {
+ if (step <= props.step) {
+ return classes.active;
+ } else {
+ return classes.inactive;
+ }
+ };
+ //Color onClick on next step button
+ const colorChevronNextStep = () => {
+ if (props.step < 4) {
+ return classes.activeChevron;
+ } else {
+ return classes.inactiveChevron;
+ }
+ };
+ //Color onClick on previous step button
+ const colorChevronPreviousStep = () => {
+ if (props.step > 1) {
+ return classes.activeChevron;
+ } else {
+ return classes.inactiveChevron;
+ }
+ };
+
+ return (
+ -
-
- props.setStep(1)}
- >
- - 1 --- Client Setup -- -
-
- props.setStep(2)}
- >
- - 2 --- Init. repository -- -
-
- props.setStep(3)}
- >
- - 3 --- Launch & Verify -- -
-
- props.setStep(4)}>
- - 4 --- Automation --
-
+
+ );
+}
+
+export default WizardStepBar;
diff --git a/Containers/Monitoring/StorageUsedChartBar/StorageUsedChartBar.js b/Containers/Monitoring/StorageUsedChartBar/StorageUsedChartBar.js
deleted file mode 100644
index 8a4b153..0000000
--- a/Containers/Monitoring/StorageUsedChartBar/StorageUsedChartBar.js
+++ /dev/null
@@ -1,94 +0,0 @@
-//Lib
-import {
- Chart as ChartJS,
- CategoryScale,
- LinearScale,
- BarElement,
- Title,
- Tooltip,
- Legend,
-} from 'chart.js';
-import { Bar } from 'react-chartjs-2';
-import { useState, useEffect } from 'react';
-
-export default function StorageUsedChartBar() {
- //States
- const [data, setData] = useState([]);
-
- //LifeCycle
- useEffect(() => {
- const dataFetch = async () => {
- try {
- const response = await fetch('/api/repo', {
- method: 'GET',
- headers: {
- 'Content-type': 'application/json',
- },
- });
- setData((await response.json()).repoList);
- } catch (error) {
- console.log('Fetching datas error');
- }
- };
-
- dataFetch();
- }, []);
-
- ////Chart.js
- ChartJS.register(
- CategoryScale,
- LinearScale,
- BarElement,
- Title,
- Tooltip,
- Legend
- );
-
- const options = {
- responsive: true,
- plugins: {
- legend: {
- position: 'bottom',
- },
- title: {
- position: 'bottom',
- display: true,
- text: 'Storage used for each repository',
- },
- },
- scales: {
- y: {
- max: 100,
- min: 0,
- ticks: {
- // Include a dollar sign in the ticks
- callback: function (value) {
- return value + '%';
- },
- stepSize: 10,
- },
- },
- },
- };
-
- const labels = data.map((repo) => repo.alias);
-
- const dataChart = {
- labels,
- datasets: [
- {
- label: 'Storage used (%)',
- //storageUsed is in octet, storageSize is in GB. Round to 1 decimal for %.
- data: data.map((repo) =>
- (
- ((repo.storageUsed / 1000000) * 100) /
- repo.storageSize
- ).toFixed(1)
- ),
- backgroundColor: '#704dff',
- },
- ],
- };
-
- return -
+
- props.setStep(1)}>
+ 1+Client Setup+ +
+
- props.setStep(2)}>
+ 2+Init. repository+ +
+
- props.setStep(3)}>
+ 3+Launch & Verify+ +
+
- props.setStep(4)}>
+ 4+Automation+
+
-
- {displayRepoAdd ? (
-
-
-
-
-
- {renderRepoList}
-
+
+
+ {displayRepoAdd && (
+
+
+
+
+
+
+
+
+
+ {searchQuery && (
+
+ )}
+
+
+
+ handleSortChange('alias-asc')}
+ title='Alias A-Z'
+ />
+ handleSortChange('alias-desc')}
+ title='Alias Z-A'
+ />
+ handleSortChange('status-true')}
+ title='Status OK โ KO'
+ />
+ handleSortChange('status-false')}
+ title='Status KO โ OK'
+ />
+ handleSortChange('last-save-desc')}
+ title='Last save (recent โ old)'
+ />
+ handleSortChange('last-save-asc')}
+ title='Last save (old โ recent)'
+ />
+ handleSortChange('storage-used-asc')}
+ title='Storage usage % low โ high'
+ />
+ handleSortChange('storage-used-desc')}
+ title='Storage usage % high โ low'
+ />
+
+
+
+ {renderRepoList}
+
-
-
- );
-}
diff --git a/Containers/RepoManage/RepoManage.module.css b/Containers/RepoManage/RepoManage.module.css
index aa603c5..8c55d5c 100644
--- a/Containers/RepoManage/RepoManage.module.css
+++ b/Containers/RepoManage/RepoManage.module.css
@@ -1,268 +1,296 @@
.modaleWrapper {
- position: fixed;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- width: 100%;
- height: 100%;
- margin: 50px 0px 0px 70px;
+ position: fixed;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ width: 100%;
+ height: 100%;
+ margin: 50px 0px 0px 70px;
}
.modale {
- position: fixed;
- top: 10%;
- width: 1000px;
- height: auto;
- max-width: 75%;
- max-height: 85%;
- background: #fff;
- padding: 20px 20px 20px;
- overflow: auto;
- border-radius: 10px;
- box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.4);
- margin: 0 auto;
- animation: append-animate 0.3s linear;
+ position: fixed;
+ top: 10%;
+ width: 800px;
+ height: auto;
+ max-width: 75%;
+ max-height: 85%;
+ background: #fff;
+ padding: 20px 20px 20px;
+ overflow: auto;
+ border-radius: 10px;
+ box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.4);
+ margin: 0 auto;
+ animation: append-animate 0.3s linear;
+}
+
+.modale h2 {
+ margin-top: 0;
+ color: #374151;
}
@keyframes append-animate {
- from {
- transform: scale(0);
- opacity: 0;
- }
- to {
- transform: scale(1);
- opacity: 1;
- }
+ from {
+ transform: scale(0);
+ opacity: 0;
+ }
+ to {
+ transform: scale(1);
+ opacity: 1;
+ }
}
.close {
- cursor: pointer;
- margin-left: 95%;
- color: #494b7a;
+ cursor: pointer;
+ margin-left: 95%;
+ color: #494b7a;
}
.close :hover {
- color: #aa60ff;
+ color: #aa60ff;
}
.repoManageForm {
- margin: auto;
- width: 80%;
- padding: 15px 30px 30px 30px;
- border-radius: 5px;
- text-align: left;
+ margin: auto;
+ width: 100%;
+ max-width: 600px;
+ border-radius: 8px;
+ background-color: #ffffff;
+ font-family: Inter, sans-serif;
+ color: #1f2937;
}
.formWrapper {
- text-align: center;
- margin: auto;
- width: 100%;
- height: auto;
- color: #494b7a;
+ text-align: center;
+ width: 100%;
+ margin: 0 auto;
+ color: inherit;
}
.repoManageForm label {
- display: block;
- margin-bottom: 8px;
- text-align: center;
- margin-top: 20px;
- color: #494b7a;
+ display: block;
+ margin-top: 0.9rem;
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+ font-size: 0.95rem;
+ color: #374151;
+ text-align: left;
}
.repoManageForm input,
.repoManageForm textarea,
.repoManageForm select {
- border: 1px solid #6d4aff21;
- font-size: 16px;
- height: auto;
- margin: 0;
- margin-bottom: 0px;
- outline: 0;
- padding: 15px;
- width: 100%;
- background-color: #f5f5f5;
- border-radius: 5px;
- /* color: #1b1340; */
- color: #494b7a;
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
+ width: 100%;
+ padding: 0.75rem 1rem;
+ border: 1px solid #d1d5db;
+ border-radius: 6px;
+ font-size: 0.9rem;
+ background-color: #f9fafb;
+ color: #111827;
+ font-family: Inter;
}
.repoManageForm textarea {
- resize: vertical;
+ resize: vertical;
+ min-height: 80px;
}
-.repoManageForm textarea:focus,
.repoManageForm input:focus,
+.repoManageForm textarea:focus,
.repoManageForm select:focus {
- outline: 1px solid #6d4aff;
- box-shadow: 0 0 10px 3px rgba(110, 74, 255, 0.605);
+ border-color: #6d4aff;
+ background-color: #ffffff;
+ outline: none;
+ box-shadow: 0 0 0 2px rgba(109, 74, 255, 0.3);
}
.repoManageForm .invalid {
- background: #f3c7c7;
- border: 1px solid #e45454;
- outline: 1px solid #ff4a4a;
+ background-color: #fef2f2;
+ border-color: #ef4444;
}
.repoManageForm .invalid:focus {
- background: #f3c7c7;
- border: 1px solid #e45454;
- outline: 1px solid #ff4a4a;
- box-shadow: 0 0 10px 3px rgba(255, 74, 74, 0.605);
+ box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
}
.repoManageForm button {
- display: block;
- margin: 15px auto;
+ display: block;
+ margin: 2rem auto 0 auto;
+ background-color: #6d4aff;
+ color: #ffffff;
+ padding: 0.75rem 1.5rem;
+ border: none;
+ border-radius: 6px;
+ font-size: 1rem;
+ font-weight: 500;
+ cursor: pointer;
+ transition: background-color 0.2s ease;
}
+
.repoManageForm button:hover {
- display: block;
- margin: 15px auto;
+ background-color: #5c3dff;
}
.errorMessage {
- color: red;
- display: block;
- margin-top: 3px;
+ color: #dc2626;
+ font-size: 0.875rem;
+ margin-top: 0.3rem;
}
.optionCommandWrapper {
- display: flex;
- margin-top: 20px;
- color: #494b7a;
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+ margin-top: 1.5rem;
+ font-size: 0.95rem;
+ color: #374151;
}
.optionCommandWrapper label {
- margin: 0;
+ margin: 0;
}
.optionCommandWrapper input[type='checkbox'] {
- width: auto;
- margin-right: 8px;
- cursor: pointer;
- accent-color: #6d4aff;
+ width: 18px;
+ height: 18px;
+ accent-color: #6d4aff;
+ cursor: pointer;
}
+
.optionCommandWrapper input[type='checkbox']:focus {
- outline: 0;
- box-shadow: none;
- accent-color: #6d4aff;
+ outline: none;
+ box-shadow: 0 0 0 2px rgba(109, 74, 255, 0.4);
+}
+
+.selectAlert {
+ max-width: 160px;
+}
+.selectAlertWrapper label {
+ margin: 0;
+}
+
+.selectAlertWrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ margin-top: 1.5rem;
+ gap: 0.5rem;
+ font-size: 0.95rem;
+ color: #374151;
}
/* DELETE DIALOG */
.deleteDialogWrapper {
- text-align: center;
- margin: auto;
- width: 80%;
- height: 100%;
- max-height: 590px;
- color: #111827;
- display: flex;
- flex-direction: column;
- justify-content: center;
+ text-align: center;
+ margin: auto;
+ width: 80%;
+ height: 100%;
+ max-height: 590px;
+ color: #111827;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
}
.deleteDialogMessage {
- background-color: #ea1313;
- color: #fff;
- font-weight: 500;
- border-radius: 5px;
- padding: 15px;
- margin-top: 15px;
- margin-bottom: 15px;
- font-size: 1.1em;
+ background-color: #ea1313;
+ color: #fff;
+ font-weight: 500;
+ border-radius: 5px;
+ padding: 15px;
+ margin-top: 15px;
+ margin-bottom: 15px;
+ font-size: 1.1em;
}
.cancelButton {
- border: 0;
- padding: 10px 15px;
- background-color: #c1c1c1;
- color: white;
- margin: 5px;
- border-radius: 4px;
- cursor: pointer;
- text-decoration: none;
- font-weight: bold;
- font-size: 1em;
+ border: 0;
+ padding: 10px 15px;
+ background-color: #c1c1c1;
+ color: white;
+ margin: 5px;
+ border-radius: 4px;
+ cursor: pointer;
+ text-decoration: none;
+ font-weight: bold;
+ font-size: 1em;
}
.cancelButton:hover {
- border: 0;
- padding: 10px 15px;
- background-color: #9a9a9a;
- color: white;
- margin: 5px;
- border-radius: 4px;
- cursor: pointer;
- text-decoration: none;
- font-weight: bold;
- font-size: 1em;
+ border: 0;
+ padding: 10px 15px;
+ background-color: #9a9a9a;
+ color: white;
+ margin: 5px;
+ border-radius: 4px;
+ cursor: pointer;
+ text-decoration: none;
+ font-weight: bold;
+ font-size: 1em;
}
.cancelButton:active {
- border: 0;
- padding: 10px 15px;
- background-color: #9a9a9a;
- color: white;
- margin: 5px;
- border-radius: 4px;
- cursor: pointer;
- text-decoration: none;
- font-weight: bold;
- font-size: 1em;
- transform: scale(0.9);
+ border: 0;
+ padding: 10px 15px;
+ background-color: #9a9a9a;
+ color: white;
+ margin: 5px;
+ border-radius: 4px;
+ cursor: pointer;
+ text-decoration: none;
+ font-weight: bold;
+ font-size: 1em;
+ transform: scale(0.9);
}
.deleteButton {
- border: 0;
- padding: 10px 15px;
- background-color: #ff0000;
- color: white;
- margin: 5px;
- border-radius: 4px;
- cursor: pointer;
- text-decoration: none;
- font-weight: bold;
- font-size: 1em;
+ border: 0;
+ padding: 10px 15px;
+ background-color: #ff0000;
+ color: white;
+ margin: 5px;
+ border-radius: 4px;
+ cursor: pointer;
+ text-decoration: none;
+ font-weight: bold;
+ font-size: 1em;
}
.deleteButton:hover {
- border: 0;
- padding: 10px 15px;
- background-color: #ff4b4b;
- color: white;
- margin: 5px;
- border-radius: 4px;
- cursor: pointer;
- text-decoration: none;
- font-weight: bold;
- font-size: 1em;
+ border: 0;
+ padding: 10px 15px;
+ background-color: #ff4b4b;
+ color: white;
+ margin: 5px;
+ border-radius: 4px;
+ cursor: pointer;
+ text-decoration: none;
+ font-weight: bold;
+ font-size: 1em;
}
.deleteButton:active {
- border: 0;
- padding: 10px 15px;
- background-color: #ff4b4b;
- color: white;
- margin: 5px;
- border-radius: 4px;
- cursor: pointer;
- text-decoration: none;
- font-weight: bold;
- font-size: 1em;
- transform: scale(0.9);
+ border: 0;
+ padding: 10px 15px;
+ background-color: #ff4b4b;
+ color: white;
+ margin: 5px;
+ border-radius: 4px;
+ cursor: pointer;
+ text-decoration: none;
+ font-weight: bold;
+ font-size: 1em;
+ transform: scale(0.9);
}
.littleDeleteButton {
- border: none;
- font-weight: 300;
- color: red;
- text-decoration: underline;
- background: none;
- cursor: pointer;
-}
-
-.selectAlert {
- margin: auto auto 35px auto;
- max-width: 160px;
+ margin-top: 10px;
+ border: none;
+ font-weight: 300;
+ color: red;
+ text-decoration: underline;
+ background: none;
+ cursor: pointer;
}
diff --git a/Containers/RepoManage/RepoManage.tsx b/Containers/RepoManage/RepoManage.tsx
new file mode 100644
index 0000000..b37f0cd
--- /dev/null
+++ b/Containers/RepoManage/RepoManage.tsx
@@ -0,0 +1,496 @@
+import { IconAlertCircle, IconExternalLink, IconX } from '@tabler/icons-react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import Select from 'react-select';
+import { toast, ToastOptions } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { useLoader } from '~/contexts/LoaderContext';
+import { alertOptions, Optional, Repository } from '~/types';
+import classes from './RepoManage.module.css';
+
+type RepoManageProps = {
+ mode: 'add' | 'edit';
+ repoList: Optional
-
- {deleteDialog ? (
-
-
- ) : (
-
-
- - Delete the repository{' '} - - #{targetRepo.id} - {' '} - ? -
-
-
-
- You are about to permanently delete the
- repository #{targetRepo.id} and all the
- backups it contains.
-
-
- The data will not be recoverable and it will not
- be possible to go back.
-
-
- {isLoading ? (
-
-
- {props.mode == 'edit' && (
-
- )}
- - Edit the repository{' '} - - #{targetRepo.id} - -
- )} - {props.mode == 'add' &&Add a repository
} - - {props.mode == 'edit' ? ( - - ) : null} -
+
+
+ {deleteDialog ? (
+
+
+ ) : (
+
+
+ + Delete the repository{' '} + + {targetRepo?.repositoryName} + {' '} + ? +
+
+
+
+ You are about to permanently delete the repository{' '}
+ {targetRepo?.repositoryName} and all the backups it contains.
+
+ The data will not be recoverable and it will not be possible to go back.
+
+ <>
+
+
+
+
+
+ {props.mode == 'edit' && (
+