install updates on login page

commaai · Jul 25, 2023 · d9b4ffd · d9b4ffd
1 parent fa7d2de
commit d9b4ffd
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 16 deletions.
diff --git a/src/components/PWAIcon.jsx b/src/components/PWAIcon.jsx
@@ -1,14 +1,17 @@
-/* eslint-disable no-console */
 import React, { useState } from 'react';
 import { useRegisterSW } from 'virtual:pwa-register/react';
 
-import { CircularProgress, IconButton, Tooltip } from '@material-ui/core';
+import {
+  CircularProgress,
+  IconButton,
+  Tooltip,
+} from '@material-ui/core';
 
 import { CheckCircle, Download } from '../icons';
 
 const intervalMS = 60 * 60 * 1000;  // 1 hour
 
-const PWAIcon = () => {
+const PWAIcon = ({ immediate }) => {
   const {
     offlineReady: [offlineReady, setOfflineReady],
     needRefresh: [needRefresh, setNeedRefresh],
@@ -34,6 +37,13 @@ const PWAIcon = () => {
   });
   const [installing, setInstalling] = useState(false);
 
+  if (immediate) {
+    if (needRefresh) {
+      updateServiceWorker(true);
+    }
+    return null;
+  }
+
   const close = () => {
     setOfflineReady(false);
     setNeedRefresh(false);
@@ -43,14 +53,6 @@ const PWAIcon = () => {
     return <div className="w-12" />;
   }
 
-  if (installing) {
-    return (
-      <div className="w-12 flex justify-center self-center">
-        <CircularProgress className="flex text-[rgba(128,255,128,0.5)]" size={24} />
-      </div>
-    );
-  }
-
   let title;
   let Icon;
   let color;
@@ -71,9 +73,20 @@ const PWAIcon = () => {
   }
 
   return (
-    <Tooltip title={<span className="text-xs">{title}</span>}>
-      <IconButton className="animate-fadein" onClick={callback}>
-        <Icon className={`w-7 h-7 ${color}`} />
+    <Tooltip
+      className="w-12 flex justify-center self-center"
+      title={<span className="text-xs">{title}</span>}
+    >
+      <IconButton
+        className="animate-fadein"
+        onClick={callback}
+        disabled={installing}
+      >
+        {installing ? (
+          <CircularProgress className="flex text-[rgba(128,255,128,0.5)]" size={24} />
+        ) : (
+          <Icon className={`w-7 h-7 ${color}`} />
+        )}
       </IconButton>
     </Tooltip>
   );

diff --git a/src/components/anonymous.jsx b/src/components/anonymous.jsx
@@ -10,8 +10,10 @@ import Typography from '@material-ui/core/Typography';
 
 import { config as AuthConfig } from '@commaai/my-comma-auth';
 
-import { AuthAppleIcon, AuthGithubIcon, AuthGoogleIcon } from '../icons';
 import Colors from '../colors';
+import { AuthAppleIcon, AuthGithubIcon, AuthGoogleIcon } from '../icons';
+
+import PWAIcon from './PWAIcon';
 
 import demoDevices from '../demo/devices.json';
 
@@ -130,7 +132,7 @@ class AnonymousLanding extends Component {
       const { code, state } = data.detail.authorization;
       window.location = [AuthConfig.APPLE_REDIRECT_PATH, qs.stringify({ code, state })].join('?');
     });
-    document.addEventListener('AppleIDSignInOnFailure', console.log);
+    document.addEventListener('AppleIDSignInOnFailure', console.warn);
   }
 
   render() {
@@ -163,6 +165,7 @@ class AnonymousLanding extends Component {
             <Typography className={classes.demoLinkText}>Try the demo</Typography>
           </a>
         </div>
+        <PWAIcon immediate />
       </div>
     );
   }