commit 0b57def514b01352a014f388bac686255ddd060a
parent df1918755c0af900c6c447f1d4e0ef27174fb26e
Author: Sebastian <sebasjm@gmail.com>
Date: Wed, 10 Feb 2021 16:25:35 -0300
better login page
Diffstat:
6 files changed, 45 insertions(+), 14 deletions(-)
diff --git a/src/components/auth/LoginPage.tsx b/src/components/auth/LoginPage.tsx
@@ -7,9 +7,31 @@ interface Props {
export default function LoginPage({ onLogIn }: Props): VNode {
const [token, update] = useState('')
-
- return <div>
- <input value={token} onInput={e => update(e?.currentTarget.value)} />
- <button onClick={(): void => onLogIn(token)}>set</button>
+
+ return <div class="modal is-active is-clipped">
+ <div class="modal-background" />
+ <div class="modal-card">
+ <header class="modal-card-head">
+ <p class="modal-card-title">Authentication required</p>
+ </header>
+ <section class="modal-card-body">
+ Please enter your auth id
+ <div class="field is-horizontal">
+ <div class="field-label is-normal">
+ <label class="label">Id</label>
+ </div>
+ <div class="field-body">
+ <div class="field">
+ <p class="control is-expanded has-icons-left">
+ <input class="input" type="text" placeholder="abcdef" name="id" value={token} onInput={e => update(e?.currentTarget.value)} />
+ </p>
+ </div>
+ </div>
+ </div>
+ </section>
+ <footer class="modal-card-foot">
+ <button class="button is-info" onClick={(): void => onLogIn(token)} >Confirm</button>
+ </footer>
+ </div>
</div>
}
\ No newline at end of file
diff --git a/src/components/hooks/backend.ts b/src/components/hooks/backend.ts
@@ -46,9 +46,13 @@ async function fetcher(url: string): Promise<any> {
return request(url, 'get')
}
-export function updateToken(token: string): void {
- localStorage.setItem(TOKEN_KEY, token)
- globalMutate('instances')
+export function updateToken(token: string | null): void {
+ if (token) {
+ localStorage.setItem(TOKEN_KEY, token)
+ } else {
+ localStorage.removeItem(TOKEN_KEY)
+ }
+ globalMutate('/instances', null)
}
interface WithCreate<T> {
@@ -79,12 +83,13 @@ export function useBackendInstance(id: string | null): HttpResponse<MerchantBack
const update = async (updateId: string, instance: MerchantBackend.Instances.InstanceReconfigurationMessage) => {
await request(`/instances/${updateId}`, 'patch', instance)
+ globalMutate('/instances', null)
globalMutate(`/instances/${updateId}`, null)
};
const _delete = async (deleteId: string) => {
await request(`/instances/${deleteId}`, 'delete')
- globalMutate('/instances')
+ globalMutate('/instances', null)
globalMutate(`/instances/${deleteId}`, null)
}
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
@@ -1,4 +1,5 @@
import { h, VNode } from 'preact';
+import { updateToken } from '../hooks/backend';
export default function NavigationBar(): VNode {
return (
@@ -8,7 +9,7 @@ export default function NavigationBar(): VNode {
<span class="icon"><i class="mdi mdi-forwardburger mdi-24px" /></span>
</a>
<div class="navbar-item has-control">
- <div class="control"><input placeholder="Search everywhere..." class="input" /></div>
+ {/* <div class="control"><input placeholder="Search everywhere..." class="input" /></div> */}
</div>
</div>
<div class="navbar-brand is-right">
@@ -17,7 +18,7 @@ export default function NavigationBar(): VNode {
</a>
</div>
<div class="navbar-menu navbar-end">
- <button class="button is-primary">Log out</button>
+ <button class="button is-primary" onClick={ () => updateToken(null) }>Log out</button>
</div>
</nav>
);
diff --git a/src/routes/instances/CreateModal.tsx b/src/routes/instances/CreateModal.tsx
@@ -26,7 +26,7 @@ const schema = yup.object().shape({
name: yup.string().required().label("Name"),
payto_uris: yup.array().of(yup.string())
.min(1).label("Payment Method")
- .meta({ placeholder: 'comma separated values' })
+ .meta({ placeholder: 'comma separated values', help: 'payto://x-taler-bank/bank.taler:5882/blogger' })
.transform(stringToArray),
default_max_deposit_fee: yup.string().required().label("Max Deposit Fee"),
default_max_wire_fee: yup.string().required().label("Max Wire"),
@@ -60,7 +60,7 @@ export default function CreateModal({ active, onCancel, onConfirm }: Props): VNo
}
}
- return <ConfirmModal description="update instance" active={active} onConfirm={submit} onCancel={onCancel}>
+ return <ConfirmModal description="create instance" active={active} onConfirm={submit} onCancel={onCancel}>
{Object.keys(schema.fields).map(f => {
const info = schema.fields[f].describe()
@@ -74,6 +74,7 @@ export default function CreateModal({ active, onCancel, onConfirm }: Props): VNo
<div class="field">
<p class="control is-expanded has-icons-left">
<input class="input" type="text" placeholder={info?.meta?.placeholder} readonly={info?.meta?.readonly} name={f} value={value[f]} onChange={e => valueHandler(prev => ({ ...prev, [f]: e.currentTarget.value }))} />
+ {info?.meta?.help}
</p>
{errors[f] ? <p class="help is-danger">{errors[f]}</p> : null}
</div>
diff --git a/src/routes/instances/Table.tsx b/src/routes/instances/Table.tsx
@@ -71,10 +71,11 @@ export default function Table({ instances, onCreate, onDelete, onSelect, onUpdat
<thead>
<tr>
<th class="is-checkbox-cell">
- <label class="b-checkbox checkbox">
+ { instances.length > 0 ? <label class="b-checkbox checkbox">
<input type="checkbox" checked={rowSelection.length === instances.length} onClick={e => rowSelectionHandler(rowSelection.length === instances.length ? [] : instances.map(i => i.id))} />
<span class="check" />
</label>
+ : null }
</th>
<th>id</th>
<th>name</th>
diff --git a/src/routes/instances/UpdateModal.tsx b/src/routes/instances/UpdateModal.tsx
@@ -13,7 +13,7 @@ const schema = yup.object().shape({
name: yup.string().required().label("Name"),
payto_uris: yup.array().of(yup.string())
.min(1).label("Payment Method")
- .meta({ placeholder: 'comma separated values' })
+ .meta({ placeholder: 'comma separated values', help: 'payto://x-taler-bank/bank.taler:5882/blogger' })
.transform(stringToArray),
default_max_deposit_fee: yup.string().required().label("Max Deposit Fee"),
default_max_wire_fee: yup.string().required().label("Max Wire"),
@@ -64,6 +64,7 @@ export default function UpdateModal({ element, onCancel, onConfirm }: Props): VN
<div class="field">
<p class="control is-expanded has-icons-left">
<input class="input" type="text" placeholder={info?.meta?.placeholder} readonly={info?.meta?.readonly} name={f} value={value[f]} onChange={e => valueHandler(prev => ({ ...prev, [f]: e.currentTarget.value }))} />
+ {info?.meta?.help}
</p>
{errors[f] ? <p class="help is-danger">{errors[f]}</p> : null}
</div>
