file upload

3 files changed, 35 insertions, 14 deletions

diff --git a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx
index c301b287a..3b3b441ed 100644
--- a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx
@@ -1,3 +1,4 @@
+import { AuthenticationProviderStatusOk } from "anastasis-core";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { useAnastasisContext } from "../../context/anastasis";
@@ -22,6 +23,7 @@ export function ReviewPoliciesScreen(): VNode {
     reducer.currentReducerState.authentication_methods ?? [];
   const policies = reducer.currentReducerState.policies ?? [];
 
+  const providers = reducer.currentReducerState.authentication_providers ?? {}
   
   if (editingPolicy !== undefined) {
     return (
@@ -96,6 +98,7 @@ export function ReviewPoliciesScreen(): VNode {
               </h3>
               {!methods.length && <p>No auth method found</p>}
               {methods.map((m, i) => {
+                const p = providers[m.provider] as AuthenticationProviderStatusOk
                 return (
                   <p
                     key={i}
@@ -107,7 +110,7 @@ export function ReviewPoliciesScreen(): VNode {
                     </span>
                     <span>
                       {m.instructions} recovery provided by{" "}
-                      <a href={m.provider}>{m.provider}</a>
+                      <a href={m.provider} target="_blank" rel="noreferrer" >{p.business_name}</a>
                     </span>
                   </p>
                 );
diff --git a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx
index 59af8a9ee..226e43ddf 100644
--- a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx
@@ -5,11 +5,16 @@ import { useState } from "preact/hooks";
 import { useAnastasisContext } from "../../context/anastasis";
 import { AnastasisClientFrame } from "./index";
 import { TextInput } from "../../components/fields/TextInput";
-import { FileInput } from "../../components/fields/FileInput";
+import { FileInput, FileTypeContent } from "../../components/fields/FileInput";
 
 export function SecretEditorScreen(): VNode {
   const reducer = useAnastasisContext();
   const [secretValue, setSecretValue] = useState("");
+  const [secretFile, _setSecretFile] = useState<FileTypeContent | undefined>(undefined);
+  function setSecretFile(v) {
+    setSecretValue("") // reset secret value when uploading a file
+    _setSecretFile(v)
+  }
 
   const currentSecretName =
     reducer?.currentReducerState &&
@@ -29,15 +34,20 @@ export function SecretEditorScreen(): VNode {
   }
 
   const secretNext = async (): Promise<void> => {
+    const secret = secretFile ? {
+      value: encodeCrock(stringToBytes(secretValue)),
+      filename: secretFile.name,
+      mime: secretFile.type,
+    } : {
+      value: encodeCrock(stringToBytes(secretValue)),
+      mime: "text/plain",
+    }
     return reducer.runTransaction(async (tx) => {
       await tx.transition("enter_secret_name", {
         name: secretName,
       });
       await tx.transition("enter_secret", {
-        secret: {
-          value: encodeCrock(stringToBytes(secretValue)),
-          mime: "text/plain",
-        },
+        secret,
         expiration: {
           t_ms: new Date().getTime() + 1000 * 60 * 60 * 24 * 365 * 5,
         },
@@ -45,12 +55,16 @@ export function SecretEditorScreen(): VNode {
       await tx.transition("next", {});
     });
   };
+  const errors = !secretName ? 'Add a secret name' : (
+    (!secretValue && !secretFile) ? 'Add a secret value or a choose a file to upload' : undefined
+  )
   return (
     <AnastasisClientFrame
+      hideNext={errors}
       title="Backup: Provide secret to backup"
       onNext={() => secretNext()}
     >
-      <div>
+      <div class="block">
         <TextInput
           label="Secret name:"
           tooltip="The secret name allows you to identify your secret when restoring it. It is a label that you can choose freely."
@@ -58,16 +72,20 @@ export function SecretEditorScreen(): VNode {
           bind={[secretName, setSecretName]}
         />
       </div>
-      <div>
+      <div class="block">
         <TextInput
+          disabled={!!secretFile}
           label="Enter the secret as text:"
           bind={[secretValue, setSecretValue]}
         />
-        {/* <div style={{ display: "flex" }}>
-          or&nbsp;
-          <FileInput label="click here" bind={[secretValue, setSecretValue]} />
-          &nbsp;to import a file
-        </div> */}
+      </div>
+      <div class="block">
+        Or upload a secret file
+        <FileInput label="Choose file" onChange={setSecretFile} />
+        {secretFile && <div>
+          Uploading secret file <b>{secretFile.name}</b> <a onClick={() => setSecretFile(undefined)}>cancel</a>
+        </div>
+        }
       </div>
     </AnastasisClientFrame>
   );
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSetup.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSetup.tsx
index 0a14021dd..03725621c 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSetup.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSetup.tsx
@@ -30,7 +30,7 @@ export function AuthMethodQuestionSetup({
     <AnastasisClientFrame hideNav title="Add Security Question">
       <div>
         <p>
-          For2 security question authentication, you need to provide a question
+          For security question authentication, you need to provide a question
           and its answer. When recovering your secret, you will be shown the
           question and you will need to type the answer exactly as you typed it
           here.