Add Countdown Timer Indicator

apps/desktop/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "otentik-authenticator"
-version = "0.3.0"
+version = "0.4.0"
 description = "Open Source two factor authenticator"
 authors = ["Aris Ripandi <aris@duck.com>"]
 license = "Apache-2.0"

apps/desktop/src-tauri/src/menu.rs

@@ -9,7 +9,7 @@ pub(crate) fn menu() -> Menu {
   // App Menu (macOS)
   // ---------------------------------------------------------------------------------------------
   let about_menu = AboutMetadata::new()
-    .version(String::from("0.3.0"))
+    .version(String::from("0.4.0"))
     .authors(vec![String::from("Aris Ripandi")])
     .comments(String::from("Open Source two factor authenticator"))
     .copyright(String::from("Apache-2.0 License"))

apps/desktop/src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
     },
     "package": {
         "productName": "Authenticator",
-        "version": "0.3.0"
+        "version": "0.4.0"
     },
     "tauri": {
         "allowlist": {

apps/desktop/src/components/AppMenu.tsx

@@ -1,18 +1,16 @@
 import { Fragment } from 'react'
 import { appWindow } from '@tauri-apps/api/window'
 import { ask, open, save } from '@tauri-apps/api/dialog'
-import { checkUpdate } from '@tauri-apps/api/updater'
 
 import { Menu, Transition } from '@headlessui/react'
 import {
   LockClosedIcon,
-  CogIcon,
+  ArrowPathIcon,
   ArrowRightOnRectangleIcon,
   DocumentPlusIcon,
   XCircleIcon,
-  ArchiveBoxIcon,
-  ArrowDownOnSquareIcon,
-  ArrowPathIcon,
+  ArrowUturnUpIcon,
+  ArrowUturnDownIcon,
 } from '@heroicons/react/24/outline'
 import { Bars3Icon } from '@heroicons/react/24/solid'
 import { useHotkeys } from 'react-hotkeys-hook'
@@ -22,6 +20,7 @@ import { classNames } from '../utils/ui-helpers'
 import { sbClient } from '../utils/supabase'
 import { MenuDivider } from './MenuDivider'
 import { exportCollections, importCollections } from '../utils/import-export'
+import { toast } from 'react-hot-toast'
 
 const delay = (ms: number) => new Promise((res) => setTimeout(res, ms))
 
@@ -38,7 +37,7 @@ export const AppMenu = () => {
   }
 
   const handleImport = async () => {
-    // Open a selection dialog for image files
+    // Open a selection dialog for backup file
     const selected = await open({
       multiple: false,
       filters: [
@@ -53,6 +52,7 @@ export const AppMenu = () => {
       // user selected multiple files
     } else if (selected === null) {
       // user cancelled the selection
+      toast.error('Canceled!')
     } else {
       // user selected a single file
       await importCollections(selected)
@@ -82,24 +82,6 @@ export const AppMenu = () => {
     }
   }
 
-  const handleUpdate = async () => {
-    try {
-      // const { shouldUpdate, manifest } = await checkUpdate()
-      const resp = await checkUpdate()
-      console.log('UPDATESSSSSSSS', resp)
-
-      // if (shouldUpdate) {
-      //   console.log('UPDATES', shouldUpdate)
-      //   // display dialog
-      //   await installUpdate()
-      //   // install complete, restart app
-      //   await relaunch()
-      // }
-    } catch (error) {
-      console.log(error)
-    }
-  }
-
   const handleSignOut = () => {
     resetStates()
     sbClient.auth.signOut().catch(console.error)
@@ -109,7 +91,7 @@ export const AppMenu = () => {
   useHotkeys('ctrl+l, command+l', () => setLockStreenState(true))
 
   return (
-    <div className="absolute top-0 right-0 z-20 flex h-14 items-center px-4">
+    <div className="absolute top-0 right-0 z-30 flex h-14 items-center px-4">
       <Menu as="div" className="relative">
         <div>
           <Menu.Button className="-mr-1 flex cursor-pointer items-center justify-center rounded-md p-1.5 outline-none hover:bg-gray-700">
@@ -125,7 +107,7 @@ export const AppMenu = () => {
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items className="absolute right-1 z-30 mt-2 w-48 origin-top-right rounded bg-white shadow ring-1 ring-black/5 focus:outline-none dark:bg-gray-700">
+          <Menu.Items className="absolute right-1 mt-2 w-52 origin-top-right rounded bg-white shadow ring-1 ring-black/5 focus:outline-none dark:bg-gray-700">
             {!locked && (
               <>
                 <Menu.Item>
@@ -155,21 +137,6 @@ export const AppMenu = () => {
                       onClick={() => setForceFetch(true)}
                     >
                       <span>Sync Vault</span>
-                      <CogIcon className="h-4 w-4 text-gray-500 dark:text-gray-300" />
-                    </button>
-                  )}
-                </Menu.Item>
-                <Menu.Item>
-                  {({ active }: { active: boolean }) => (
-                    <button
-                      type="button"
-                      className={classNames(
-                        active ? 'bg-gray-100 dark:bg-gray-500' : '',
-                        'inline-flex w-full items-center justify-between px-5 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-100'
-                      )}
-                      onClick={handleUpdate}
-                    >
-                      <span>Check for Updates</span>
                       <ArrowPathIcon className="h-4 w-4 text-gray-500 dark:text-gray-300" />
                     </button>
                   )}
@@ -186,7 +153,7 @@ export const AppMenu = () => {
                       onClick={handleImport}
                     >
                       <span>Import</span>
-                      <ArrowDownOnSquareIcon className="h-4 w-4 text-gray-500 dark:text-gray-300" />
+                      <ArrowUturnDownIcon className="h-4 w-4 text-gray-500 dark:text-gray-300" />
                     </button>
                   )}
                 </Menu.Item>
@@ -201,7 +168,7 @@ export const AppMenu = () => {
                       onClick={handleExport}
                     >
                       <span>Export</span>
-                      <ArchiveBoxIcon className="h-4 w-4 text-gray-500 dark:text-gray-300" />
+                      <ArrowUturnUpIcon className="h-4 w-4 text-gray-500 dark:text-gray-300" />
                     </button>
                   )}
                 </Menu.Item>

apps/desktop/src/components/ConfirmDialog.tsx

@@ -15,9 +15,7 @@ export const ConfirmDialog: FC<ConfirmDialogProps> = (props) => {
   const { children, open, onClose, title, onConfirm } = props
   const cancelButtonRef = useRef(null)
 
-  return !open ? (
-    <></>
-  ) : (
+  return (
     <DialogTransition
       isOpen={open}
       initialFocus={cancelButtonRef}

apps/desktop/src/components/ProgressBar.tsx

@@ -12,7 +12,7 @@ export const ProgressBar: FC<ProgressBarProps> = ({ percentage }) => {
         <div
           style={{ width: `${percentage}%` }}
           className={classNames(
-            percentage >= 60 ? 'from-blue-500 to-red-500' : 'from-cyan-500 to-blue-500',
+            percentage < 40 ? 'from-red-900 to-red-400' : 'from-red-500 to-blue-500',
             'h-1.5 bg-gradient-to-r'
           )}
         ></div>

apps/desktop/src/components/RefreshButton.tsx

@@ -0,0 +1,21 @@
+import { ArrowPathIcon } from '@heroicons/react/24/outline'
+import { useStores } from '../stores/stores'
+
+export const RefreshButton = () => {
+  const setForceFetch = useStores((state) => state.setForceFetch)
+
+  return (
+    <div className="absolute top-0 right-0 z-10 flex h-14 items-center px-4">
+      <div className="relative">
+        <div>
+          <button
+            className="-mr-1 flex cursor-pointer items-center justify-center rounded-md p-1.5 outline-none hover:bg-gray-700"
+            onClick={() => setForceFetch(true)}
+          >
+            <ArrowPathIcon className="h-6 w-6 text-white" />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/desktop/src/components/TitleBar.tsx

@@ -4,7 +4,7 @@ export const TitleBar = () => {
   return (
     <div
       data-tauri-drag-region
-      className="fixed top-0 left-0 right-0 z-10 mx-auto flex h-14 max-w-sm items-center justify-between bg-gray-900 py-3 px-4"
+      className="fixed top-0 left-0 right-0 z-30 mx-auto flex h-14 max-w-sm items-center justify-between bg-gray-900 py-3 px-4"
     >
       <div className="inline-flex items-center">
         <AppLogo className="mr-1.5 h-6 w-auto" />

apps/desktop/src/hooks/useGetCollections.ts

@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
+import { useStores } from '../stores/stores'
 
 import { parseCollections } from '../utils/array-helpers'
 import { localData } from '../utils/storage'
@@ -10,6 +11,7 @@ type GetCollectionType = {
 }
 
 export const useGetCollections = ({ filter }: GetCollectionType) => {
+  const locked = useStores((state) => state.locked)
   const refreshTime = 30000 // How frequently you want to refresh the data, in ms
   // const user_id = useAuth()?.user?.id
 
@@ -29,6 +31,8 @@ export const useGetCollections = ({ filter }: GetCollectionType) => {
       initialData: [],
       refetchInterval: refreshTime,
       // select: (data: any) => data.find((item: any) => item),
+      // Only fetch when screen unloced
+      enabled: !locked,
     }
   )
 }

apps/desktop/src/screens/AuthScreen.tsx

@@ -1,13 +1,14 @@
 import { useState } from 'react'
 import { ArrowRightCircleIcon } from '@heroicons/react/24/solid'
-import toast from 'react-hot-toast'
+import { toast } from 'react-hot-toast'
 
 import { sbClient } from '../utils/supabase'
 import { LoaderScreen } from '../components/LoaderScreen'
 import { classNames } from '../utils/ui-helpers'
-import { createHash } from '../utils/string-helpers'
+import { createHash, md5Hash } from '../utils/string-helpers'
 import { ExitButton } from '../components/ExitButton'
 import { TitleBar } from '../components/TitleBar'
+import { localData } from '../utils/storage'
 
 export const AuthScreen = () => {
   const [loading, setLoading] = useState(false)
@@ -33,8 +34,14 @@ export const AuthScreen = () => {
 
     if (error) return toast.error(error.message)
 
-    setLoading(false)
-    resetForm()
+    if (user) {
+      // If login success then store hashed passphrase in localStorage
+      const hashedPassphrase = await md5Hash(password)
+      await localData.set('passphrase', hashedPassphrase)
+      setLoading(false)
+    }
+
+    return resetForm()
   }
 
   const handleRegister = async () => {
@@ -45,7 +52,7 @@ export const AuthScreen = () => {
     if (error) return toast.error(error.message)
     toast.success('Check your email to verify your account!')
     setActionIsLogin(true)
-    resetForm()
+    return resetForm()
   }
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {

apps/desktop/src/screens/ErrorScreen.tsx

@@ -1,14 +1,18 @@
 import { ShieldExclamationIcon } from '@heroicons/react/24/outline'
+import { ExitButton } from '../components/ExitButton'
 
 export const ErrorScreen = ({ message }: { message: string }) => {
   return (
-    <div className="relative inset-0 z-10 mt-14 h-[544px] bg-gray-50 transition-opacity">
-      <div className="flex h-full w-full items-center justify-center">
-        <div>
-          <ShieldExclamationIcon className="mx-auto h-14 w-14 text-gray-500" />
-          <p className="my-6 text-center text-sm font-medium text-gray-700">{message || 'Something wrong :-('}</p>
+    <>
+      <ExitButton />
+      <div className="relative inset-0 z-10 mt-14 h-[544px] bg-gray-50 transition-opacity">
+        <div className="flex h-full w-full items-center justify-center">
+          <div>
+            <ShieldExclamationIcon className="mx-auto h-14 w-14 text-gray-500" />
+            <p className="my-6 text-center text-sm font-medium text-gray-700">{message || 'Something wrong :-('}</p>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   )
 }