commit 5260dcf943d76159ae38caff6cf4e12455a490a7
parent bce078986a8c7b1f53c69a78aa9053ac271165be
Author: Sebastian <sebasjm@gmail.com>
Date: Mon, 6 Dec 2021 10:43:40 -0300
-formatted with prettier
Diffstat:
1 file changed, 102 insertions(+), 58 deletions(-)
diff --git a/packages/merchant-backoffice/src/components/exception/login.tsx b/packages/merchant-backoffice/src/components/exception/login.tsx
@@ -15,9 +15,9 @@
*/
/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
import { h, VNode } from "preact";
import { useState } from "preact/hooks";
@@ -32,69 +32,114 @@ interface Props {
}
function getTokenValuePart(t?: string): string | undefined {
- if (!t) return t
+ if (!t) return t;
const match = /secret-token:(.*)/.exec(t);
if (!match || !match[1]) return undefined;
- return match[1]
+ return match[1];
}
-
export function LoginModal({ onConfirm, withMessage }: Props): VNode {
- const { url: backendUrl, token: baseToken } = useBackendContext()
- const { admin, token: instanceToken } = useInstanceContext()
- const currentToken = getTokenValuePart(!admin ? baseToken : instanceToken || '')
- const [token, setToken] = useState(currentToken)
-
- const [url, setURL] = useState(backendUrl)
- const i18n = useTranslator()
+ const { url: backendUrl, token: baseToken } = useBackendContext();
+ const { admin, token: instanceToken } = useInstanceContext();
+ const currentToken = getTokenValuePart(
+ !admin ? baseToken : instanceToken || ""
+ );
+ const [token, setToken] = useState(currentToken);
- return <div class="columns is-centered">
- <div class="column is-two-thirds " >
- <div class="modal-card" style={{ width: '100%', margin: 0 }}>
- <header class="modal-card-head" style={{ border: '1px solid', borderBottom: 0 }}>
- <p class="modal-card-title">{i18n`Login required`}</p>
- </header>
- <section class="modal-card-body" style={{ border: '1px solid', borderTop: 0, borderBottom: 0 }}>
- <Translate>Please enter your access token.</Translate>
- <div class="field is-horizontal">
- <div class="field-label is-normal">
- <label class="label">URL</label>
- </div>
- <div class="field-body">
- <div class="field">
- <p class="control is-expanded">
- <input class="input" type="text" placeholder="set new url" name="id"
- value={url}
- onKeyPress={e => e.keyCode === 13 ? onConfirm(url, token ? `secret-token:${token}` : undefined) : null}
- onInput={(e): void => setURL(e?.currentTarget.value)}
- />
- </p>
+ const [url, setURL] = useState(backendUrl);
+ const i18n = useTranslator();
+
+ return (
+ <div class="columns is-centered">
+ <div class="column is-two-thirds ">
+ <div class="modal-card" style={{ width: "100%", margin: 0 }}>
+ <header
+ class="modal-card-head"
+ style={{ border: "1px solid", borderBottom: 0 }}
+ >
+ <p class="modal-card-title">{i18n`Login required`}</p>
+ </header>
+ <section
+ class="modal-card-body"
+ style={{ border: "1px solid", borderTop: 0, borderBottom: 0 }}
+ >
+ <Translate>Please enter your access token.</Translate>
+ <div class="field is-horizontal">
+ <div class="field-label is-normal">
+ <label class="label">URL</label>
+ </div>
+ <div class="field-body">
+ <div class="field">
+ <p class="control is-expanded">
+ <input
+ class="input"
+ type="text"
+ placeholder="set new url"
+ name="id"
+ value={url}
+ onKeyPress={(e) =>
+ e.keyCode === 13
+ ? onConfirm(
+ url,
+ token ? `secret-token:${token}` : undefined
+ )
+ : null
+ }
+ onInput={(e): void => setURL(e?.currentTarget.value)}
+ />
+ </p>
+ </div>
</div>
</div>
- </div>
- <div class="field is-horizontal">
- <div class="field-label is-normal">
- <label class="label"><Translate>Access Token</Translate></label>
- </div>
- <div class="field-body">
- <div class="field">
- <p class="control is-expanded">
- <input class="input" type="text" placeholder={"set new access token"} name="token"
- onKeyPress={e => e.keyCode === 13 ? onConfirm(url, token ? `secret-token:${token}` : undefined) : null}
- value={token}
- onInput={(e): void => setToken(e?.currentTarget.value)}
- />
- </p>
+ <div class="field is-horizontal">
+ <div class="field-label is-normal">
+ <label class="label">
+ <Translate>Access Token</Translate>
+ </label>
+ </div>
+ <div class="field-body">
+ <div class="field">
+ <p class="control is-expanded">
+ <input
+ class="input"
+ type="text"
+ placeholder={"set new access token"}
+ name="token"
+ onKeyPress={(e) =>
+ e.keyCode === 13
+ ? onConfirm(
+ url,
+ token ? `secret-token:${token}` : undefined
+ )
+ : null
+ }
+ value={token}
+ onInput={(e): void => setToken(e?.currentTarget.value)}
+ />
+ </p>
+ </div>
</div>
</div>
- </div>
- </section>
- <footer class="modal-card-foot " style={{ justifyContent: 'flex-end', border: '1px solid', borderTop: 0 }} >
- <button class="button is-info" onClick={(): void => {
- onConfirm(url, token ? `secret-token:${token}` : undefined);
- }} ><Translate>Confirm</Translate></button>
- </footer>
+ </section>
+ <footer
+ class="modal-card-foot "
+ style={{
+ justifyContent: "flex-end",
+ border: "1px solid",
+ borderTop: 0,
+ }}
+ >
+ <button
+ class="button is-info"
+ onClick={(): void => {
+ onConfirm(url, token ? `secret-token:${token}` : undefined);
+ }}
+ >
+ <Translate>Confirm</Translate>
+ </button>
+ </footer>
+ </div>
</div>
</div>
- </div>
-}
-\ No newline at end of file
+ );
+}
