pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stop using tables for forms

Browse Source
This commit is contained in:
Fornax
2022-08-04 20:19:30 +02:00
parent 14280590e1
commit c9a9e89378
9 changed files with 239 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
svelte/src/admin_panel/AbuseReporters.svelte
View File

@@ -129,37 +129,25 @@ onMount(get_reporters);
{#if creating}
<div class="highlight_shaded">
<form on:submit|preventDefault={create_reporter}>
<table class="form">
<tr>
<td>E-mail address</td>
<td><input type="text" bind:this={new_reporter_from_address}/></td>
</tr>
<tr>
<td>Mail server</td>
<td><input type="text" bind:this={new_reporter_mail_server}/></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" bind:this={new_reporter_name} value="Anonymous tip"/></td>
</tr>
<tr>
<td>Status</td>
<td>
<input id="reporter_status_1" name="reporter_status" type="radio" bind:group={new_reporter_status} value="trusted" />
<label for="reporter_status_1">Trusted</label>
<br/>
<input id="reporter_status_2" name="reporter_status" type="radio" bind:group={new_reporter_status} value="rejected" />
<label for="reporter_status_2">Rejected</label>
</td>
</tr>
<tr>
<td colspan="2">
<button class="button_highlight" type="submit" style="float: right;">
<i class="icon">save</i> Save
</button>
</td>
</tr>
</table>
<div class="form">
<label for="field_from_address">E-mail address</label>
<input id="field_from_address" type="text" bind:this={new_reporter_from_address}/>
<label for="field_mailserver">Mail server</label>
<input id="field_mailserver" type="text" bind:this={new_reporter_mail_server}/>
<label for="field_name">Name</label>
<input id="field_name" type="text" bind:this={new_reporter_name} value="Anonymous tip"/>
<label for="reporter_status">Status</label>
<div>
<input id="reporter_status_1" name="reporter_status" type="radio" bind:group={new_reporter_status} value="trusted" />
<label for="reporter_status_1">Trusted</label>
<br/>
<input id="reporter_status_2" name="reporter_status" type="radio" bind:group={new_reporter_status} value="rejected" />
<label for="reporter_status_2">Rejected</label>
</div>
<button class="button_highlight" type="submit">
<i class="icon">save</i> Save
</button>
</div>
</form>
</div>
{/if}

62
svelte/src/admin_panel/IPBans.svelte
View File

@@ -98,41 +98,33 @@ onMount(get_bans);
{#if creating}
<div class="highlight_shaded">
<form on:submit|preventDefault={create_ban}>
<table class="form">
<tr>
<td>IP address</td>
<td><input type="text" bind:this={new_ban_address}/></td>
</tr>
<tr>
<td>Reason</td>
<td>
<input id="reason_unknown" name="reporter_type" type="radio" bind:group={new_ban_reason} value="unknown" />
<label for="reason_unknown">unknown</label>
<br/>
<input id="reason_copyright" name="reporter_type" type="radio" bind:group={new_ban_reason} value="copyright" />
<label for="reason_copyright">copyright</label>
<br/>
<input id="reason_child_abuse" name="reporter_type" type="radio" bind:group={new_ban_reason} value="child_abuse" />
<label for="reason_child_abuse">child_abuse</label>
<br/>
<input id="reason_terrorism" name="reporter_type" type="radio" bind:group={new_ban_reason} value="terorrism" />
<label for="reason_terrorism">terrorism</label>
<br/>
<input id="reason_gore" name="reporter_type" type="radio" bind:group={new_ban_reason} value="gore" />
<label for="reason_gore">gore</label>
<br/>
<input id="reason_malware" name="reporter_type" type="radio" bind:group={new_ban_reason} value="malware" />
<label for="reason_malware">malware</label>
</td>
</tr>
<tr>
<td colspan="2">
<button class="button_highlight" type="submit" style="float: right;">
<i class="icon">save</i> Save
</button>
</td>
</tr>
</table>
<div class="form">
<label for="field_address">IP address</label>
<input id="field_address" type="text" bind:this={new_ban_address}/>
<label for="field_reason">Reason</label>
<div id="field_reason">
<input id="reason_unknown" name="reporter_type" type="radio" bind:group={new_ban_reason} value="unknown" />
<label for="reason_unknown">unknown</label>
<br/>
<input id="reason_copyright" name="reporter_type" type="radio" bind:group={new_ban_reason} value="copyright" />
<label for="reason_copyright">copyright</label>
<br/>
<input id="reason_child_abuse" name="reporter_type" type="radio" bind:group={new_ban_reason} value="child_abuse" />
<label for="reason_child_abuse">child_abuse</label>
<br/>
<input id="reason_terrorism" name="reporter_type" type="radio" bind:group={new_ban_reason} value="terorrism" />
<label for="reason_terrorism">terrorism</label>
<br/>
<input id="reason_gore" name="reporter_type" type="radio" bind:group={new_ban_reason} value="gore" />
<label for="reason_gore">gore</label>
<br/>
<input id="reason_malware" name="reporter_type" type="radio" bind:group={new_ban_reason} value="malware" />
<label for="reason_malware">malware</label>
</div>
<button class="button_highlight" type="submit" style="float: right;">
<i class="icon">save</i> Save
</button>
</div>
</form>
</div>
{/if}

32
svelte/src/user_home/AccountSettings.svelte
View File

@@ -51,7 +51,7 @@ let email_change = {
fields: [
{
name: "new_email",
label: "New e-mail address",
label: "E-mail address",
type: "email",
default_value: window.user.email,
description: `we will send an e-mail to the new address to
@@ -83,7 +83,7 @@ let name_change = {
fields: [
{
name: "new_username",
label: "New name",
label: "Name",
type: "username",
default_value: window.user.username,
description: `changing your username also changes the name used to
@@ -143,15 +143,27 @@ let delete_account = {
<section>
<h2>Account settings</h2>
<h3>Change password</h3>
<Form config={password_change}></Form>
<div class="highlight_shaded">
<h3>Change password</h3>
<Form config={password_change}></Form>
</div>
<br/>
<h3>Change e-mail address</h3>
<Form config={email_change}></Form>
<div class="highlight_shaded">
<h3>Change e-mail address</h3>
<Form config={email_change}></Form>
</div>
<br/>
<h3>Change name</h3>
<Form config={name_change}></Form>
<div class="highlight_shaded">
<h3>Change name</h3>
<Form config={name_change}></Form>
</div>
<br/>
<h3>Delete account</h3>
<Form config={delete_account}></Form>
<div class="highlight_shaded">
<h3>Delete account</h3>
<Form config={delete_account}></Form>
</div>
<br/>
</section>

196
svelte/src/util/Form.svelte
View File

@@ -131,121 +131,107 @@ let handle_errors = (response) => {
{/if}
<table class="form">
<div class="form">
{#each config.fields as field}
<tr class="form">
{#if field.type === "text_area"}
<td colspan="2">
{field.label}
<br/>
<textarea bind:this={field.binding}
id="input_{field.name}"
name="{field.name}"
class="form_input"
style="width: 100%; height: 10em; resize: vertical;"
>{field.default_value}</textarea>
</td>
{:else if field.type !== "description"}
<td>{field.label}</td>
<td>
{#if field.type === "text"}
<input bind:this={field.binding}
id="input_{field.name}"
{#if field.type !== "description"}
<label for="input_{field.name}">
{field.label}
</label>
{#if field.type === "text"}
<input bind:this={field.binding}
id="input_{field.name}"
name="{field.name}"
value="{field.default_value}"
type="text"
class="form_input"/>
{:else if field.type === "text_area"}
<textarea bind:this={field.binding}
id="input_{field.name}"
name="{field.name}"
class="form_input"
style="width: 100%; height: 10em; resize: vertical;"
>{field.default_value}</textarea>
{:else if field.type === "number"}
<input bind:this={field.binding}
id="input_{field.name}"
name="{field.name}"
value="{field.default_value}"
type="number"
class="form_input"/>
{:else if field.type === "decimal"}
<input bind:this={field.binding}
id="input_{field.name}"
name="{field.name}"
value="{field.default_value}"
type="number"
step="0.1"
class="form_input"/>
{:else if field.type === "username"}
<input bind:this={field.binding}
id="input_{field.name}"
name="{field.name}"
value="{field.default_value}"
type="text"
autocomplete="username"
class="form_input"/>
{:else if field.type === "email"}
<input bind:this={field.binding}
id="input_{field.name}"
name="{field.name}"
value="{field.default_value}"
type="email"
autocomplete="email"
class="form_input"/>
{:else if field.type === "current_password"}
<input bind:this={field.binding}
id="input_{field.name}"
name="{field.name}"
value="{field.default_value}"
type="password"
autocomplete="current-password"
class="form_input"/>
{:else if field.type === "new_password"}
<input bind:this={field.binding}
id="input_{field.name}"
name="{field.name}"
value="{field.default_value}"
type="password"
autocomplete="new-password"
class="form_input"/>
{:else if field.type === "captcha"}
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-theme="dark" data-sitekey="{field.captcha_site_key}"></div>
{:else if field.type === "radio"}
<div>
{#each field.radio_values as val}
<input bind:group={field.binding}
id="input_{field.name}_choice_{val}"
name="{field.name}"
value="{field.default_value}"
type="text"
class="form_input"/>
{:else if field.type === "number"}
<input bind:this={field.binding}
id="input_{field.name}"
name="{field.name}"
value="{field.default_value}"
type="number"
class="form_input"/>
{:else if field.type === "decimal"}
<input bind:this={field.binding}
id="input_{field.name}"
name="{field.name}"
value="{field.default_value}"
type="number"
step="0.1"
class="form_input"/>
{:else if field.type === "username"}
<input bind:this={field.binding}
id="input_{field.name}"
name="{field.name}"
value="{field.default_value}"
type="text"
autocomplete="username"
class="form_input"/>
{:else if field.type === "email"}
<input bind:this={field.binding}
id="input_{field.name}"
name="{field.name}"
value="{field.default_value}"
type="email"
autocomplete="email"
class="form_input"/>
{:else if field.type === "current_password"}
<input bind:this={field.binding}
id="input_{field.name}"
name="{field.name}"
value="{field.default_value}"
type="password"
autocomplete="current-password"
class="form_input"/>
{:else if field.type === "new_password"}
<input bind:this={field.binding}
id="input_{field.name}"
name="{field.name}"
value="{field.default_value}"
type="password"
autocomplete="new-password"
class="form_input"/>
{:else if field.type === "captcha"}
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-theme="dark" data-sitekey="{field.captcha_site_key}"></div>
{:else if field.type === "radio"}
{#each field.radio_values as val}
<input bind:group={field.binding}
id="input_{field.name}_choice_{val}"
name="{field.name}"
value={val}
type="radio"
checked={val === field.default_value}/>
<label for="input_{field.name}_choice_{val}">{val}</label><br/>
{/each}
{/if}
</td>
value={val}
type="radio"
checked={val === field.default_value}/>
<label for="input_{field.name}_choice_{val}">{val}</label><br/>
{/each}
</div>
{/if}
</tr>
{/if}
{#if field.description}
<tr class="form">
<td colspan="2">
{@html field.description}
</td>
</tr>
<div>
{@html field.description}
</div>
{/if}
{#if field.separator}
<tr class="form">
<td colspan="2">
<hr/>
</td>
</tr>
<hr/>
{/if}
{/each}
<!-- Submit button -->
<tr class="form">
<td colspan="2" style="text-align: right;">
{#if config.submit_red}
<button type="submit" class="button_red" style="float: right;">{@html config.submit_label}</button>
{:else}
<button type="submit" class="button_highlight" style="float: right;">{@html config.submit_label}</button>
{/if}
</td>
</tr>
</table>
{#if config.submit_red}
<button type="submit" class="button_red">{@html config.submit_label}</button>
{:else}
<button type="submit" class="button_highlight">{@html config.submit_label}</button>
{/if}
</div>
</form>
<style>