feat: implement timer

Related to #8 #50
AXeL-dev · Feb 27, 2022 · 01a5ece · 01a5ece
1 parent a1467c1
commit 01a5ece
Show file tree

Hide file tree

Showing 19 changed files with 620 additions and 85 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "omgopass": "^3.2.1",
     "query-string": "^7.1.1",
     "react": "^17.0.2",
+    "react-countdown-circle-timer": "^3.0.8",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
     "react-scripts": "^4.0.3",

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -387,5 +387,41 @@
   },
   "openLogs": {
     "message": "Open logs"
+  },
+  "timer": {
+    "message": "Timer"
+  },
+  "enableTimer": {
+    "message": "Enable timer"
+  },
+  "enableTimerDescription": {
+    "message": "Displays a 'Timer' button on the main panel"
+  },
+  "defaultTimerValue": {
+    "message": "Default timer value"
+  },
+  "allowStoppingTimer": {
+    "message": "Allow stopping the timer before it ends"
+  },
+  "displayNotificationOnComplete": {
+    "message": "Display a notification when the timer ends"
+  },
+  "allowUsingTimerWithoutPassword": {
+    "message": "Allow using the timer without entering the password"
+  },
+  "mainPanel": {
+    "message": "Main panel"
+  },
+  "start": {
+    "message": "Start"
+  },
+  "stop": {
+    "message": "Stop"
+  },
+  "remainingTime": {
+    "message": "Remaining time"
+  },
+  "timerCompleted": {
+    "message": "Timer completed!"
   }
 }
diff --git a/public/_locales/fr/messages.json b/public/_locales/fr/messages.json
@@ -344,13 +344,13 @@
     "message": "Nombre de lignes à conserver dans la table des logs"
   },
   "hideReportIssueButton": {
-    "message": "Masquer le bouton \"signaler un problème\" sur le panneau principal"
+    "message": "Masquer le bouton 'signaler un problème' sur le panneau principal"
   },
   "showAddWebsitePrompt": {
     "message": "Afficher l'invite d'ajout de site web"
   },
   "showAddWebsitePromptTooltip": {
-    "message": "Affiche une invite de confirmation lors de l'ajout d'un site web à partir du button \"+\" sur le panneau principal"
+    "message": "Affiche une invite de confirmation lors de l'ajout d'un site web à partir du button '+' sur le panneau principal"
   },
   "urls": {
     "message": "Liens"
@@ -387,5 +387,41 @@
   },
   "openLogs": {
     "message": "Consulter les journaux"
+  },
+  "timer": {
+    "message": "Minuteur"
+  },
+  "enableTimer": {
+    "message": "Activer le minuteur"
+  },
+  "enableTimerDescription": {
+    "message": "Affiche un bouton 'Minuteur' sur le panneau principal"
+  },
+  "defaultTimerValue": {
+    "message": "Valeur par défaut du minuteur"
+  },
+  "allowStoppingTimer": {
+    "message": "Permettre l'arrêt manuel du minuteur avant qu'il ne se termine"
+  },
+  "displayNotificationOnComplete": {
+    "message": "Afficher une notification lorsque le minuteur se termine"
+  },
+  "allowUsingTimerWithoutPassword": {
+    "message": "Permettre l'accès au minuteur sans entrer le mot de passe"
+  },
+  "mainPanel": {
+    "message": "Panneau principal"
+  },
+  "start": {
+    "message": "Démarrer"
+  },
+  "stop": {
+    "message": "Arrêter"
+  },
+  "remainingTime": {
+    "message": "Temps restant"
+  },
+  "timerCompleted": {
+    "message": "Minuteur terminé!"
   }
 }
diff --git a/public/_locales/nl/messages.json b/public/_locales/nl/messages.json
@@ -387,5 +387,41 @@
   },
   "openLogs": {
     "message": "Open logboek"
+  },
+  "timer": {
+    "message": "Tijdklok"
+  },
+  "enableTimer": {
+    "message": "Tijdklok inschakelen"
+  },
+  "enableTimerDescription": {
+    "message": "Toont een 'Tijdklok' knop op het hoofdpaneel"
+  },
+  "defaultTimerValue": {
+    "message": "Standaard timerwaarde"
+  },
+  "allowStoppingTimer": {
+    "message": "Laat toe de timer te stoppen voor hij afloopt"
+  },
+  "displayNotificationOnComplete": {
+    "message": "Geef een melding wanneer de timer afloopt"
+  },
+  "allowUsingTimerWithoutPassword": {
+    "message": "Gebruik van de timer toestaan zonder het wachtwoord in te voeren"
+  },
+  "mainPanel": {
+    "message": "Hoofdpaneel"
+  },
+  "start": {
+    "message": "Start"
+  },
+  "stop": {
+    "message": "Stop"
+  },
+  "remainingTime": {
+    "message": "Resterende tijd"
+  },
+  "timerCompleted": {
+    "message": "Timer voltooid!"
   }
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -3,7 +3,7 @@ import { HashRouter as Router, Switch, Route } from 'react-router-dom';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { storage } from './helpers/webext';
 import { isDevEnv } from './helpers/debug';
-import { Panel, Settings, Logs, Background, Blocked, PasswordPrompt, AddWebsitePrompt } from './components';
+import { Main, Panel, Settings, Timer, Logs, Background, Blocked, PasswordPrompt, AddWebsitePrompt } from './components';
 import { PasswordProtectedRoute } from './routes';
 
 export default class App extends Component {
@@ -31,25 +31,30 @@ export default class App extends Component {
     return (
       <Router>
         <Route render={({ location }) => (
-          <TransitionGroup className="page">
-            <CSSTransition
-              key={location.pathname}
-              classNames="fade"
-              timeout={300}
-            >
-              <Switch location={location}>
-                <PasswordProtectedRoute exact path="/" component={Panel} accessAllowed={this.state.accessAllowed} showPromptHeader={true} showPromptFooter={true} />
-                <PasswordProtectedRoute path="/settings" component={Settings} accessAllowed={this.state.accessAllowed} />
-                <PasswordProtectedRoute path="/logs" component={Logs} accessAllowed={this.state.accessAllowed} />
-                <Route path="/background" component={Background} />
-                <Route path="/blocked" component={Blocked} />
-                <Route path="/addWebsitePrompt" component={AddWebsitePrompt} />
-                {isDevEnv || !this.state.accessAllowed ? (
-                  <Route path="/pwd" component={PasswordPrompt} />
-                ) : null}
-              </Switch>
-            </CSSTransition>
-          </TransitionGroup>
+          <>
+            {/* Routes that only does redirecting should be outside of the transition group */}
+            <Route exact path="/" component={Main} />
+            <TransitionGroup className="page">
+              <CSSTransition
+                key={location.pathname}
+                classNames="fade"
+                timeout={300}
+              >
+                <Switch location={location}>
+                  <PasswordProtectedRoute path="/panel" component={Panel} accessAllowed={this.state.accessAllowed} showPromptHeader={true} showPromptFooter={true} />
+                  <PasswordProtectedRoute path="/timer" component={Timer} accessAllowed={this.state.accessAllowed} showPromptHeader={true} showPromptFooter={true} />
+                  <PasswordProtectedRoute path="/settings" component={Settings} accessAllowed={this.state.accessAllowed} />
+                  <PasswordProtectedRoute path="/logs" component={Logs} accessAllowed={this.state.accessAllowed} />
+                  <Route path="/background" component={Background} />
+                  <Route path="/blocked" component={Blocked} />
+                  <Route path="/addWebsitePrompt" component={AddWebsitePrompt} />
+                  {isDevEnv || !this.state.accessAllowed ? (
+                    <Route path="/pwd" component={PasswordPrompt} />
+                  ) : null}
+                </Switch>
+              </CSSTransition>
+            </TransitionGroup>
+          </>
         )} />
       </Router>
     );