Feat/mac (#109)

* chore: upgrade dependencies
* feat/mac: draft pipeline
* feat/mac: use public folder for transient files
* feat/mac: set app fullscreen
* feat/mac: cmd + , toggles menu
* feat/mac: update readme
* refact: easier login process
* refact prevent style issues with safari
* refact reduce css download
* style: cleanup paginator design
* style: studio clock is responsive
* style: fix spacing style issues with safari

client/src/common/components/protectRoute/ProtectRoute.jsx

@@ -1,7 +1,7 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import style from './ProtectRoute.module.scss';
-import { PinInput, PinInputField } from '@chakra-ui/react';
+import { HStack, PinInput, PinInputField } from '@chakra-ui/react';
 import { IconButton } from '@chakra-ui/button';
 import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
 import { AppContext } from '../../../app/context/AppContext';
@@ -13,53 +13,77 @@ export default function ProtectRoute({ children }) {
   const [failed, setFailed] = useState(false);
   const { auth, validate } = useContext(AppContext);
 
+  const handleValidation = useCallback(() => {
+    const r = validate(pin);
+    if (!r) {
+      setFailed(true);
+      setPin('');
+    }
+  }, [pin, validate]);
+
   // Set window title
   useEffect(() => {
     document.title = 'ontime';
   }, []);
 
-  const handleValidation = () => {
-    const r = validate(pin);
-    if (!r) {
-      setFailed(true);
-    }
-  };
-
-  return (
-    <>
-      {!isLocal && !auth ? (
-        <div className={style.container}>
-          ontime
-          <div className={failed ? style.pin__failed : style.pin}>
-            <PinInput
-              type='alphanumeric'
-              size='lg'
-              mask
-              onChange={(value) => {
-                setFailed(false);
-                setPin(value);
-              }}
-            >
-              <PinInputField />
-              <PinInputField />
-              <PinInputField />
-              <PinInputField />
-            </PinInput>
-            <IconButton
-              aria-label='Enter'
-              size='lg'
-              isRound
-              icon={<FiCheck />}
-              style={{ fontSize: '1.5em' }}
-              onClick={() => handleValidation()}
-            />
-          </div>
-        </div>
-      ) : (
-        children
-      )}
-    </>
+  // Handle keyboard shortcuts
+  const handleKeyPress = useCallback(
+    (e) => {
+      // handle held key
+      if (e.repeat) return;
+      // Space bar
+      if (e.keyCode === 13) {
+        handleValidation();
+      }
+    },
+    [handleValidation],
   );
+
+  useEffect(() => {
+    // attach the event listener
+    document.addEventListener('keydown', handleKeyPress);
+
+    // remove the event listener
+    return () => {
+      document.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [handleKeyPress]);
+
+  if (isLocal || auth) {
+    return children;
+  } else {
+    return (
+      <div className={style.container}>
+        ontime
+        <HStack spacing='10px' className={failed ? style.pin__failed : style.pin}>
+          <PinInput
+            type='alphanumeric'
+            size='lg'
+            mask
+            autoFocus
+            value={pin}
+            onChange={(value) => {
+              setFailed(false);
+              setPin(value);
+            }}
+          >
+            <PinInputField />
+            <PinInputField />
+            <PinInputField />
+            <PinInputField />
+          </PinInput>
+          <IconButton
+            aria-label='Enter'
+            size='lg'
+            isRound
+            icon={<FiCheck />}
+            style={{ fontSize: '1.5em' }}
+            onClick={() => handleValidation()}
+          />
+        </HStack>
+      </div>
+    );
+  }
 }
 
 ProtectRoute.propTypes = {