more styling

added placeholders for inputs
import declaration for png
next button now has tooltip providing info about whats missing
a lot more of examples for UI testing
added qr dependency for totp rendering
added email and field input types
added all auth method setup screens
added modal when there is not auth provider
merge continent and country into location section
others improvements as well...

1 files changed, 95 insertions, 7 deletions

diff --git a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx
index 94c0409da..713655625 100644
--- a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx
@@ -1,20 +1,108 @@
+/* eslint-disable @typescript-eslint/camelcase */
+import { BackupStates, ContinentInfo, RecoveryStates } from "anastasis-core";
 import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
 import { useAnastasisContext } from "../../context/anastasis";
 import { AnastasisClientFrame, withProcessLabel } from "./index";
 
 export function ContinentSelectionScreen(): VNode {
   const reducer = useAnastasisContext()
+
+  //FIXME: remove this when #7056 is fixed
+  const [countryCode, setCountryCode] = useState("")
+
   if (!reducer || !reducer.currentReducerState || !("continents" in reducer.currentReducerState)) {
     return <div />
   }
-  const select = (continent: string) => (): void => reducer.transition("select_continent", { continent });
+  const selectContinent = (continent: string): void => {
+    reducer.transition("select_continent", { continent })
+  };
+  const selectCountry = (country: string): void => {
+    setCountryCode(country)
+  };
+  
+  
+  const continentList = reducer.currentReducerState.continents || [];
+  const countryList = reducer.currentReducerState.countries || [];
+  const theContinent = reducer.currentReducerState.selected_continent || ""
+  // const cc = reducer.currentReducerState.selected_country || "";
+  const theCountry = countryList.find(c => c.code === countryCode)
+  const selectCountryAction = () => {
+    //selection should be when the select box changes it value
+    if (!theCountry) return;
+    reducer.transition("select_country", {
+      country_code: countryCode,
+      currencies: [theCountry.currency],
+    })
+  }
+
+  const step1 = reducer.currentReducerState.backup_state === BackupStates.ContinentSelecting ||
+    reducer.currentReducerState.recovery_state === RecoveryStates.ContinentSelecting;
+
+  const errors = !theCountry ? "Select a country" : undefined 
+
   return (
-    <AnastasisClientFrame hideNext title={withProcessLabel(reducer, "Select Continent")}>
-      {reducer.currentReducerState.continents.map((x: any) => (
-        <button class="button" onClick={select(x.name)} key={x.name}>
-          {x.name}
-        </button>
-      ))}
+    <AnastasisClientFrame hideNext={errors} title={withProcessLabel(reducer, "Select location")} onNext={selectCountryAction}>
+      <div class="columns">
+        <div class="column is-half">
+          <div class="field">
+            <label class="label">Continent</label>
+            <div class="control has-icons-left">
+              <div class="select " >
+                <select onChange={(e) => selectContinent(e.currentTarget.value)} value={theContinent} disabled={!step1}>
+                  <option key="none" disabled selected value=""> Choose a continent </option>
+                  {continentList.map(prov => (
+                    <option key={prov.name} value={prov.name}>
+                      {prov.name}
+                    </option>
+                  ))}
+                </select>
+                <div class="icon is-small is-left">
+                  <i class="mdi mdi-earth" />
+                </div>
+              </div>
+              {!step1 && <span class="control">
+                <a class="button is-danger" onClick={() => reducer.back()}>
+                  X
+                </a>
+              </span>}
+            </div>
+          </div>
+
+          <div class="field">
+            <label class="label">Country</label>
+            <div class="control has-icons-left">
+              <div class="select" >
+                <select onChange={(e) => selectCountry((e.target as any).value)} disabled={!theContinent} value={theCountry?.code || ""}>
+                  <option key="none" disabled selected value=""> Choose a country </option>
+                  {countryList.map(prov => (
+                    <option key={prov.name} value={prov.code}>
+                      {prov.name}
+                    </option>
+                  ))}
+                </select>
+                <div class="icon is-small is-left">
+                  <i class="mdi mdi-earth" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {theCountry && <div class="field">
+            <label class="label">Available currencies:</label>
+            <div class="control">
+              <input class="input is-small" type="text" readonly value={theCountry.currency} />
+            </div>
+          </div>}
+        </div>
+        <div class="column is-half">
+          <p>
+            A location will help to define a common information that will be use to locate your secret and a currency
+            for payments if needed.
+          </p>
+        </div>
+      </div>
+
     </AnastasisClientFrame>
   );
 }