diff options
author | Sebastian <sebasjm@gmail.com> | 2021-06-10 23:51:14 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-06-10 23:55:04 -0300 |
commit | c9c04a14be4bf9a70cd1730d2e8b5aa8bd38f032 (patch) | |
tree | c59f0b0906f97ffe2c8394cfb963c778b82ad244 /packages/frontend/src/components/modal | |
parent | 352e23dbbc9a83b522964f3ba7fb06295d38c835 (diff) | |
download | merchant-backoffice-c9c04a14be4bf9a70cd1730d2e8b5aa8bd38f032.tar.gz merchant-backoffice-c9c04a14be4bf9a70cd1730d2e8b5aa8bd38f032.tar.bz2 merchant-backoffice-c9c04a14be4bf9a70cd1730d2e8b5aa8bd38f032.zip |
lots of fixes in same commit
added tooltips in buttons and fix tooltips styles in corner cases
added a start for required fields
token -> access token
fixed query product list
refactor instance update/create form
some more comments from christian email
Diffstat (limited to 'packages/frontend/src/components/modal')
-rw-r--r-- | packages/frontend/src/components/modal/index.tsx | 25 |
1 files changed, 13 insertions, 12 deletions
diff --git a/packages/frontend/src/components/modal/index.tsx b/packages/frontend/src/components/modal/index.tsx index 8f6b722..9874a19 100644 --- a/packages/frontend/src/components/modal/index.tsx +++ b/packages/frontend/src/components/modal/index.tsx @@ -44,7 +44,7 @@ export function ConfirmModal({ active, description, onCancel, onConfirm, childre <div class="modal-background " onClick={onCancel} /> <div class="modal-card"> <header class="modal-card-head"> - {!description ? null : <p class="modal-card-title has-text-white-ter">{description}</p>} + {!description ? null : <p class="modal-card-title">{description}</p>} <button class="delete " aria-label="close" onClick={onCancel} /> </header> <section class="modal-card-body"> @@ -125,6 +125,7 @@ interface UpdateTokenModalProps { onClear: () => void; } +//FIXME: merge UpdateTokenModal with SetTokenNewInstanceModal export function UpdateTokenModal({ onCancel, onClear, onConfirm, oldToken }: UpdateTokenModalProps): VNode { type State = { old_token: string, new_token: string, repeat_token: string } const [form, setValue] = useState<Partial<State>>({ @@ -134,7 +135,7 @@ export function UpdateTokenModal({ onCancel, onClear, onConfirm, oldToken }: Upd const hasInputTheCorrectOldToken = oldToken && oldToken !== form.old_token const errors = { - old_token: hasInputTheCorrectOldToken ? i18n`is not the same as the current token` : undefined, + old_token: hasInputTheCorrectOldToken ? i18n`is not the same as the current access token` : undefined, new_token: !form.new_token ? i18n`cannot be empty` : (form.new_token === form.old_token ? i18n`cannot be the same as the old token` : undefined), repeat_token: form.new_token !== form.repeat_token ? i18n`is not the same` : undefined } @@ -143,7 +144,7 @@ export function UpdateTokenModal({ onCancel, onClear, onConfirm, oldToken }: Upd const instance = useInstanceContext() - const text = i18n`You are updating the authorization token from instance with id ${instance.id}` + const text = i18n`You are updating the access token from instance with id ${instance.id}` return <ClearConfirmModal description={text} onCancel={onCancel} @@ -154,11 +155,11 @@ export function UpdateTokenModal({ onCancel, onClear, onConfirm, oldToken }: Upd <div class="column" /> <div class="column is-four-fifths" > <FormProvider errors={errors} object={form} valueHandler={setValue}> - {oldToken && <Input<State> name="old_token" label={i18n`Old token`} tooltip={i18n`token currently in use`} inputType="password" />} - <Input<State> name="new_token" label={i18n`New token`} tooltip={i18n`next token to be used`} inputType="password" /> - <Input<State> name="repeat_token" label={i18n`Repeat token`} tooltip={i18n`confirm the same token`} inputType="password" /> + {oldToken && <Input<State> name="old_token" label={i18n`Old access token`} tooltip={i18n`access token currently in use`} inputType="password" />} + <Input<State> name="new_token" label={i18n`New access token`} tooltip={i18n`next access token to be used`} inputType="password" /> + <Input<State> name="repeat_token" label={i18n`Repeat access token`} tooltip={i18n`confirm the same access token`} inputType="password" /> </FormProvider> - <p><Translate>Clearing the auth token will mean public access to the instance</Translate></p> + <p><Translate>Clearing the access token will mean public access to the instance</Translate></p> </div> <div class="column" /> </div> @@ -173,13 +174,13 @@ export function SetTokenNewInstanceModal({ onCancel, onClear, onConfirm }: Updat const i18n = useTranslator() const errors = { - new_token: !form.new_token ? i18n`cannot be empty` : (form.new_token === form.old_token ? i18n`cannot be the same as the old token` : undefined), + new_token: !form.new_token ? i18n`cannot be empty` : (form.new_token === form.old_token ? i18n`cannot be the same as the old access token` : undefined), repeat_token: form.new_token !== form.repeat_token ? i18n`is not the same` : undefined } const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined) - const text = i18n`You are setting the authorization token for the new instance` + const text = i18n`You are setting the access token for the new instance` return <ClearConfirmModal description={text} onCancel={onCancel} @@ -190,10 +191,10 @@ export function SetTokenNewInstanceModal({ onCancel, onClear, onConfirm }: Updat <div class="column" /> <div class="column is-four-fifths" > <FormProvider errors={errors} object={form} valueHandler={setValue}> - <Input<State> name="new_token" label={i18n`New token`} tooltip={i18n`next token to be used`} inputType="password" /> - <Input<State> name="repeat_token" label={i18n`Repeat token`} tooltip={i18n`confirm the same token`} inputType="password" /> + <Input<State> name="new_token" label={i18n`New access token`} tooltip={i18n`next access token to be used`} inputType="password" /> + <Input<State> name="repeat_token" label={i18n`Repeat access token`} tooltip={i18n`confirm the same access token`} inputType="password" /> </FormProvider> - <p><Translate>Clearing the auth token will mean public access to the instance</Translate></p> + <p><Translate>Clearing the access token will mean public access to the instance</Translate></p> </div> <div class="column" /> </div> |