components#withSettings JavaScript Examples
The following examples show how to use
components#withSettings.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: wizard.jsx From apps with GNU Affero General Public License v3.0 | 6 votes |
|
Hi = withSettings(({ settings }) => (
<React.Fragment>
<CardContent>
<p>
<T
t={t}
k="wizard.hi"
link={
<A
key="letUsKnow"
external
href={settings.get('supportEmail')}
>
<T t={t} k="wizard.letUsKnow" key="letUsKnow" />
</A>
}
/>
</p>
</CardContent>
<CardFooter>
<Button type="success" href={`/provider/setup/enter-provider-data`}>
<T t={t} k="wizard.continue" />
</Button>
</CardFooter>
</React.Fragment>
))
Example #2
| Source File: appointments.jsx From apps with GNU Affero General Public License v3.0 | 6 votes |
|
PropertyTag = withSettings(({ settings, property }) => {
const lang = settings.get('lang');
const properties = settings.get('appointmentProperties');
for (const [category, values] of Object.entries(properties)) {
const prop = values.values[property];
if (prop !== undefined) {
return (
<span key={property} className={`kip-tag kip-is-${property}`}>
{prop[lang]}
</span>
);
}
}
})
Example #3
| Source File: wizard.jsx From apps with GNU Affero General Public License v3.0 | 6 votes |
|
Hi = withSettings(({ settings }) => (
<React.Fragment>
<CardContent>
<p>
<T
t={t}
k="wizard.hi"
link={
<A
key="letUsKnow"
external
href={settings.get('supportEmail')}
>
<T t={t} k="wizard.letUsKnow" key="letUsKnow" />
</A>
}
/>
</p>
</CardContent>
<CardFooter>
<Button type="success" href={`/user/setup/enter-contact-data`}>
<T t={t} k="wizard.continue" />
</Button>
</CardFooter>
</React.Fragment>
))
Example #4
| Source File: settings.jsx From apps with GNU Affero General Public License v3.0 | 5 votes |
|
Settings = withActions(withRouter(withSettings(BaseSettings)), [])
Example #5
| Source File: store-secrets.jsx From apps with GNU Affero General Public License v3.0 | 5 votes |
|
DataSecret = withSettings(
({ settings, secret, embedded, hideNotice }) => {
const [succeeded, setSucceeded] = useState(false);
const [failed, setFailed] = useState(false);
const chunks = secret.match(/.{1,4}/g);
const fragments = [];
for (let i = 0; i < chunks.length; i++) {
fragments.push(<F key={`${i}-main`}>{chunks[i]}</F>);
if (i < chunks.length - 1)
fragments.push(
<strong key={`${i}-dot`} style={{ userSelect: 'none' }}>
·
</strong>
);
}
const copy = () => {
if (!copyToClipboard(secret)) setFailed(true);
else setSucceeded(true);
};
return (
<React.Fragment>
{!embedded && (
<p className="kip-secrets-notice">
<T t={t} k="store-secrets.online.text" safe />
</p>
)}
<div
className={
'kip-secrets-box' + (embedded ? ' kip-is-embedded' : '')
}
>
{
<React.Fragment>
<div className="kip-uid">
{!hideNotice && (
<span>
<T t={t} k="store-secrets.secret" />
</span>
)}
<code>{fragments}</code>
</div>
</React.Fragment>
}
</div>
{!embedded && (
<div className="kip-secrets-links">
<Button
type={
failed ? 'danger' : succeeded ? '' : 'primary'
}
disabled={failed}
className="bulma-button bulma-is-small"
onClick={copy}
>
<T
t={t}
k={
failed
? 'store-secrets.copy-failed'
: succeeded
? 'store-secrets.copy-succeeded'
: 'store-secrets.copy'
}
/>
</Button>
</div>
)}
</React.Fragment>
);
}
)
Example #6
| Source File: store-secrets.jsx From apps with GNU Affero General Public License v3.0 | 5 votes |
|
BackupDataLink = withSettings(
withActions(
({
onSuccess,
settings,
keyPairs,
downloadText,
providerData,
keyPairsAction,
providerSecret,
providerSecretAction,
backupData,
backupDataAction,
}) => {
const [initialized, setInitialized] = useState(false);
let providerName;
try {
providerName = providerData.data.data.name
.replaceAll(' ', '-')
.replaceAll('.', '-')
.toLowerCase();
} catch (e) {}
useEffect(() => {
if (initialized) return;
setInitialized(true);
keyPairsAction().then((kp) =>
providerSecretAction().then((ps) =>
backupDataAction(kp.data, ps.data)
)
);
});
let blob;
if (backupData !== undefined && backupData.status === 'succeeded') {
blob = new Blob([str2ab(JSON.stringify(backupData.data))], {
type: 'application/octet-stream',
});
}
const title = settings.get('title').toLowerCase();
const dateString = formatDate(new Date());
const filename = `${title}-backup-${dateString}-${providerName}.enc`;
if (blob !== undefined)
return (
<a
onClick={onSuccess}
className="bulma-button bulma-is-success"
download={filename}
href={URL.createObjectURL(blob)}
type="success"
>
{downloadText || (
<T t={t} k="wizard.download-backup-data" />
)}
</a>
);
return (
<Message waiting type="warning">
<T t={t} k="wizard.generating-backup-data" />
</Message>
);
},
[]
)
)
Example #7
| Source File: verify.jsx From apps with GNU Affero General Public License v3.0 | 5 votes |
|
Verify = withSettings(
withActions(({ settings, contactData, contactDataAction }) => {
const [initialized, setInitialized] = useState(false);
useEffect(() => {
if (initialized) return;
contactDataAction();
setInitialized(true);
});
const render = () => (
<React.Fragment>
<CardContent>
<p className="kip-verify-notice">
<T
t={t}
k="verify.text"
link={
<A
key="letUsKnow"
external
href={settings.get('supportEmail')}
>
<T
t={t}
k="wizard.letUsKnow"
key="letUsKnow"
/>
</A>
}
/>
</p>
<div className="kip-contact-data-box">
<ul>
<li>
<span>
<T t={t} k="contact-data.email.label" />
</span>{' '}
{contactData.data.email || (
<T t={t} k="contact-data.not-given" />
)}
</li>
</ul>
</div>
<div className="kip-contact-data-links">
<A
className="bulma-button bulma-is-small"
href="/user/setup/enter-contact-data"
>
<T t={t} k="contact-data.change" />
</A>
</div>
</CardContent>
<CardFooter>
<Button type="success" href={`/user/setup/finalize`}>
<T t={t} k="wizard.continue" />
</Button>
</CardFooter>
</React.Fragment>
);
return <WithLoader resources={[contactData]} renderLoaded={render} />;
}, [])
)
Example #8
| Source File: settings.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
Settings = withActions(
withRouter(
withSettings(
({
action,
type,
settings,
keys,
keysAction,
keyPairs,
keyPairsAction,
providerSecret,
providerSecretAction,
backupData,
backupDataAction,
providerData,
providerDataAction,
verifiedProviderData,
verifiedProviderDataAction,
router,
}) => {
const [deleting, setDeleting] = useState(false);
const [loggingOut, setLoggingOut] = useState(false);
const [initialized, setInitialized] = useState(false);
const [view, setView] = useState('verified');
// we load all the resources we need
useEffect(() => {
if (initialized) return;
keysAction();
verifiedProviderDataAction();
providerDataAction();
setInitialized(true);
});
let modal;
const title = settings.get('title').toLowerCase();
const cancel = () => {
router.navigateToUrl('/provider/settings');
};
const deleteData = () => {
setDeleting(true);
const backend = settings.get('backend');
backend.local.deleteAll('provider::');
setDeleting(false);
router.navigateToUrl('/provider/deleted');
};
const logOut = () => {
setLoggingOut(true);
const kpa = keyPairsAction('logoutKeyPairs');
kpa.then((kp) => {
const psa = providerSecretAction(
undefined,
'logoutProviderSecret'
);
psa.then((ps) => {
// we give the backup data action a different name to avoid it being rejected
// in case there's already a backup in progress... It will still be queued
// up to ensure no conflicts can occur.
const ba = backupDataAction(
kp.data,
ps.data,
'logout'
);
ba.then(() => {
const backend = settings.get('backend');
backend.local.deleteAll('provider::');
router.navigateToUrl('/provider/logged-out');
});
ba.catch(() => setLoggingOut(false));
});
psa.catch(() => setLoggingOut(false));
});
kpa.catch(() => setLoggingOut(false));
};
if (action === 'backup') {
modal = (
<Modal
onClose={cancel}
save="Sicherungsdatei herunterladen"
title={<T t={t} k="backup-modal.title" />}
onCancel={cancel}
cancel={<T t={t} k="backup-modal.close" />}
saveType="success"
>
<p>
<T t={t} k="backup-modal.text" />
</p>
<hr />
<DataSecret
secret={providerSecret.data}
embedded={true}
hideNotice={true}
/>
<Button
style={{ marginRight: '1em' }}
type="success"
onClick={() =>
copyToClipboard(providerSecret.data)
}
>
Datenschlüssel kopieren
</Button>
<BackupDataLink
downloadText={
<T t={t} k="backup-modal.download-backup" />
}
onSuccess={cancel}
/>
</Modal>
);
} else if (action === 'delete') {
modal = (
<Modal
onClose={cancel}
save={<T t={t} k="delete" />}
disabled={deleting}
waiting={deleting}
title={<T t={t} k="delete-modal.title" />}
onCancel={cancel}
onSave={deleteData}
saveType="danger"
>
<p>
<T
t={t}
k={
deleting
? 'delete-modal.deleting-text'
: 'delete-modal.text'
}
/>
</p>
</Modal>
);
} else if (action === 'logout') {
modal = (
<Modal
onClose={cancel}
save={<T t={t} k="log-out" />}
disabled={loggingOut}
waiting={loggingOut}
title={<T t={t} k="log-out-modal.title" />}
onCancel={cancel}
onSave={logOut}
saveType="warning"
>
<p>
<T
t={t}
k={
loggingOut
? 'log-out-modal.logging-out'
: 'log-out-modal.text'
}
/>
</p>
<hr />
<DataSecret
secret={providerSecret.data}
embedded={true}
hideNotice={true}
/>
<Button
style={{ marginRight: '1em' }}
type="success"
onClick={() =>
copyToClipboard(providerSecret.data)
}
>
Datenschlüssel kopieren
</Button>
<BackupDataLink
downloadText={
<T t={t} k="backup-modal.download-backup" />
}
/>
</Modal>
);
}
const render = () => {
return (
<div className="kip-provider-settings">
{modal}
<CardContent>
<h2>
<T t={t} k="provider-data.title" />
</h2>
<p style={{ marginBottom: '1em' }}>
<T
t={t}
k="provider-data.verified-vs-unverifired-desc"
/>
</p>
<DropdownMenu
title={
<F>
<Icon icon="calendar" />{' '}
<T t={t} k={`settings.${view}`} />
</F>
}
>
<DropdownMenuItem
icon="calendar"
onClick={() => setView('verified')}
>
<T t={t} k={`settings.verified`} />
</DropdownMenuItem>
<DropdownMenuItem
icon="list"
onClick={() => setView('local')}
>
<T t={t} k={`settings.local`} />
</DropdownMenuItem>
</DropdownMenu>
<ProviderData
providerData={
view === 'verified'
? verifiedProviderData
: providerData
}
verified={view === 'verified'}
/>
</CardContent>
<CardFooter>
<div className="kip-buttons">
<Button
type="success"
href="/provider/settings/backup"
>
<T t={t} k="backup" />
</Button>
<Button
type="warning"
href="/provider/settings/logout"
>
<T t={t} k="log-out" />
</Button>
{false && (
<Button
type="danger"
href="/provider/settings/delete"
>
<T t={t} k="delete" />
</Button>
)}
</div>
</CardFooter>
</div>
);
};
// we wait until all resources have been loaded before we display the form
return (
<WithLoader
resources={[
keyPairs,
providerData,
verifiedProviderData,
]}
renderLoaded={render}
/>
);
}
)
),
[]
)
Example #9
| Source File: settings.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
Settings = withActions(
withSettings(
withRouter(
({ settings, action, router, userSecret, backupDataAction }) => {
const [loggingOut, setLoggingOut] = useState(false);
let logOutModal;
const cancel = () => {
router.navigateToUrl('/user/settings');
};
const logOut = () => {
setLoggingOut(true);
const backend = settings.get('backend');
// we perform a backup before logging the user out...
backupDataAction(userSecret.data, 'logout').then(() => {
backend.local.deleteAll('user::');
setLoggingOut(false);
router.navigateToUrl('/user/logged-out');
});
};
if (action === 'logout') {
logOutModal = (
<Modal
onClose={cancel}
save={<T t={t} k="log-out" />}
disabled={loggingOut}
waiting={loggingOut}
title={<T t={t} k="log-out-modal.title" />}
onCancel={cancel}
onSave={logOut}
saveType="warning"
>
<p>
<T
t={t}
k={
loggingOut
? 'log-out-modal.logging-out'
: 'log-out-modal.text'
}
/>
</p>
<hr />
{userSecret !== undefined && (
<StoreOnline
secret={userSecret.data}
embedded={true}
hideNotice={true}
/>
)}
</Modal>
);
}
return (
<F>
<CardContent>
<div className="kip-user-settings">
{logOutModal}
<h2>
<T t={t} k="user-data.title" />
</h2>
<p>
<T t={t} k="user-data.notice" />
</p>
</div>
</CardContent>
<CardFooter>
<div className="kip-buttons">
<Button
type="warning"
href="/user/settings/logout"
>
<T t={t} k="log-out" />
</Button>
</div>
</CardFooter>
</F>
);
}
)
),
[]
)
Example #10
| Source File: finalize.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
Finalize = withForm(
withSettings(
withRouter(
({
settings,
router,
form: { set, data, error, valid, reset },
}) => {
const [initialized, setInitialized] = useState(false);
const [modified, setModified] = useState(false);
const [submitting, setSubmitting] = useState(false);
const [tv, setTV] = useState(0);
const user = useUser();
useEffect(async () => {
if (initialized) return;
setInitialized(true);
await user.initialize();
const initialData = {
distance: 5,
};
for (const [k, v] of Object.entries(
t['contact-data'].properties
)) {
for (const [kv, vv] of Object.entries(v.values)) {
initialData[kv] = vv._default;
}
}
reset(user.queueData || initialData);
});
const submit = async () => {
setSubmitting(true);
// we store the queue data
user.queueData = data;
const result = await user.getToken({});
setSubmitting(false);
if (result.status === Status.Failed) return;
await user.backupData();
router.navigateToUrl('/user/setup/store-secrets');
};
const setAndMarkModified = (key, value) => {
setModified(true);
set(key, value);
};
const properties = Object.entries(
t['contact-data'].properties
).map(([k, v]) => {
const items = Object.entries(v.values).map(([kv, vv]) => (
<li key={kv}>
<Switch
id={kv}
checked={data[kv] || false}
onChange={(value) =>
setAndMarkModified(kv, value)
}
>
</Switch>
<label htmlFor={kv}>
<T
t={t}
k={`contact-data.properties.${k}.values.${kv}`}
/>
</label>
</li>
));
return (
<F key={k}>
<h2>
<T
t={t}
k={`contact-data.properties.${k}.title`}
/>
</h2>
<ul className="kip-properties">{items}</ul>
</F>
);
});
const render = () => {
let failedMessage;
let failed;
if (
getToken !== undefined &&
getToken.status === 'failed'
) {
failed = true;
if (getToken.error.error.code === 401) {
failedMessage = (
<Message type="danger">
<T t={t} k="wizard.failed.invalid-code" />
</Message>
);
}
}
if (failed && !failedMessage)
failedMessage = (
<Message type="danger">
<T t={t} k="wizard.failed.notice" />
</Message>
);
return (
<React.Fragment>
<CardContent>
{failedMessage}
<div className="kip-finalize-fields">
<ErrorFor error={error} field="zipCode" />
<RetractingLabelInput
value={data.zipCode || ''}
onChange={(value) =>
setAndMarkModified('zipCode', value)
}
label={
<T
t={t}
k="contact-data.zip-code"
/>
}
/>
<label
className="kip-control-label"
htmlFor="distance"
>
<T
t={t}
k="contact-data.distance.label"
/>
<span className="kip-control-notice">
<T
t={t}
k="contact-data.distance.notice"
/>
</span>
</label>
<ErrorFor error={error} field="distance" />
<RichSelect
id="distance"
value={data.distance || 5}
onChange={(value) =>
setAndMarkModified(
'distance',
value.value
)
}
options={[
{
value: 5,
description: (
<T
t={t}
k="contact-data.distance.option"
distance={5}
/>
),
},
{
value: 10,
description: (
<T
t={t}
k="contact-data.distance.option"
distance={10}
/>
),
},
{
value: 20,
description: (
<T
t={t}
k="contact-data.distance.option"
distance={20}
/>
),
},
{
value: 30,
description: (
<T
t={t}
k="contact-data.distance.option"
distance={30}
/>
),
},
{
value: 40,
description: (
<T
t={t}
k="contact-data.distance.option"
distance={40}
/>
),
},
{
value: 50,
description: (
<T
t={t}
k="contact-data.distance.option"
distance={50}
/>
),
},
]}
/>
{properties}
</div>
</CardContent>
<CardFooter>
<Button
waiting={submitting}
type={failed ? 'danger' : 'success'}
onClick={submit}
disabled={submitting || !valid}
>
<T
t={t}
k={
failed
? 'wizard.failed.title'
: submitting
? 'wizard.please-wait'
: 'wizard.continue'
}
/>
</Button>
</CardFooter>
</React.Fragment>
);
};
return <WithLoader resources={[]} renderLoaded={render} />;
}
)
),
FinalizeForm,
'form'
)
