123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 |
- import {
- html,
- render,
- } from 'https://unpkg.com/htm@latest/preact/index.mjs?module';
- import {
- useState,
- useEffect,
- } from 'https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module';
- function SiteForm({ create = false }) {
- const [newSite, setNewSite] = useState({});
- const [error, setError] = useState(null);
- const [siteKey, setSiteKey] = useState(null);
- const [siteUpdated, setSiteUpdated] = useState(false);
- const onChange = (att) => (e) => {
- setNewSite((prev) => ({ ...prev, [att]: e.target.value }));
- };
- const onClick = async (e) => {
- e.preventDefault();
- setSiteUpdated(false);
- setError(null);
- const result = await fetch(
- create ? '/_register/' : `/_register/${newSite.siteId}`,
- {
- method: create ? 'POST' : 'PATCH',
- headers: {
- Accept: 'application/json',
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify(newSite),
- }
- );
- if (result.status === 400) {
- const { message } = await result.json();
- setError(message);
- return;
- }
- if (result.status === 403) {
- const { message } = await result.json();
- setError(message);
- return;
- }
- if (result.status === 404) {
- const { message } = await result.json();
- setError(message);
- return;
- }
- if (result.status >= 300) {
- setError('Unknown error, try again later...');
- return;
- }
- setNewSite({});
- if (create) {
- const { key } = await result.json();
- setSiteKey(key);
- } else {
- setSiteUpdated(true);
- }
- };
- return html`<div class="card">
- <header>
- <h2>${create ? 'Create new site' : 'Update site'}</h2>
- </header>
- <div class="content">
- <form>
- <div class="field">
- <label>
- Site Id:
- <input value=${newSite.siteId || ''} onChange=${onChange('siteId')}
- /></label>
- <p class="help-text">Only letters and '_' are accepted.</p>
- </div>
- <div class="field">
- <label>
- Name:
- <input value=${newSite.name || ''} onChange=${onChange('name')}
- /></label>
- <p class="help-text">This name will appears in sent email.</p>
- </div>
- <div class="field">
- <label>
- Email from:
- <input
- value=${newSite.emailFrom || ''}
- onChange=${onChange('emailFrom')}
- />
- </label>
- <p class="help-text">
- All sent email for this site will have this origin.
- </p>
- </div>
- ${create &&
- html`<div class="field">
- <label>
- Owner:
- <input value=${newSite.owner || ''} onChange=${onChange('owner')} />
- </label>
- <p class="help-text">
- This is the site owner email. Confirmation links are sent to this
- address.
- </p>
- </div>`}
- </form>
- ${error && html`<p class="text-error">${error}</p>`}
- ${siteKey &&
- html`<p class="text-success">
- Success! Please, save the site encryption key:
- <input value=${siteKey} onChange=${(e) => e.preventDefault()} />
- this is the last opportunity to read it.
- </p>
- <p class="text-success">
- Now you must confirm the site creation before using it, you will
- receive an email at the 'owner' address with a confirmation link.
- </p>`}
- ${siteUpdated &&
- html` <p class="text-success">
- Success! Now you must confirm the site update by visiting the
- confirmation link we have just sent to the owner email.
- </p>`}
- </div>
- <footer>
- <button
- class="button primary"
- onClick=${onClick}
- disabled=${!newSite.siteId}
- >
- ${create ? 'Create site' : 'Update site'}
- </button>
- </footer>
- </div>`;
- }
- function App() {
- const [settings, setSettings] = useState({});
- useEffect(() => {
- let mounted = true;
- const updateRegistration = async () => {
- const result = await (await fetch('/site/settings')).json();
- console.log(result);
- if (mounted) setSettings(result);
- };
- updateRegistration();
- return () => (mounted = false);
- }, []);
- return html`<div class="container">
- <div class="row">
- <div class="col-4" />
- <div class="col"><h1>Ricochet.js admin</h1></div>
- </div>
- ${settings.registrationEnabled &&
- html`<div class="row">
- <div class="col-2" />
- <div class="col-4">
- <${SiteForm} create />
- </div>
- <div class="col-4">
- <${SiteForm} />
- </div>
- </div>`}
- ${settings.registrationEnabled === false &&
- html`<div class="row">
- <div class="col-4" />
- <div class="col">
- <h2 class="text-error">Site registration is disabled</h2>
- </div>
- </div>`}
- </div>`;
- }
- render(html`<${App} />`, document.body);
|