Add TOTP field support and restructured ItemFieldValues components

packages/opvault.js/src/types.ts

@@ -119,7 +119,7 @@ export namespace ItemSection {
   }
   export type Concealed = {
     k: "concealed"
-    n: "password"
+    n: "password" | `TOTP_${string}`
     v: string
     a?: {
       generate: "off"

packages/web/src/about/LicenseViewer.tsx

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled"
 import { useEffect, useMemo, useState } from "react"
-import { ClickableContainer } from "../components/ItemFieldValue"
+import { Container as ClickableContainer } from "../components/ItemFieldValue/Container"
 import { scrollbar } from "../styles"
 
 const Container = styled.div`

packages/web/src/components/FilteredVaultView.tsx

@@ -158,16 +158,22 @@ export const FilteredVaultView: React.FC<{ items: Item[] }> = ({ items }) => {
             onChange={e => setCategory((e.currentTarget.value as Category) || undefined)}
           >
             {categoryMap.map(([value, name]) => (
-              <option value={value || ""} key={value}>
+              <option value={value || ""} key={name}>
                 {name}
               </option>
             ))}
           </CategorySelect>
 
           <SortSelect value={sortBy} onChange={e => setSortBy(+e.currentTarget.value)}>
-            <option value={SortBy.Name}>{t.options.sort_by_name}</option>
-            <option value={SortBy.CreatedAt}>{t.options.sort_by_created_at}</option>
-            <option value={SortBy.UpdatedAt}>{t.options.sort_by_updated_at}</option>
+            <option key={1} value={SortBy.Name}>
+              {t.options.sort_by_name}
+            </option>
+            <option key={2} value={SortBy.CreatedAt}>
+              {t.options.sort_by_created_at}
+            </option>
+            <option key={3} value={SortBy.UpdatedAt}>
+              {t.options.sort_by_updated_at}
+            </option>
           </SortSelect>
         </SortContainer>
         <ItemList items={filtered} onSelect={setItem} selected={item} />

packages/web/src/components/Item.tsx

@@ -12,7 +12,7 @@ import {
   FieldTitle,
   ItemDetailsFieldView,
 } from "./ItemField"
-import { PasswordFieldView } from "./ItemFieldValue"
+import { Password } from "./ItemFieldValue/Password"
 import { ItemWarning } from "./ItemWarning"
 
 interface ItemViewProps {
@@ -146,7 +146,7 @@ export const ItemView = memo<ItemViewProps>(({ className, item }) => {
         {item.details.password != null && (
           <ExtraField>
             <FieldTitle>{t.label.password}</FieldTitle>
-            <PasswordFieldView field={{ v: item.details.password }} />
+            <Password field={{ v: item.details.password }} />
           </ExtraField>
         )}
 

packages/web/src/components/ItemField.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react"
+import { memo, useMemo } from "react"
 import styled from "@emotion/styled"
 import type { ItemField, ItemSection } from "opvault.js"
 import { ErrorBoundary } from "./ErrorBoundary"
@@ -18,6 +18,11 @@ export const FieldTitle: React.FC = styled.div`
 export const ItemFieldView = memo<{
   field: ItemSection.Any
 }>(({ field }) => {
+  const title = useMemo(
+    () => ((field as ItemSection.Concealed).n?.startsWith("TOTP_") ? "TOTP" : field.t),
+    [field]
+  )
+
   if (field.v == null) {
     return null
   }
@@ -25,7 +30,7 @@ export const ItemFieldView = memo<{
   return (
     <ErrorBoundary>
       <Container>
-        <FieldTitle>{field.t}</FieldTitle>
+        <FieldTitle>{title}</FieldTitle>
         <ItemFieldValue field={field} />
       </Container>
     </ErrorBoundary>

packages/web/src/components/ItemFieldValue.tsx

@@ -1,152 +0,0 @@
-import styled from "@emotion/styled"
-import type { ItemSection, ItemField } from "opvault.js"
-import { FieldType } from "opvault.js"
-import { useCallback, useMemo, useState } from "react"
-import { useTranslate } from "../i18n"
-import { parseMonthYear } from "../utils"
-import { BigTextView } from "./BigTextView"
-import { ErrorBoundary } from "./ErrorBoundary"
-import { useItemFieldContextMenu } from "./ItemFieldContextMenu"
-import { toast, ToastType } from "./Toast"
-
-const Container = styled.div`
-  cursor: pointer;
-  &:hover {
-    color: #6fa9ff;
-    text-decoration: underline;
-  }
-`
-
-export { Container as ClickableContainer }
-
-function useCopy(text: string) {
-  const t = useTranslate()
-  return useCallback(() => {
-    navigator.clipboard.writeText(text)
-    toast({
-      type: ToastType.Secondary,
-      message: t.tips.copied_to_clipboard,
-    })
-  }, [text, t])
-}
-
-export { Password as PasswordFieldView }
-
-const Password: React.FC<{
-  field: Pick<ItemSection.Concealed, "v">
-}> = ({ field }) => {
-  const t = useTranslate()
-  const [show, setShow] = useState(false)
-  const [bigText, showBigText] = useState(false)
-
-  const { onRightClick, ContextMenuContainer, Item } = useItemFieldContextMenu()
-  const onToggle = useCallback(() => setShow(x => !x), [])
-  const onCopy = useCopy(field.v)
-  const onOpenBigText = useCallback(() => {
-    showBigText(true)
-  }, [])
-  const onCloseBigText = useCallback(() => {
-    showBigText(false)
-  }, [])
-
-  return (
-    <>
-      <Container
-        onContextMenu={onRightClick}
-        onDoubleClick={() => setShow(x => !x)}
-        onClick={onCopy}
-        style={{
-          fontFamily: "var(--monospace)",
-          ...(!show && { userSelect: "none" }),
-        }}
-      >
-        {show ? field.v : "·".repeat(10)}
-      </Container>
-      {bigText && <BigTextView onClose={onCloseBigText}>{field.v}</BigTextView>}
-      <ContextMenuContainer>
-        <Item onClick={onCopy}>{t.action.copy}</Item>
-        <Item onClick={onToggle}>{show ? t.action.hide : t.action.show}</Item>
-        {!bigText && (
-          <Item onClick={onOpenBigText}>{t.action.show_in_big_characters}</Item>
-        )}
-      </ContextMenuContainer>
-    </>
-  )
-}
-
-const MonthYear: React.FC<{ field: ItemSection.MonthYear }> = ({ field }) => {
-  const { year, month } = parseMonthYear(field.v)
-  return (
-    <Container>
-      {month.toString().padStart(2, "0")}/{year.toString().padStart(4, "0")}
-    </Container>
-  )
-}
-
-const DateView: React.FC<{ field: ItemSection.Date }> = ({ field }) => {
-  const date = useMemo(() => new Date(field.v * 1000), [field.v])
-  return <Container>{date.toLocaleDateString()}</Container>
-}
-
-const TextView: React.FC<{ value: string }> = ({ value }) => {
-  const { onRightClick, ContextMenuContainer, Item } = useItemFieldContextMenu()
-  const onCopy = useCopy(value)
-
-  return (
-    <>
-      <Container onContextMenu={onRightClick} onClick={onCopy}>
-        {value}
-      </Container>
-      <ContextMenuContainer>
-        <Item onClick={onCopy}>Copier</Item>
-      </ContextMenuContainer>
-    </>
-  )
-}
-
-export const ItemFieldValue: React.FC<{
-  field: ItemSection.Any
-}> = ({ field }) => {
-  if (field.v == null) {
-    return null
-  }
-
-  switch (field.k) {
-    case "concealed":
-      return <Password field={field} />
-    case "monthYear":
-      return <MonthYear field={field} />
-    case "date":
-      return <DateView field={field} />
-    case "address":
-      return (
-        <Container style={{ whiteSpace: "pre" }}>
-          <div>{field.v.street}</div>
-          <div>
-            {field.v.city}, {field.v.state} ({field.v.zip})
-          </div>
-          <div>{field.v.country}</div>
-        </Container>
-      )
-  }
-
-  return (
-    <ErrorBoundary>
-      <TextView value={field.v} />
-    </ErrorBoundary>
-  )
-}
-
-export const ItemDetailsFieldValue: React.FC<{
-  field: ItemField
-}> = ({ field }) => {
-  if (field.type === FieldType.Password || field.designation === "password") {
-    return <Password field={{ v: field.value } as any} />
-  }
-
-  return (
-    <ErrorBoundary>
-      <TextView value={field.value!} />
-    </ErrorBoundary>
-  )
-}

packages/web/src/components/ItemFieldValue/Address.tsx

@@ -0,0 +1,12 @@
+import type { ItemSection } from "opvault.js"
+import { Container } from "./Container"
+
+export const Address: React.FC<{ field: ItemSection.Address }> = ({ field }) => (
+  <Container style={{ whiteSpace: "pre" }}>
+    <div>{field.v.street}</div>
+    <div>
+      {field.v.city}, {field.v.state} ({field.v.zip})
+    </div>
+    <div>{field.v.country}</div>
+  </Container>
+)

packages/web/src/components/ItemFieldValue/Container.ts

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled"
+
+export const Container = styled.div`
+  cursor: pointer;
+  &:hover {
+    color: #6fa9ff;
+    text-decoration: underline;
+  }
+`

packages/web/src/components/ItemFieldValue/DateView.tsx

@@ -0,0 +1,8 @@
+import type { ItemSection } from "opvault.js"
+import { useMemo } from "react"
+import { Container } from "./Container"
+
+export const DateView: React.FC<{ field: ItemSection.Date }> = ({ field }) => {
+  const date = useMemo(() => new Date(field.v * 1000), [field.v])
+  return <Container>{date.toLocaleDateString()}</Container>
+}

packages/web/src/components/ItemFieldValue/MonthYear.tsx

@@ -0,0 +1,12 @@
+import type { ItemSection } from "opvault.js"
+import { parseMonthYear } from "../../utils"
+import { Container } from "./Container"
+
+export const MonthYear: React.FC<{ field: ItemSection.MonthYear }> = ({ field }) => {
+  const { year, month } = parseMonthYear(field.v)
+  return (
+    <Container>
+      {month.toString().padStart(2, "0")}/{year.toString().padStart(4, "0")}
+    </Container>
+  )
+}

packages/web/src/components/ItemFieldValue/OTP.tsx

@@ -0,0 +1,64 @@
+import styled from "@emotion/styled"
+import type { ItemSection } from "opvault.js"
+import { useCallback, useState } from "react"
+import { useTranslate } from "../../i18n"
+import { useItemFieldContextMenu } from "../ItemFieldContextMenu"
+import { Container } from "./Container"
+import { useCopy } from "./hooks"
+
+const OTPItemContainer = styled(Container)`
+  margin: 5px 0;
+`
+
+const OTPItem = ({ children }: { children: string }) => {
+  const { onRightClick } = useItemFieldContextMenu()
+  const onCopy = useCopy(children)
+
+  return (
+    <OTPItemContainer onContextMenu={onRightClick} onClick={onCopy} style={{}}>
+      {children}
+    </OTPItemContainer>
+  )
+}
+
+const ItemCount = styled(Container)`
+  opacity: 0.5;
+  user-select: none;
+`
+
+export const OTP: React.FC<{
+  field: Pick<ItemSection.Concealed, "v">
+}> = ({ field }) => {
+  const t = useTranslate()
+  const [show, setShow] = useState(false)
+
+  const { onRightClick, ContextMenuContainer, Item } = useItemFieldContextMenu()
+  const onToggle = useCallback(() => setShow(x => !x), [])
+  const fields = field.v.split(" ")
+
+  return (
+    <>
+      {show ? (
+        <div
+          onContextMenu={onRightClick}
+          onDoubleClick={() => setShow(x => !x)}
+          style={{
+            fontFamily: "var(--monospace)",
+            paddingTop: 5,
+          }}
+        >
+          {fields.map((item, i) => (
+            <OTPItem key={i}>{item}</OTPItem>
+          ))}
+        </div>
+      ) : (
+        <ItemCount onContextMenu={onRightClick} onClick={onToggle}>
+          {fields.length} {fields.length === 1 ? t.noun.item : t.noun.items}
+        </ItemCount>
+      )}
+      <ContextMenuContainer>
+        <Item onClick={onToggle}>{show ? t.action.hide : t.action.show}</Item>
+      </ContextMenuContainer>
+    </>
+  )
+}

packages/web/src/components/ItemFieldValue/Password.tsx

@@ -0,0 +1,49 @@
+import type { ItemSection } from "opvault.js"
+import { useCallback, useState } from "react"
+import { useTranslate } from "../../i18n"
+import { BigTextView } from "../BigTextView"
+import { useItemFieldContextMenu } from "../ItemFieldContextMenu"
+import { Container } from "./Container"
+import { useCopy } from "./hooks"
+
+export const Password: React.FC<{
+  field: Pick<ItemSection.Concealed, "v">
+}> = ({ field }) => {
+  const t = useTranslate()
+  const [show, setShow] = useState(false)
+  const [bigText, showBigText] = useState(false)
+
+  const { onRightClick, ContextMenuContainer, Item } = useItemFieldContextMenu()
+  const onToggle = useCallback(() => setShow(x => !x), [])
+  const onCopy = useCopy(field.v)
+  const onOpenBigText = useCallback(() => {
+    showBigText(true)
+  }, [])
+  const onCloseBigText = useCallback(() => {
+    showBigText(false)
+  }, [])
+
+  return (
+    <>
+      <Container
+        onContextMenu={onRightClick}
+        onDoubleClick={() => setShow(x => !x)}
+        onClick={onCopy}
+        style={{
+          fontFamily: "var(--monospace)",
+          ...(!show && { userSelect: "none" }),
+        }}
+      >
+        {show ? field.v : "·".repeat(10)}
+      </Container>
+      {bigText && <BigTextView onClose={onCloseBigText}>{field.v}</BigTextView>}
+      <ContextMenuContainer>
+        <Item onClick={onCopy}>{t.action.copy}</Item>
+        <Item onClick={onToggle}>{show ? t.action.hide : t.action.show}</Item>
+        {!bigText && (
+          <Item onClick={onOpenBigText}>{t.action.show_in_big_characters}</Item>
+        )}
+      </ContextMenuContainer>
+    </>
+  )
+}

packages/web/src/components/ItemFieldValue/Text.tsx

@@ -0,0 +1,19 @@
+import { useItemFieldContextMenu } from "../ItemFieldContextMenu"
+import { Container } from "./Container"
+import { useCopy } from "./hooks"
+
+export const TextView: React.FC<{ value: string }> = ({ value }) => {
+  const { onRightClick, ContextMenuContainer, Item } = useItemFieldContextMenu()
+  const onCopy = useCopy(value)
+
+  return (
+    <>
+      <Container onContextMenu={onRightClick} onClick={onCopy}>
+        {value}
+      </Container>
+      <ContextMenuContainer>
+        <Item onClick={onCopy}>Copier</Item>
+      </ContextMenuContainer>
+    </>
+  )
+}

packages/web/src/components/ItemFieldValue/hooks.ts

@@ -0,0 +1,14 @@
+import { useCallback } from "react"
+import { useTranslate } from "../../i18n"
+import { toast, ToastType } from "../Toast"
+
+export function useCopy(text: string) {
+  const t = useTranslate()
+  return useCallback(() => {
+    navigator.clipboard.writeText(text)
+    toast({
+      type: ToastType.Secondary,
+      message: t.tips.copied_to_clipboard,
+    })
+  }, [text, t])
+}

packages/web/src/components/ItemFieldValue/index.tsx

@@ -0,0 +1,52 @@
+import type { ItemSection, ItemField } from "opvault.js"
+import { FieldType } from "opvault.js"
+import { ErrorBoundary } from "../ErrorBoundary"
+import { Password } from "./Password"
+import { OTP } from "./OTP"
+import { MonthYear } from "./MonthYear"
+import { DateView } from "./DateView"
+import { TextView } from "./Text"
+import { Address } from "./Address"
+
+export const ItemFieldValue: React.FC<{
+  field: ItemSection.Any
+}> = ({ field }) => {
+  if (field.v == null) {
+    return null
+  }
+
+  switch (field.k) {
+    case "concealed":
+      return field.n.startsWith("TOTP_") ? (
+        <OTP field={field} />
+      ) : (
+        <Password field={field} />
+      )
+    case "monthYear":
+      return <MonthYear field={field} />
+    case "date":
+      return <DateView field={field} />
+    case "address":
+      return <Address field={field} />
+  }
+
+  return (
+    <ErrorBoundary>
+      <TextView value={field.v} />
+    </ErrorBoundary>
+  )
+}
+
+export const ItemDetailsFieldValue: React.FC<{
+  field: ItemField
+}> = ({ field }) => {
+  if (field.type === FieldType.Password || field.designation === "password") {
+    return <Password field={{ v: field.value } as any} />
+  }
+
+  return (
+    <ErrorBoundary>
+      <TextView value={field.value!} />
+    </ErrorBoundary>
+  )
+}

packages/web/src/i18n/texts.yml

@@ -192,6 +192,16 @@ noun:
     fr: secondes
     ja: 秒
 
+  item:
+    en: item
+    fr: élément
+    ja: アイテム
+
+  items:
+    en: items
+    fr: éléments
+    ja: アイテム
+
 action:
   lock:
     en: Lock

packages/web/src/settings/index.tsx

@@ -75,6 +75,7 @@ export const Settings: React.FC<{
             value={autolockAfter}
             onChange={e => setAutolockAfter(e.target.valueAsNumber)}
             disabled={!enableAutoLock}
+            min={5}
           />
           <GhostLabel>
             <span style={{ opacity: 0 }}>{autolockAfter} </span>