From 88d142d2098ad87613222e9a0c6df478a78f6528 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 1 Nov 2021 16:10:49 -0300
Subject: 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...
---
 .../src/components/fields/EmailInput.tsx           | 44 ++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 packages/anastasis-webui/src/components/fields/EmailInput.tsx

(limited to 'packages/anastasis-webui/src/components/fields/EmailInput.tsx')

diff --git a/packages/anastasis-webui/src/components/fields/EmailInput.tsx b/packages/anastasis-webui/src/components/fields/EmailInput.tsx
new file mode 100644
index 000000000..e0fca0f46
--- /dev/null
+++ b/packages/anastasis-webui/src/components/fields/EmailInput.tsx
@@ -0,0 +1,44 @@
+import { h, VNode } from "preact";
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
+
+export interface TextInputProps {
+  label: string;
+  grabFocus?: boolean;
+  error?: string;
+  placeholder?: string;
+  tooltip?: string;
+  bind: [string, (x: string) => void];
+}
+
+export function EmailInput(props: TextInputProps): VNode {
+  const inputRef = useRef<HTMLInputElement>(null);
+  useLayoutEffect(() => {
+    if (props.grabFocus) {
+      inputRef.current?.focus();
+    }
+  }, [props.grabFocus]);
+  const value = props.bind[0];
+  const [dirty, setDirty] = useState(false)
+  const showError = dirty && props.error
+  return (<div class="field">
+    <label class="label">
+      {props.label}
+      {props.tooltip && <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
+        <i class="mdi mdi-information" />
+      </span>}
+    </label>
+    <div class="control has-icons-right">
+      <input
+        value={value}
+        required
+        placeholder={props.placeholder}
+        type="email"
+        class={showError ? 'input is-danger' : 'input'}
+        onChange={(e) => {setDirty(true); props.bind[1]((e.target as HTMLInputElement).value)}}
+        ref={inputRef}
+        style={{ display: "block" }} />
+    </div>
+    {showError && <p class="help is-danger">{props.error}</p>}
+  </div>
+  );
+}
-- 
cgit v1.2.3

