From 079a84fc82678b04f8317018a3f94128106a097a Mon Sep 17 00:00:00 2001
From: mngshm <mangeshrex@tutanota.com>
Date: Mon, 6 Jan 2025 19:13:01 +0530
Subject: [PATCH 01/15] refactor: reomve unnecessary stylesheet

---
 infra/staff/src/App.css | 113 ++++++++++++++++------------------------
 infra/staff/src/App.tsx |  12 +++--
 2 files changed, 53 insertions(+), 72 deletions(-)

diff --git a/infra/staff/src/App.css b/infra/staff/src/App.css
index 38580a25684..ec7df397e9a 100644
--- a/infra/staff/src/App.css
+++ b/infra/staff/src/App.css
@@ -1,36 +1,14 @@
 .container {
-    position: relative; /* Ensure the parent is relatively positioned */
-    height: 100vh; /* Full viewport height */
-    width: 100vw; /* Full viewport width */
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  max-width: 1200px;
+  height: auto;
+  align-items: center;
+  margin: 0 auto;
 }
 
 .center-table {
     display: table;
 }
 
-.input-form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.horizontal-group {
-    position: absolute; /* Use absolute positioning */
-    top: 32px; /* 32px below the top of the page */
-    left: 32px; /* 32px from the leftmost edge of the page */
-    right: 32px;
-    display: flex;
-    align-items: center; /* Align items vertically centered */
-    gap: 20px; /* Adjust the gap between elements as needed */
-    background-color: #fafafa;
-    height: 104px;
-    width: 1375px;
-    border-radius: 10px;
-}
-
 .fetch-button-container button {
     background-color: #00b33c;
     color: white;
@@ -85,30 +63,23 @@
     justify-content: center;
     align-items: center;
 }
-.container {
-    position: relative; /* Ensure the parent is relatively positioned */
-    height: 100vh; /* Full viewport height */
-    width: 100vw; /* Full viewport width */
-    display: flex;
-    flex-direction: column; /* Add this */
-    justify-content: center; /* Center vertically */
-    align-items: center; /* Center horizontally */
-}
 
 .input-form {
     display: flex;
     flex-direction: column;
     align-items: center;
-    z-index: 1; /* Ensure form is on top */
+    justify-content: space-around;
 }
 
 .horizontal-group {
     display: flex;
     align-items: center;
-    gap: 20px; /* Adjust the gap between elements as needed */
-    background-color: #fafafa;
+    background-color: #fcfcfc;
     padding: 20px; /* Add padding around content */
     border-radius: 10px;
+    margin-top: 90px;
+    width: 1200px;
+    justify-content: center;
 }
 
 .fetch-button-container button {
@@ -124,21 +95,10 @@
 }
 
 .link-text {
-    display: flex;
-    align-items: center;
-    padding: 0 16px; /* Add padding for better appearance */
     text-decoration: none; /* Remove underline */
     color: inherit; /* Inherit color from parent */
     font-weight: bold; /* Make the text bold */
-    font-size: 40px;
-}
-
-.text-field-token {
-    margin-left: 70px !important; /* Adjust margin for Token field */
-}
-
-.text-field-email {
-    margin-left: 50px !important; /* Adjust margin for Email field */
+    font-size: 30px;
 }
 
 .center-content {
@@ -181,20 +141,11 @@
     margin-bottom: 20px; /* Add space between form and tabs */
 }
 
-.horizontal-group {
-    display: flex;
-    align-items: center;
-    gap: 20px; /* Adjust the gap between elements as needed */
-    background-color: #fafafa;
-    padding: 20px; /* Add padding around content */
-    border-radius: 10px;
-}
-
 .fetch-button-container button {
     background-color: #00b33c;
     color: white;
     border: none;
-    width: 199px;
+    width: 150px;
     height: 56px;
 }
 
@@ -313,10 +264,6 @@
     min-height: 100vh;
 }
 
-.input-form {
-    margin-bottom: 16px;
-}
-
 .content-container {
     display: flex;
     flex-direction: column;
@@ -325,11 +272,6 @@
     margin-top: 150px;
 }
 
-.horizontal-group {
-    display: flex;
-    align-items: center;
-}
-
 .fetch-button-container {
     margin-right: 10px;
     margin-left: 10px;
@@ -345,3 +287,36 @@
     font-weight: bold;
     margin-top: 16px;
 }
+
+/* Mobile */
+@media screen and (max-width: 475px) {
+  .link-text {
+    font-size: 25px;
+    text-align: center;
+  }
+  .input-form {
+    max-width: 400px;
+    align-items: center;
+    gap: 20px;
+    flex-direction: row;
+  }
+  .text-field-token {
+
+  }
+  .horizontal-group {
+    width: 500px;
+    flex-direction: column;
+  }
+}
+
+@media screen and (max-width: 576px) {
+
+}
+
+@media screen and (max-width: 900px) {
+
+}
+
+@media screen and (max-width: 1200px) {
+
+}
diff --git a/infra/staff/src/App.tsx b/infra/staff/src/App.tsx
index c610ac9aa48..cecbeca28f5 100644
--- a/infra/staff/src/App.tsx
+++ b/infra/staff/src/App.tsx
@@ -234,6 +234,7 @@ const App: React.FC = () => {
 
     return (
         <div className="container">
+        <div>
             <form className="input-form" onKeyPress={handleKeyPress}>
                 <div className="horizontal-group">
                     <a
@@ -254,7 +255,7 @@ const App: React.FC = () => {
                         }}
                         size="medium"
                         className="text-field-token"
-                        style={{ width: "350px" }}
+                        style={{ maxWidth: "parent"  }} 
                     />
                     <TextField
                         label="Email"
@@ -265,7 +266,7 @@ const App: React.FC = () => {
                         }}
                         size="medium"
                         className="text-field-email"
-                        style={{ width: "350px" }}
+                        style={{ width: "parent" }}
                     />
                     <div className="fetch-button-container">
                         <Button
@@ -285,10 +286,15 @@ const App: React.FC = () => {
                     </div>
                 </div>
             </form>
+            </div>
             <div className="content-container">
                 {loading ? (
                     <CircularProgress
-                        sx={{ color: "black", marginTop: "200px" }}
+                        sx={{ 
+                          color: "black", 
+                          top: "200px",
+                          position: "fixed"
+                        }}
                     />
                 ) : error ? (
                     <div className="error-message">{error}</div>

From cf6cd23ea4506af5f516168920763b67e211d6b5 Mon Sep 17 00:00:00 2001
From: mngshm <mangeshrex@tutanota.com>
Date: Tue, 7 Jan 2025 10:11:06 +0530
Subject: [PATCH 02/15] fix: formatting

---
 infra/staff/src/App.css |  44 ++++++++---------
 infra/staff/src/App.tsx | 107 +++++++++++++++++++++-------------------
 2 files changed, 75 insertions(+), 76 deletions(-)

diff --git a/infra/staff/src/App.css b/infra/staff/src/App.css
index ec7df397e9a..1ebb973048c 100644
--- a/infra/staff/src/App.css
+++ b/infra/staff/src/App.css
@@ -1,8 +1,8 @@
 .container {
-  max-width: 1200px;
-  height: auto;
-  align-items: center;
-  margin: 0 auto;
+    max-width: 1200px;
+    height: auto;
+    align-items: center;
+    margin: 0 auto;
 }
 
 .center-table {
@@ -290,33 +290,29 @@
 
 /* Mobile */
 @media screen and (max-width: 475px) {
-  .link-text {
-    font-size: 25px;
-    text-align: center;
-  }
-  .input-form {
-    max-width: 400px;
-    align-items: center;
-    gap: 20px;
-    flex-direction: row;
-  }
-  .text-field-token {
-
-  }
-  .horizontal-group {
-    width: 500px;
-    flex-direction: column;
-  }
+    .link-text {
+        font-size: 25px;
+        text-align: center;
+    }
+    .input-form {
+        max-width: 400px;
+        align-items: center;
+        gap: 20px;
+        flex-direction: row;
+    }
+    .text-field-token {
+    }
+    .horizontal-group {
+        width: 500px;
+        flex-direction: column;
+    }
 }
 
 @media screen and (max-width: 576px) {
-
 }
 
 @media screen and (max-width: 900px) {
-
 }
 
 @media screen and (max-width: 1200px) {
-
 }
diff --git a/infra/staff/src/App.tsx b/infra/staff/src/App.tsx
index cecbeca28f5..98e1725ac28 100644
--- a/infra/staff/src/App.tsx
+++ b/infra/staff/src/App.tsx
@@ -234,66 +234,69 @@ const App: React.FC = () => {
 
     return (
         <div className="container">
-        <div>
-            <form className="input-form" onKeyPress={handleKeyPress}>
-                <div className="horizontal-group">
-                    <a
-                        href="https://staff.ente.sh"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="link-text"
-                    >
-                        staff.ente.sh
-                    </a>
+            <div>
+                <form className="input-form" onKeyPress={handleKeyPress}>
+                    <div className="horizontal-group">
+                        <a
+                            href="https://staff.ente.sh"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="link-text"
+                        >
+                            staff.ente.sh
+                        </a>
 
-                    <TextField
-                        label="Token"
-                        value={localToken}
-                        onChange={(e) => {
-                            setLocalToken(e.target.value);
-                            setToken(e.target.value);
-                        }}
-                        size="medium"
-                        className="text-field-token"
-                        style={{ maxWidth: "parent"  }} 
-                    />
-                    <TextField
-                        label="Email"
-                        value={localEmail}
-                        onChange={(e) => {
-                            setLocalEmail(e.target.value);
-                            setEmail(e.target.value);
-                        }}
-                        size="medium"
-                        className="text-field-email"
-                        style={{ width: "parent" }}
-                    />
-                    <div className="fetch-button-container">
-                        <Button
-                            variant="contained"
-                            onClick={() => {
-                                fetchData().catch((error: unknown) =>
-                                    console.error("Fetch data error:", error),
-                                );
+                        <TextField
+                            label="Token"
+                            value={localToken}
+                            onChange={(e) => {
+                                setLocalToken(e.target.value);
+                                setToken(e.target.value);
                             }}
-                            className="fetch-button"
-                            style={{
-                                padding: "0 16px",
+                            size="medium"
+                            className="text-field-token"
+                            style={{ maxWidth: "parent" }}
+                        />
+                        <TextField
+                            label="Email"
+                            value={localEmail}
+                            onChange={(e) => {
+                                setLocalEmail(e.target.value);
+                                setEmail(e.target.value);
                             }}
-                        >
-                            FETCH
-                        </Button>
+                            size="medium"
+                            className="text-field-email"
+                            style={{ width: "parent" }}
+                        />
+                        <div className="fetch-button-container">
+                            <Button
+                                variant="contained"
+                                onClick={() => {
+                                    fetchData().catch((error: unknown) =>
+                                        console.error(
+                                            "Fetch data error:",
+                                            error,
+                                        ),
+                                    );
+                                }}
+                                className="fetch-button"
+                                style={{
+                                    padding: "0 16px",
+                                }}
+                            >
+                                FETCH
+                            </Button>
+                        </div>
                     </div>
-                </div>
-            </form>
+                </form>
             </div>
             <div className="content-container">
                 {loading ? (
                     <CircularProgress
-                        sx={{ 
-                          color: "black", 
-                          top: "200px",
-                          position: "fixed"
+                        sx={{
+                            color: "black",
+                            top: "200px",
+                            position: "fixed",
                         }}
                     />
                 ) : error ? (

From f0789b1fca0cfea54e5a5516fe5b7c333197ebaf Mon Sep 17 00:00:00 2001
From: mngshm <mangeshrex@tutanota.com>
Date: Tue, 7 Jan 2025 17:40:59 +0530
Subject: [PATCH 03/15] pushing staged changes

---
 infra/staff/src/App.css | 102 +++++++++++-----------------------------
 infra/staff/src/App.tsx |  54 +++++++++++----------
 2 files changed, 56 insertions(+), 100 deletions(-)

diff --git a/infra/staff/src/App.css b/infra/staff/src/App.css
index 1ebb973048c..cf3eeaf5640 100644
--- a/infra/staff/src/App.css
+++ b/infra/staff/src/App.css
@@ -15,7 +15,6 @@
     border: none;
     width: 199px;
     height: 56px;
-    margin-left: 20px;
 }
 
 .fetch-button-container button:hover {
@@ -30,15 +29,9 @@
     color: inherit; /* Inherit color from parent */
     font-weight: bold; /* Make the text bold */
     font-size: 40px;
+    margin-bottom: 25px;
 }
 
-.text-field-token {
-    margin-left: 70px !important; /* Adjust margin for Token field */
-}
-
-.text-field-email {
-    margin-left: 20px !important; /* Adjust margin for Email field */
-}
 .duckie-container {
     position: absolute;
     top: 50%;
@@ -69,6 +62,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: space-around;
+    marign: 20px;
 }
 
 .horizontal-group {
@@ -79,9 +73,14 @@
     border-radius: 10px;
     margin-top: 90px;
     width: 1200px;
-    justify-content: center;
+    justify-content: space-around;
 }
 
+.text-fields {
+  display: flex;
+  justify-content: row;
+  gap: 20px;
+}
 .fetch-button-container button {
     background-color: #00b33c;
     color: white;
@@ -94,13 +93,6 @@
     background-color: #007c6c;
 }
 
-.link-text {
-    text-decoration: none; /* Remove underline */
-    color: inherit; /* Inherit color from parent */
-    font-weight: bold; /* Make the text bold */
-    font-size: 30px;
-}
-
 .center-content {
     display: flex;
     justify-content: center;
@@ -117,30 +109,6 @@
     align-items: center;
 }
 
-/* Example CSS to maintain tabs fixed position */
-.tabs-container {
-    position: sticky;
-    top: 20px; /* Adjust as needed */
-    z-index: 1000; /* Ensure tabs are above other content */
-}
-.container {
-    position: relative; /* Ensure the parent is relatively positioned */
-    height: 100vh; /* Full viewport height */
-    width: 100vw; /* Full viewport width */
-    display: flex;
-    flex-direction: column; /* Ensure children stack vertically */
-    justify-content: center; /* Center vertically */
-    align-items: center; /* Center horizontally */
-}
-
-.input-form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    z-index: 1; /* Ensure form is on top */
-    margin-bottom: 20px; /* Add space between form and tabs */
-}
-
 .fetch-button-container button {
     background-color: #00b33c;
     color: white;
@@ -153,24 +121,6 @@
     background-color: #007c6c;
 }
 
-.link-text {
-    display: flex;
-    align-items: center;
-    padding: 0 16px; /* Add padding for better appearance */
-    text-decoration: none; /* Remove underline */
-    color: inherit; /* Inherit color from parent */
-    font-weight: bold; /* Make the text bold */
-    font-size: 40px;
-}
-
-.text-field-token {
-    margin-left: 70px !important; /* Adjust margin for Token field */
-}
-
-.text-field-email {
-    margin-left: 50px !important; /* Adjust margin for Email field */
-}
-
 .center-content {
     display: flex;
     justify-content: center;
@@ -187,14 +137,6 @@
     align-items: center;
 }
 
-.tabs-container {
-    position: sticky; /* Make the tabs sticky */
-    top: 0; /* Stick to the top of the viewport */
-    z-index: 1000; /* Ensure tabs are above other content */
-    background-color: #fafafa; /* Optional: Add background color to tabs */
-    padding: 10px 20px; /* Optional: Add padding for better appearance */
-    border-bottom: 1px solid #ccc; /* Optional: Add bottom border */
-}
 .dialog-popup-container {
     /* Styles for the overlay/background */
     position: fixed;
@@ -268,8 +210,8 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    gap: 25px;
     width: 100%;
-    margin-top: 150px;
 }
 
 .fetch-button-container {
@@ -277,21 +219,22 @@
     margin-left: 10px;
 }
 
-.text-field-token,
-.text-field-email {
-    margin: 0 8px;
-}
-
 .error-message {
     color: red;
     font-weight: bold;
     margin-top: 16px;
 }
 
+/* MUi Component Custom CSS */ 
+css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input {
+  padding: none;
+  margin: none;
+}
+
 /* Mobile */
 @media screen and (max-width: 475px) {
     .link-text {
-        font-size: 25px;
+        font-size: 30px;
         text-align: center;
     }
     .input-form {
@@ -300,11 +243,20 @@
         gap: 20px;
         flex-direction: row;
     }
-    .text-field-token {
-    }
     .horizontal-group {
         width: 500px;
         flex-direction: column;
+        gap: 25px;
+    }
+    .text-fields {
+    width: fit-content;
+        flex-direction: column;
+        gap: 20px;
+        justify-content: center;
+    }
+    .text-fields label {
+        padding: 0;
+        margin: none;
     }
 }
 
diff --git a/infra/staff/src/App.tsx b/infra/staff/src/App.tsx
index 98e1725ac28..15a8b6fc31b 100644
--- a/infra/staff/src/App.tsx
+++ b/infra/staff/src/App.tsx
@@ -227,7 +227,8 @@ const App: React.FC = () => {
 
     const handleTabChange = (
         _event: React.SyntheticEvent,
-        newValue: number,
+
+    newValue: number,
     ) => {
         setTabValue(newValue);
     };
@@ -243,32 +244,35 @@ const App: React.FC = () => {
                             rel="noopener noreferrer"
                             className="link-text"
                         >
-                            staff.ente.sh
+                            Ente Dashboard
                         </a>
-
-                        <TextField
-                            label="Token"
-                            value={localToken}
-                            onChange={(e) => {
-                                setLocalToken(e.target.value);
-                                setToken(e.target.value);
-                            }}
-                            size="medium"
-                            className="text-field-token"
-                            style={{ maxWidth: "parent" }}
-                        />
-                        <TextField
-                            label="Email"
-                            value={localEmail}
-                            onChange={(e) => {
-                                setLocalEmail(e.target.value);
-                                setEmail(e.target.value);
-                            }}
-                            size="medium"
-                            className="text-field-email"
-                            style={{ width: "parent" }}
-                        />
+                        <div class="text-fields">
+                            <TextField  
+                                
+                                label="Token"
+                                value={localToken}
+                                onChange={(e) => {
+                                    setLocalToken(e.target.value);
+                                    setToken(e.target.value);
+                                }}
+                                size="medium"
+                                className="text-field-token"
+                                style={{ maxWidth: "parent" }}
+                            />
+                            <TextField
+                                label="Email"
+                                value={localEmail}
+                                onChange={(e) => {
+                                    setLocalEmail(e.target.value);
+                                    setEmail(e.target.value);
+                                }}
+                                size="medium"
+                                className="text-field-email"
+                                style={{ width: "parent" }}
+                            />
+                        </div>
                         <div className="fetch-button-container">
+
                             <Button
                                 variant="contained"
                                 onClick={() => {

From cfe86b00aac32405b8f356a150de0633bab73244 Mon Sep 17 00:00:00 2001
From: mngshm <mangeshrex@tutanota.com>
Date: Mon, 13 Jan 2025 16:21:33 +0530
Subject: [PATCH 04/15] auto-fill search bar for token and wrap input fields in
 single div

---
 infra/staff/src/App.css | 14 +++++++-------
 infra/staff/src/App.tsx | 19 +++++++++++++------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/infra/staff/src/App.css b/infra/staff/src/App.css
index cf3eeaf5640..2cc6d55418f 100644
--- a/infra/staff/src/App.css
+++ b/infra/staff/src/App.css
@@ -77,9 +77,9 @@
 }
 
 .text-fields {
-  display: flex;
-  justify-content: row;
-  gap: 20px;
+    display: flex;
+    justify-content: row;
+    gap: 20px;
 }
 .fetch-button-container button {
     background-color: #00b33c;
@@ -225,10 +225,10 @@
     margin-top: 16px;
 }
 
-/* MUi Component Custom CSS */ 
+/* MUi Component Custom CSS */
 css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input {
-  padding: none;
-  margin: none;
+    padding: none;
+    margin: none;
 }
 
 /* Mobile */
@@ -249,7 +249,7 @@ css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input {
         gap: 25px;
     }
     .text-fields {
-    width: fit-content;
+        width: fit-content;
         flex-direction: column;
         gap: 20px;
         justify-content: center;
diff --git a/infra/staff/src/App.tsx b/infra/staff/src/App.tsx
index 15a8b6fc31b..04619cf2ea4 100644
--- a/infra/staff/src/App.tsx
+++ b/infra/staff/src/App.tsx
@@ -228,11 +228,20 @@ const App: React.FC = () => {
     const handleTabChange = (
         _event: React.SyntheticEvent,
 
-    newValue: number,
+        newValue: number,
     ) => {
         setTabValue(newValue);
     };
 
+    useEffect(() => {
+        const searchParam = new URLSearchParams(window.location.search) 
+        const userToken = searchParam.get('token')
+
+        if (userToken) {
+            setLocalToken(userToken);
+            setToken(userToken);
+    }, [])
+
     return (
         <div className="container">
             <div>
@@ -244,11 +253,10 @@ const App: React.FC = () => {
                             rel="noopener noreferrer"
                             className="link-text"
                         >
-                            Ente Dashboard
+                            staff.ente.io
                         </a>
-                        <div class="text-fields">
-                            <TextField  
-                                
+                        <div className="text-fields">
+                            <TextField
                                 label="Token"
                                 value={localToken}
                                 onChange={(e) => {
@@ -272,7 +280,6 @@ const App: React.FC = () => {
                             />
                         </div>
                         <div className="fetch-button-container">
-
                             <Button
                                 variant="contained"
                                 onClick={() => {

From 57a2650e8d398a99fd2b176064b94aa970a828b9 Mon Sep 17 00:00:00 2001
From: mngshm <mangeshrex@tutanota.com>
Date: Mon, 13 Jan 2025 16:57:26 +0530
Subject: [PATCH 05/15] fix: useEffect() syntax and formatting

---
 infra/staff/src/App.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/infra/staff/src/App.tsx b/infra/staff/src/App.tsx
index 04619cf2ea4..1b7bc829c69 100644
--- a/infra/staff/src/App.tsx
+++ b/infra/staff/src/App.tsx
@@ -234,13 +234,14 @@ const App: React.FC = () => {
     };
 
     useEffect(() => {
-        const searchParam = new URLSearchParams(window.location.search) 
-        const userToken = searchParam.get('token')
+        const searchParam = new URLSearchParams(window.location.search);
+        const userToken = searchParam.get("token");
 
         if (userToken) {
             setLocalToken(userToken);
             setToken(userToken);
-    }, [])
+        }
+    }, []);
 
     return (
         <div className="container">

From c750f2ea7e11f2b92328b300ef9a2707c5627201 Mon Sep 17 00:00:00 2001
From: mngshm <mangeshrex@tutanota.com>
Date: Mon, 13 Jan 2025 16:59:37 +0530
Subject: [PATCH 06/15] add: dashboard redirection button in photos app

while this is temporary. The baseURL hardcoding will be removed in the near future.

pushing this to keep a track of changes happening
---
 .../photos/src/components/Sidebar/index.tsx   | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx
index 12131fad0f2..b6632e7cd9a 100644
--- a/web/apps/photos/src/components/Sidebar/index.tsx
+++ b/web/apps/photos/src/components/Sidebar/index.tsx
@@ -89,6 +89,7 @@ import exportService from "services/export";
 import { testUpload } from "../../../tests/upload.test";
 import { Preferences } from "./Preferences";
 import { SubscriptionCard } from "./SubscriptionCard";
+import { getToken } from "@ente/shared/storage/localStorage/helpers";
 
 interface Iprops {
     collectionSummaries: CollectionSummaries;
@@ -512,13 +513,26 @@ const UtilitySection: React.FC<UtilitySectionProps> = ({ closeSidebar }) => {
     const redirectToAccountsPage = async () => {
         closeSidebar();
         await openAccountsManagePasskeysPage();
-    };
+  };
+
+  const redirectToDashboard = () => {
+    const token = getToken()
+    console.log(token)
+    if (!token) {
+      console.error("Invalid Token")
+      return;
+    }
 
-    const handleDeduplicate = () => router.push("/duplicates");
+    // To be replaced with the Staff app origin in future.
+    const baseURL = `http://localhost:5173`
+    window.location.href= `${baseURL}/?token=${token}`;
+  }
 
-    const toggleTheme = () =>
-        setThemeColor(
-            themeColor === THEME_COLOR.DARK
+  const handleDeduplicate = () => router.push("/duplicates");
+
+  const toggleTheme = () =>
+    setThemeColor(
+      themeColor === THEME_COLOR.DARK
                 ? THEME_COLOR.LIGHT
                 : THEME_COLOR.DARK,
         );
@@ -581,7 +595,11 @@ const UtilitySection: React.FC<UtilitySectionProps> = ({ closeSidebar }) => {
                 onClick={showPreferences}
                 label={t("preferences")}
             />
-
+            <EnteMenuItem
+                variant="secondary"
+                onClick={redirectToDashboard}
+                label={t("Dashboard")}
+            />
             <RecoveryKey
                 {...recoveryKeyVisibilityProps}
                 {...{ showMiniDialog }}

From 09d2158ca4ae765cb09631136ccca20ce9b7353b Mon Sep 17 00:00:00 2001
From: mngshm <mangeshrex@tutanota.com>
Date: Tue, 14 Jan 2025 16:28:53 +0530
Subject: [PATCH 07/15] add basic functionality for 'update-token' feature

---
 infra/staff/src/App.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/infra/staff/src/App.tsx b/infra/staff/src/App.tsx
index 1b7bc829c69..915e0c37782 100644
--- a/infra/staff/src/App.tsx
+++ b/infra/staff/src/App.tsx
@@ -4,6 +4,7 @@ import CircularProgress from "@mui/material/CircularProgress";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import TextField from "@mui/material/TextField";
+import { Link } from "@mui/material";
 import * as React from "react";
 import { useEffect, useState } from "react";
 import "./App.css";
@@ -72,6 +73,7 @@ const App: React.FC = () => {
 
     useEffect(() => {
         const storedToken = localStorage.getItem("token");
+        console.log(storedToken)
         if (storedToken) {
             setToken(storedToken);
             setLocalToken(storedToken);
@@ -240,9 +242,19 @@ const App: React.FC = () => {
         if (userToken) {
             setLocalToken(userToken);
             setToken(userToken);
+            
+            document.getElementById(":r1:").readOnly = true 
         }
     }, []);
 
+    const updateToken = () => {
+      const editToken = document.getElementById(":r1:");
+      editToken.readOnly = false;
+      
+      // Change focus to Token input form 
+      editToken.focus()
+    };
+
     return (
         <div className="container">
             <div>
@@ -256,7 +268,11 @@ const App: React.FC = () => {
                         >
                             staff.ente.io
                         </a>
-                        <div className="text-fields">
+                    <div className="text-fields"> 
+                        <div style={{
+                          display: "flex",
+                          flexDirection: "column",
+                        }}>
                             <TextField
                                 label="Token"
                                 value={localToken}
@@ -268,6 +284,10 @@ const App: React.FC = () => {
                                 className="text-field-token"
                                 style={{ maxWidth: "parent" }}
                             />
+                            <Link to="/" style={{ textAlign: "left" }} onClick={updateToken}>
+                                Update Token?
+                            </Link>
+                            </div>
                             <TextField
                                 label="Email"
                                 value={localEmail}

From 08278fb169f12af7d2336e6ef043de15cb4951b7 Mon Sep 17 00:00:00 2001
From: mngshm <mangeshrex@tutanota.com>
Date: Tue, 14 Jan 2025 16:30:26 +0530
Subject: [PATCH 08/15] fix: formatting ;-;

---
 infra/staff/src/App.tsx | 60 ++++++++++++++++++++++-------------------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/infra/staff/src/App.tsx b/infra/staff/src/App.tsx
index 915e0c37782..8eb972bb529 100644
--- a/infra/staff/src/App.tsx
+++ b/infra/staff/src/App.tsx
@@ -1,10 +1,10 @@
+import { Link } from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import CircularProgress from "@mui/material/CircularProgress";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import TextField from "@mui/material/TextField";
-import { Link } from "@mui/material";
 import * as React from "react";
 import { useEffect, useState } from "react";
 import "./App.css";
@@ -73,7 +73,7 @@ const App: React.FC = () => {
 
     useEffect(() => {
         const storedToken = localStorage.getItem("token");
-        console.log(storedToken)
+        console.log(storedToken);
         if (storedToken) {
             setToken(storedToken);
             setLocalToken(storedToken);
@@ -242,17 +242,17 @@ const App: React.FC = () => {
         if (userToken) {
             setLocalToken(userToken);
             setToken(userToken);
-            
-            document.getElementById(":r1:").readOnly = true 
+
+            document.getElementById(":r1:").readOnly = true;
         }
     }, []);
 
     const updateToken = () => {
-      const editToken = document.getElementById(":r1:");
-      editToken.readOnly = false;
-      
-      // Change focus to Token input form 
-      editToken.focus()
+        const editToken = document.getElementById(":r1:");
+        editToken.readOnly = false;
+
+        // Change focus to Token input form
+        editToken.focus();
     };
 
     return (
@@ -268,25 +268,31 @@ const App: React.FC = () => {
                         >
                             staff.ente.io
                         </a>
-                    <div className="text-fields"> 
-                        <div style={{
-                          display: "flex",
-                          flexDirection: "column",
-                        }}>
-                            <TextField
-                                label="Token"
-                                value={localToken}
-                                onChange={(e) => {
-                                    setLocalToken(e.target.value);
-                                    setToken(e.target.value);
+                        <div className="text-fields">
+                            <div
+                                style={{
+                                    display: "flex",
+                                    flexDirection: "column",
                                 }}
-                                size="medium"
-                                className="text-field-token"
-                                style={{ maxWidth: "parent" }}
-                            />
-                            <Link to="/" style={{ textAlign: "left" }} onClick={updateToken}>
-                                Update Token?
-                            </Link>
+                            >
+                                <TextField
+                                    label="Token"
+                                    value={localToken}
+                                    onChange={(e) => {
+                                        setLocalToken(e.target.value);
+                                        setToken(e.target.value);
+                                    }}
+                                    size="medium"
+                                    className="text-field-token"
+                                    style={{ maxWidth: "parent" }}
+                                />
+                                <Link
+                                    to="/"
+                                    style={{ textAlign: "left" }}
+                                    onClick={updateToken}
+                                >
+                                    Update Token?
+                                </Link>
                             </div>
                             <TextField
                                 label="Email"

From e81b6acbdd6673ff7bd18590888449f3e7186a39 Mon Sep 17 00:00:00 2001
From: mngshm <mangeshrex@tutanota.com>
Date: Tue, 14 Jan 2025 16:32:21 +0530
Subject: [PATCH 09/15] fix lint?

---
 .../photos/src/components/Sidebar/index.tsx   | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx
index b6632e7cd9a..44f4c985e29 100644
--- a/web/apps/photos/src/components/Sidebar/index.tsx
+++ b/web/apps/photos/src/components/Sidebar/index.tsx
@@ -47,6 +47,7 @@ import {
 } from "@ente/shared/components/Container";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
+import { getToken } from "@ente/shared/storage/localStorage/helpers";
 import { THEME_COLOR } from "@ente/shared/themes/constants";
 import ArchiveOutlinedIcon from "@mui/icons-material/ArchiveOutlined";
 import CategoryIcon from "@mui/icons-material/Category";
@@ -89,7 +90,6 @@ import exportService from "services/export";
 import { testUpload } from "../../../tests/upload.test";
 import { Preferences } from "./Preferences";
 import { SubscriptionCard } from "./SubscriptionCard";
-import { getToken } from "@ente/shared/storage/localStorage/helpers";
 
 interface Iprops {
     collectionSummaries: CollectionSummaries;
@@ -513,26 +513,25 @@ const UtilitySection: React.FC<UtilitySectionProps> = ({ closeSidebar }) => {
     const redirectToAccountsPage = async () => {
         closeSidebar();
         await openAccountsManagePasskeysPage();
-  };
-
-  const redirectToDashboard = () => {
-    const token = getToken()
-    console.log(token)
-    if (!token) {
-      console.error("Invalid Token")
-      return;
-    }
+    };
 
-    // To be replaced with the Staff app origin in future.
-    const baseURL = `http://localhost:5173`
-    window.location.href= `${baseURL}/?token=${token}`;
-  }
+    const redirectToDashboard = () => {
+        const token = getToken();
+        if (!token) {
+            console.error("Invalid Token");
+            return;
+        }
+
+        // To be replaced with the Staff app origin in future.
+        const baseURL = `http://localhost:5173`;
+        window.location.href = `${baseURL}/?token=${token}`;
+    };
 
-  const handleDeduplicate = () => router.push("/duplicates");
+    const handleDeduplicate = () => router.push("/duplicates");
 
-  const toggleTheme = () =>
-    setThemeColor(
-      themeColor === THEME_COLOR.DARK
+    const toggleTheme = () =>
+        setThemeColor(
+            themeColor === THEME_COLOR.DARK
                 ? THEME_COLOR.LIGHT
                 : THEME_COLOR.DARK,
         );

From 1638b7584fbf3e76ff6278a49120f1b75aa0d3c2 Mon Sep 17 00:00:00 2001
From: mngshm <mangeshrex@tutanota.com>
Date: Wed, 15 Jan 2025 12:41:30 +0530
Subject: [PATCH 10/15] reorganize getToken import line

---
 web/apps/photos/src/components/Sidebar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx
index 44f4c985e29..bcc2a9051d5 100644
--- a/web/apps/photos/src/components/Sidebar/index.tsx
+++ b/web/apps/photos/src/components/Sidebar/index.tsx
@@ -47,7 +47,6 @@ import {
 } from "@ente/shared/components/Container";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
-import { getToken } from "@ente/shared/storage/localStorage/helpers";
 import { THEME_COLOR } from "@ente/shared/themes/constants";
 import ArchiveOutlinedIcon from "@mui/icons-material/ArchiveOutlined";
 import CategoryIcon from "@mui/icons-material/Category";
@@ -90,6 +89,7 @@ import exportService from "services/export";
 import { testUpload } from "../../../tests/upload.test";
 import { Preferences } from "./Preferences";
 import { SubscriptionCard } from "./SubscriptionCard";
+import { getToken } from "@ente/shared/storage/localStorage/helpers";
 
 interface Iprops {
     collectionSummaries: CollectionSummaries;

From 7d1670d2101c8e5d030a3bd46d675826570fb1e0 Mon Sep 17 00:00:00 2001
From: mngshm <mangeshrex@tutanota.com>
Date: Wed, 15 Jan 2025 13:33:14 +0530
Subject: [PATCH 11/15] condition for instanceof HTMLInputElement

---
 infra/staff/src/App.tsx                          | 15 +++++++++------
 web/apps/photos/src/components/Sidebar/index.tsx |  2 +-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/infra/staff/src/App.tsx b/infra/staff/src/App.tsx
index 8eb972bb529..8fc95d6c192 100644
--- a/infra/staff/src/App.tsx
+++ b/infra/staff/src/App.tsx
@@ -243,16 +243,20 @@ const App: React.FC = () => {
             setLocalToken(userToken);
             setToken(userToken);
 
-            document.getElementById(":r1:").readOnly = true;
+            const editToken = document.getElementById(":r1:");
+            if (editToken instanceof HTMLInputElement) {
+                editToken.readOnly = true;
+            }
         }
     }, []);
 
     const updateToken = () => {
         const editToken = document.getElementById(":r1:");
-        editToken.readOnly = false;
-
-        // Change focus to Token input form
-        editToken.focus();
+        if (editToken instanceof HTMLInputElement) {
+            editToken.readOnly = false;
+            // Change focus to token field
+            editToken.focus();
+        }
     };
 
     return (
@@ -287,7 +291,6 @@ const App: React.FC = () => {
                                     style={{ maxWidth: "parent" }}
                                 />
                                 <Link
-                                    to="/"
                                     style={{ textAlign: "left" }}
                                     onClick={updateToken}
                                 >
diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx
index bcc2a9051d5..44f4c985e29 100644
--- a/web/apps/photos/src/components/Sidebar/index.tsx
+++ b/web/apps/photos/src/components/Sidebar/index.tsx
@@ -47,6 +47,7 @@ import {
 } from "@ente/shared/components/Container";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
+import { getToken } from "@ente/shared/storage/localStorage/helpers";
 import { THEME_COLOR } from "@ente/shared/themes/constants";
 import ArchiveOutlinedIcon from "@mui/icons-material/ArchiveOutlined";
 import CategoryIcon from "@mui/icons-material/Category";
@@ -89,7 +90,6 @@ import exportService from "services/export";
 import { testUpload } from "../../../tests/upload.test";
 import { Preferences } from "./Preferences";
 import { SubscriptionCard } from "./SubscriptionCard";
-import { getToken } from "@ente/shared/storage/localStorage/helpers";
 
 interface Iprops {
     collectionSummaries: CollectionSummaries;

From c2306ed4e9b383e614ee2d9abc0d3f4c2a645166 Mon Sep 17 00:00:00 2001
From: mngshm <mangeshrex@tutanota.com>
Date: Wed, 15 Jan 2025 12:41:30 +0530
Subject: [PATCH 12/15] reorganize getToken import line

---
 web/apps/photos/src/components/Sidebar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx
index 44f4c985e29..bcc2a9051d5 100644
--- a/web/apps/photos/src/components/Sidebar/index.tsx
+++ b/web/apps/photos/src/components/Sidebar/index.tsx
@@ -47,7 +47,6 @@ import {
 } from "@ente/shared/components/Container";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
-import { getToken } from "@ente/shared/storage/localStorage/helpers";
 import { THEME_COLOR } from "@ente/shared/themes/constants";
 import ArchiveOutlinedIcon from "@mui/icons-material/ArchiveOutlined";
 import CategoryIcon from "@mui/icons-material/Category";
@@ -90,6 +89,7 @@ import exportService from "services/export";
 import { testUpload } from "../../../tests/upload.test";
 import { Preferences } from "./Preferences";
 import { SubscriptionCard } from "./SubscriptionCard";
+import { getToken } from "@ente/shared/storage/localStorage/helpers";
 
 interface Iprops {
     collectionSummaries: CollectionSummaries;

From 629cbe6887a05478f8089e43ef1aeeea1d97517a Mon Sep 17 00:00:00 2001
From: mngshm <mangeshrex@tutanota.com>
Date: Wed, 15 Jan 2025 12:41:30 +0530
Subject: [PATCH 13/15] fix lint issue specifically for Sidebar/index.ts

---
 web/apps/photos/src/components/Sidebar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx
index bcc2a9051d5..44f4c985e29 100644
--- a/web/apps/photos/src/components/Sidebar/index.tsx
+++ b/web/apps/photos/src/components/Sidebar/index.tsx
@@ -47,6 +47,7 @@ import {
 } from "@ente/shared/components/Container";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
+import { getToken } from "@ente/shared/storage/localStorage/helpers";
 import { THEME_COLOR } from "@ente/shared/themes/constants";
 import ArchiveOutlinedIcon from "@mui/icons-material/ArchiveOutlined";
 import CategoryIcon from "@mui/icons-material/Category";
@@ -89,7 +90,6 @@ import exportService from "services/export";
 import { testUpload } from "../../../tests/upload.test";
 import { Preferences } from "./Preferences";
 import { SubscriptionCard } from "./SubscriptionCard";
-import { getToken } from "@ente/shared/storage/localStorage/helpers";
 
 interface Iprops {
     collectionSummaries: CollectionSummaries;

From 1713be30b722553fc09bc52aafc4da7b53580547 Mon Sep 17 00:00:00 2001
From: mngshm <mangeshrex@tutanota.com>
Date: Wed, 15 Jan 2025 15:20:41 +0530
Subject: [PATCH 14/15] reset Sidebar/index.ts

---
 .../photos/src/components/Sidebar/index.tsx   | 19 +------------------
 1 file changed, 1 insertion(+), 18 deletions(-)

diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx
index 44f4c985e29..12131fad0f2 100644
--- a/web/apps/photos/src/components/Sidebar/index.tsx
+++ b/web/apps/photos/src/components/Sidebar/index.tsx
@@ -47,7 +47,6 @@ import {
 } from "@ente/shared/components/Container";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
-import { getToken } from "@ente/shared/storage/localStorage/helpers";
 import { THEME_COLOR } from "@ente/shared/themes/constants";
 import ArchiveOutlinedIcon from "@mui/icons-material/ArchiveOutlined";
 import CategoryIcon from "@mui/icons-material/Category";
@@ -515,18 +514,6 @@ const UtilitySection: React.FC<UtilitySectionProps> = ({ closeSidebar }) => {
         await openAccountsManagePasskeysPage();
     };
 
-    const redirectToDashboard = () => {
-        const token = getToken();
-        if (!token) {
-            console.error("Invalid Token");
-            return;
-        }
-
-        // To be replaced with the Staff app origin in future.
-        const baseURL = `http://localhost:5173`;
-        window.location.href = `${baseURL}/?token=${token}`;
-    };
-
     const handleDeduplicate = () => router.push("/duplicates");
 
     const toggleTheme = () =>
@@ -594,11 +581,7 @@ const UtilitySection: React.FC<UtilitySectionProps> = ({ closeSidebar }) => {
                 onClick={showPreferences}
                 label={t("preferences")}
             />
-            <EnteMenuItem
-                variant="secondary"
-                onClick={redirectToDashboard}
-                label={t("Dashboard")}
-            />
+
             <RecoveryKey
                 {...recoveryKeyVisibilityProps}
                 {...{ showMiniDialog }}

From 2c6022186c54bbad10737b0a7772644d17ddb1dc Mon Sep 17 00:00:00 2001
From: mngshm <mangeshrex@tutanota.com>
Date: Wed, 15 Jan 2025 15:22:52 +0530
Subject: [PATCH 15/15] remove token print

---
 infra/staff/src/App.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/infra/staff/src/App.tsx b/infra/staff/src/App.tsx
index 8fc95d6c192..00a3c448fdc 100644
--- a/infra/staff/src/App.tsx
+++ b/infra/staff/src/App.tsx
@@ -73,7 +73,6 @@ const App: React.FC = () => {
 
     useEffect(() => {
         const storedToken = localStorage.getItem("token");
-        console.log(storedToken);
         if (storedToken) {
             setToken(storedToken);
             setLocalToken(storedToken);