Custom window decoration for windows / macos

new-ui/package.json

@@ -62,6 +62,6 @@
     "stylelint-config-standard-scss": "^17.0.0",
     "stylelint-scss": "^7.2.0",
     "typescript": "~6.0.3",
-    "vite": "^8.1.0"
+    "vite": "^8.1.1"
   }
 }

new-ui/src/app/App.tsx

@@ -1,13 +1,15 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { RouterProvider } from '@tanstack/react-router';
 import { MainBackground } from '../shared/components/MainBackground/MainBackground';
+import { WindowDecorations } from '../shared/components/WindowDecorations/WindowDecorations';
 import { queryClient } from './query';
 import { router } from './router';
 
 function App() {
   return (
     <div id="app">
       <MainBackground />
+      <WindowDecorations />
       <div id="app-content">
         <QueryClientProvider client={queryClient}>
           <RouterProvider router={router} />

new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalMfaEmail/ConnectModalMfaEmail.tsx

@@ -36,17 +36,22 @@ export const ConnectModalMfaEmail = () => {
   const [emailCode, setEmailCode] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
-  const handleVerify = useCallback(() => {
-    if (!isPresent(emailCode)) {
-      setError('Enter code');
-      return;
-    }
-    if (emailCode.length !== 6) {
-      setError('6 digits are required');
-      return;
-    }
-    verifyCode(emailCode);
-  }, [emailCode, verifyCode]);
+  const handleVerify = useCallback(
+    (initCode?: string | null) => {
+      const codeToVerify = initCode ?? emailCode;
+
+      if (!isPresent(codeToVerify)) {
+        setError('Enter code');
+        return;
+      }
+      if (codeToVerify.length !== 6) {
+        setError('6 digits are required');
+        return;
+      }
+      verifyCode(codeToVerify);
+    },
+    [emailCode, verifyCode],
+  );
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: side effect of code input
   useEffect(() => {
@@ -76,6 +81,9 @@ export const ConnectModalMfaEmail = () => {
         value={emailCode}
         onChange={setEmailCode}
         error={startError ?? error}
+        onSuccessPaste={(value) => {
+          handleVerify(value);
+        }}
       />
       <Controls>
         <Button
@@ -89,7 +97,7 @@ export const ConnectModalMfaEmail = () => {
           <Button
             text="Verify"
             variant={ButtonVariant.Primary}
-            onClick={handleVerify}
+            onClick={() => handleVerify()}
             loading={isStarting || isVerifying}
           />
         </div>

new-ui/src/pages/full/OverviewPage/components/ConnectModal/views/ConnectModalMfaTotp/ConnectModalMfaTotp.tsx

@@ -36,17 +36,21 @@ export const ConnectModalMfaTotp = () => {
   const [totpCode, setTotpCode] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
-  const handleVerify = useCallback(() => {
-    if (!isPresent(totpCode)) {
-      setError('Enter code');
-      return;
-    }
-    if (totpCode.replaceAll(' ', '').length !== 6) {
-      setError('6 digits are required');
-      return;
-    }
-    verifyCode(totpCode);
-  }, [totpCode, verifyCode]);
+  const handleVerify = useCallback(
+    (initCode?: string | null) => {
+      const codeToVerify = initCode ?? totpCode;
+      if (!isPresent(codeToVerify)) {
+        setError('Enter code');
+        return;
+      }
+      if (codeToVerify.replaceAll(' ', '').length !== 6) {
+        setError('6 digits are required');
+        return;
+      }
+      verifyCode(codeToVerify);
+    },
+    [totpCode, verifyCode],
+  );
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: side effect of code input
   useEffect(() => {
@@ -74,8 +78,11 @@ export const ConnectModalMfaTotp = () => {
       <CodeInput
         length={6}
         value={totpCode}
-        onChange={setTotpCode}
+        onChange={(val) => setTotpCode(val)}
         error={startError ?? error}
+        onSuccessPaste={(value) => {
+          handleVerify(value);
+        }}
       />
       <Controls>
         <Button
@@ -89,7 +96,7 @@ export const ConnectModalMfaTotp = () => {
           <Button
             text="Verify"
             variant={ButtonVariant.Primary}
-            onClick={handleVerify}
+            onClick={() => handleVerify()}
             loading={isVerifying}
             disabled={isStarting}
           />

new-ui/src/shared/components/FloatingMenu/style.scss

@@ -4,5 +4,5 @@
   padding: 8px;
   background-color: var(--c-saturated-dark-blue-60);
   box-shadow: 0 4px 12px 0 rgb(0 0 0 / 7%);
-  backdrop-filter: blur(4px);
+  backdrop-filter: blur(10px);
 }

new-ui/src/shared/components/Menu/style.scss

@@ -8,7 +8,7 @@
   border: 0;
   background-color: var(--c-saturated-dark-blue-60);
   box-shadow: 0 4px 12px 0 rgb(0 0 0 / 7%);
-  backdrop-filter: blur(4px);
+  backdrop-filter: blur(10px);
   overflow: hidden auto;
   z-index: 5;
 

new-ui/src/shared/components/ModalFoundation/style.scss

@@ -6,18 +6,22 @@
 
     .backdrop {
       position: fixed;
-      inset: 0;
+      left: 0;
+      top: var(--window-decorations-height);
       display: block;
       content: ' ';
       width: 100%;
-      height: 100%;
+      height: calc(100dvh - var(--window-decorations-height));
       z-index: 4;
     }
 
     .modal-positioner {
       overflow: auto;
       position: fixed;
-      inset: 0;
+      left: 0;
+      top: var(--window-decorations-height);
+      width: 100%;
+      height: calc(100dvh - var(--window-decorations-height));
       z-index: 4;
       display: flex;
       flex-flow: column;

new-ui/src/shared/components/OverviewLocationCard/OverviewLocationCard.tsx

@@ -161,6 +161,7 @@ export const OverviewLocationCard = ({ location, instance }: Props) => {
                     view: ConnectModalView.MfaSettings,
                     location: location,
                     perviousView: null,
+                    mfaMethod: location.mfa_method,
                   });
                 }
               }}