add search bar to totp list

src/translations/en.js

@@ -189,11 +189,9 @@ module.exports = {
   kv_view_none_here_text: "You seem to have no secrets here, would you like to create one?",
   kv_view_search_input_text: "Search",
 
-  // TOTP View Page
+  // TOTP List Page
-  totp_view_title: "TOTP",
+  totp_list_empty: "You seem to have no TOTP codes here, would you like to create one?",
-  totp_view_loading: "Loading TOTP Codes..",
+  totp_list_search_input_text: "Search",
-  totp_view_empty: "You seem to have no TOTP codes here, would you like to create one?",
-  totp_view_loading_box: "Loading..",
 
   // New TOTP Key Page
   totp_new_title: "New TOTP Key",

src/translations/ru.js

@@ -163,11 +163,9 @@ module.exports = {
   kv_view_none_here_text: "У вас на данный момент нет тайных данных. Хотите ли вы их создать?",
   kv_view_search_input_text: "Поиск",
 
-  // TOTP View Page
+  // TOTP New Page
-  totp_view_title: "TOTP",
+  totp_list_empty: "У вас на данный момент нет кодов TOTP. Хотите ли вы их создать?",
-  totp_view_loading: "Загрузка кодов TOTP..",
+  totp_list_search_input_text: "Поиск",
-  totp_view_empty: "У вас на данный момент нет кодов TOTP. Хотите ли вы их создать?",
-  totp_view_loading_box: "Загрузка..",
 
   // New TOTP Key Page
   totp_new_title: "Новый ключ TOTP",

src/ui/pages/Secrets/TOTP/TOTPList.tsx

@@ -1,6 +1,6 @@
 import { Button } from "../../../elements/Button";
 import { CapabilitiesType } from "../../../../api/types/capabilities";
-import { Component, JSX } from "preact";
+import { Component, createRef, JSX } from "preact";
 import { CopyableInputBox } from "../../../elements/CopyableInputBox";
 import { DefaultPageProps } from "../../../../types/DefaultPageProps";
 import { Grid, GridSizes } from "../../../elements/Grid";
@@ -14,7 +14,9 @@ import {
 } from "../../pageLinks";
 import { removeDoubleSlash } from "../../../../utils";
 import { sendErrorNotification } from "../../../elements/ErrorMessage";
-import i18next from "i18next";
+import i18next, { t } from "i18next";
+import { Margin } from "../../../elements/Margin";
+import { TextInput } from "../../../elements/forms/TextInput";
 
 type TOTPGridItemProps = DefaultPageProps & {
   baseMount: string;
@@ -72,6 +74,70 @@ type TOTPItem = {
   canDelete: boolean;
 };
 
+type TOTPListViewProps = DefaultPageProps & {
+  totpItems: TOTPItem[];
+}
+
+type TOTPListViewState = {
+  searchQuery: string;
+}
+
+export class TOTPListView extends Component<TOTPListViewProps, TOTPListViewState> {
+  constructor() {
+    super();
+    this.state = {
+      searchQuery: ""
+    };
+  }
+
+  searchBarRef = createRef<HTMLInputElement>();
+
+  componentDidMount(): void {
+    this.setState({
+      searchQuery: ""
+    });
+  }
+
+  render() {
+    if (this.props.totpItems.length == 0) {
+      return <p>{i18next.t("totp_list_empty")}</p>
+    }
+
+    return (
+      <>
+        <Margin>
+          <TextInput
+            inputRef={this.searchBarRef}
+            name="path"
+            placeholder={i18next.t("totp_list_search_input_text")}
+            onInput={async () => {
+              this.setState({
+                searchQuery: this.searchBarRef.current.value,
+              });
+            }}
+          />
+        </Margin>
+
+        {this.props.totpItems.map((totpItem) => {
+          if (this.state.searchQuery.length > 0) {
+            if (!totpItem.totpKey.includes(this.state.searchQuery)) {
+              return;
+            }
+          }
+          return (
+            <RefreshingTOTPGridItem
+              {...this.props}
+              baseMount={this.props.matches["baseMount"]}
+              {...totpItem}
+            />
+          );
+        })}
+      </>
+    )
+  }
+}
+
+
 type TOTPListState = {
   capabilities?: CapabilitiesType;
   totpItems: TOTPItem[];
@@ -80,11 +146,9 @@ type TOTPListState = {
 export class TOTPList extends Component<DefaultPageProps, TOTPListState> {
   constructor() {
     super();
-    this.refresher = undefined;
     this.state = { capabilities: null, totpItems: [] };
   }
 
-  refresher: number;
 
   async doApiFetches() {
     const api = this.props.api;
@@ -167,18 +231,8 @@ export class TOTPList extends Component<DefaultPageProps, TOTPListState> {
               />
             )}
           </p>
-          <div id="totpList">
+          <div>
-            {(() => {
+            <TOTPListView {...this.props} totpItems={this.state.totpItems} />
-              if (this.state.totpItems.length == 0) {
-                return <p>{i18next.t("totp_view_empty")}</p>;
-              } else {
-                return this.state.totpItems.map((totpItem) => {
-                  return (
-                    <RefreshingTOTPGridItem {...this.props} baseMount={baseMount} {...totpItem} />
-                  );
-                });
-              }
-            })()}
           </div>
         </div>
       </>