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

46
res/static/style/layout.css
View File

@@ -320,14 +320,36 @@ p {
margin: 1em 0; margin: 1em 0;
} }
/* Forms*/
.form { .form {
display: flex;
flex-direction: column;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
text-align: left; text-align: initial;
max-width: 30em; max-width: 500px;
width: 100%; width: 100%;
} }
.form>* {
display: block;
margin-left: 3px;
margin-right: 3px;
}
.form>label {
margin-top: 1em;
}
.form>input[type="submit"],
.form>button[type="submit"] {
align-self: end;
margin-top: 1em;
}
/* Tables */
table:not(.form) { table:not(.form) {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
@@ -344,7 +366,7 @@ table:not(.form) {
min-width: 100%; min-width: 100%;
} }
tr:not(.form) { tr {
border-bottom: 1px var(--separator) solid; border-bottom: 1px var(--separator) solid;
} }
@@ -353,16 +375,6 @@ tr>th {
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
} }
@media(max-width: 30em) {
/* Forms will be stacked on small screens */
tr.form>td {
float: left;
width: 100%;
padding: 0.5em;
}
}
pre { pre {
padding: 10px; padding: 10px;
border-bottom: 1px var(--separator) solid; border-bottom: 1px var(--separator) solid;
@@ -416,12 +428,6 @@ details.request_patch {
background-color: rgba(128, 0, 255, 0.1); background-color: rgba(128, 0, 255, 0.1);
} }
/* Form fields */
.form_input {
width: 100%;
}
/* BUTTONS */ /* BUTTONS */
button, button,
.button, .button,
@@ -583,7 +589,7 @@ input[type="date"] {
border: none; border: none;
border-radius: 6px; border-radius: 6px;
background: var(--input_background); background: var(--input_background);
box-shadow: inset 1px 1px 2px -1px var(--shadow_color); /* box-shadow: inset 1px 1px 2px -1px var(--shadow_color); */
padding: 3px 5px; padding: 3px 5px;
color: var(--input_text); color: var(--input_text);
font-size: 1em; font-size: 1em;

57
res/template/fragments/form.html
View File

@@ -21,17 +21,11 @@
<!-- The invisible username field is so browsers know which user the form was for --> <!-- The invisible username field is so browsers know which user the form was for -->
<input type="text" autocomplete="username" value="{{.Username}}" style="display: none;" readonly="readonly"/> <input type="text" autocomplete="username" value="{{.Username}}" style="display: none;" readonly="readonly"/>
{{end}} {{end}}
<table class="form"> <div class="form">
{{range $field := .Fields}} {{range $field := .Fields}}
<tr class="form"> <label for="input_{{$field.Name}}">
{{if eq $field.Type "textarea"}} {{$field.Label}}
<td colspan="2"> </label>
{{$field.Label}}<br/>
<textarea id="input_{{$field.Name}}" name="{{$field.Name}}" class="form_input" style="width: 100%; height: 10em; resize: vertical;">{{$field.DefaultValue}}</textarea>
</td>
{{else}}
<td>{{$field.Label}}</td>
<td>
{{if eq $field.Type "text"}} {{if eq $field.Type "text"}}
<input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="text" class="form_input"/> <input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="text" class="form_input"/>
{{else if eq $field.Type "number"}} {{else if eq $field.Type "number"}}
@@ -44,6 +38,8 @@
<input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="password" autocomplete="current-password" class="form_input"/> <input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="password" autocomplete="current-password" class="form_input"/>
{{else if eq $field.Type "new-password"}} {{else if eq $field.Type "new-password"}}
<input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="password" autocomplete="new-password" class="form_input"/> <input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="password" autocomplete="new-password" class="form_input"/>
{{else if eq $field.Type "textarea"}}
<textarea id="input_{{$field.Name}}" name="{{$field.Name}}" class="form_input" style="width: 100%; height: 10em; resize: vertical;">{{$field.DefaultValue}}</textarea>
{{else if eq $field.Type "captcha"}} {{else if eq $field.Type "captcha"}}
<script src="https://www.google.com/recaptcha/api.js" async defer></script> <script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-theme="dark" data-sitekey="{{$field.CaptchaSiteKey}}"></div> <div class="g-recaptcha" data-theme="dark" data-sitekey="{{$field.CaptchaSiteKey}}"></div>
@@ -60,41 +56,24 @@
{{else if eq $field.Type "description"}} {{else if eq $field.Type "description"}}
{{$field.DefaultValue}} {{$field.DefaultValue}}
{{end}} {{end}}
</td> {{if ne $field.Description ""}}
{{end}} <div>
</tr>
{{if or (ne $field.Description "") (eq $field.Separator true)}}
<tr class="form">
<td colspan="2">
{{$field.Description}} {{$field.Description}}
{{if eq $field.Separator true}} </div>
<hr/>
{{end}}
</td>
</tr>
{{end}} {{end}}
{{end}} {{end}}
<tr class="form">
{{if eq .BackLink ""}}
<td colspan="2" style="text-align: right;">
{{if eq .SubmitRed true}} {{if eq .SubmitRed true}}
<input type="submit" value="{{.SubmitLabel}}" class="button_red" style="float: right;"/> <button type="submit" class="button_red">
<i class="icon">send</i>
{{.SubmitLabel}}
</button>
{{else}} {{else}}
<input type="submit" value="{{.SubmitLabel}}" class="button_highlight" style="float: right;"/> <button type="submit" class="button_highlight">
<i class="icon">send</i>
{{.SubmitLabel}}
</button>
{{end}} {{end}}
</td> </div>
{{else}}
<td colspan="2" style="text-align: left;">
<a href="{{.BackLink}}" class="button button_red" style="float: left;"/>Back</a>
{{if eq .SubmitRed true}}
<input type="submit" value="{{.SubmitLabel}}" class="button_red" style="float: right;"/>
{{else}}
<input type="submit" value="{{.SubmitLabel}}" class="button_highlight" style="float: right"/>
{{end}}
</td>
{{end}}
</tr>
</table>
</form> </form>
{{.PostFormHTML}} {{.PostFormHTML}}
{{end}} {{end}}

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

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

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

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

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

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

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

@@ -131,23 +131,12 @@ let handle_errors = (response) => {
{/if} {/if}
<table class="form"> <div class="form">
{#each config.fields as field} {#each config.fields as field}
<tr class="form"> {#if field.type !== "description"}
{#if field.type === "text_area"} <label for="input_{field.name}">
<td colspan="2">
{field.label} {field.label}
<br/> </label>
<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"} {#if field.type === "text"}
<input bind:this={field.binding} <input bind:this={field.binding}
id="input_{field.name}" id="input_{field.name}"
@@ -155,6 +144,13 @@ let handle_errors = (response) => {
value="{field.default_value}" value="{field.default_value}"
type="text" type="text"
class="form_input"/> 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"} {:else if field.type === "number"}
<input bind:this={field.binding} <input bind:this={field.binding}
id="input_{field.name}" id="input_{field.name}"
@@ -206,6 +202,7 @@ let handle_errors = (response) => {
<script src="https://www.google.com/recaptcha/api.js" async defer></script> <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> <div class="g-recaptcha" data-theme="dark" data-sitekey="{field.captcha_site_key}"></div>
{:else if field.type === "radio"} {:else if field.type === "radio"}
<div>
{#each field.radio_values as val} {#each field.radio_values as val}
<input bind:group={field.binding} <input bind:group={field.binding}
id="input_{field.name}_choice_{val}" id="input_{field.name}_choice_{val}"
@@ -215,37 +212,26 @@ let handle_errors = (response) => {
checked={val === field.default_value}/> checked={val === field.default_value}/>
<label for="input_{field.name}_choice_{val}">{val}</label><br/> <label for="input_{field.name}_choice_{val}">{val}</label><br/>
{/each} {/each}
</div>
{/if} {/if}
</td>
{/if} {/if}
</tr>
{#if field.description} {#if field.description}
<tr class="form"> <div>
<td colspan="2">
{@html field.description} {@html field.description}
</td> </div>
</tr>
{/if} {/if}
{#if field.separator} {#if field.separator}
<tr class="form">
<td colspan="2">
<hr/> <hr/>
</td>
</tr>
{/if} {/if}
{/each} {/each}
<!-- Submit button --> <!-- Submit button -->
<tr class="form">
<td colspan="2" style="text-align: right;">
{#if config.submit_red} {#if config.submit_red}
<button type="submit" class="button_red" style="float: right;">{@html config.submit_label}</button> <button type="submit" class="button_red">{@html config.submit_label}</button>
{:else} {:else}
<button type="submit" class="button_highlight" style="float: right;">{@html config.submit_label}</button> <button type="submit" class="button_highlight">{@html config.submit_label}</button>
{/if} {/if}
</td> </div>
</tr>
</table>
</form> </form>
<style> <style>

1
webcontroller/admin_panel.go
View File

@@ -18,7 +18,6 @@ func (wc *WebController) adminGlobalsForm(td *TemplateData, r *http.Request) (f
Name: "admin_globals", Name: "admin_globals",
Title: "Pixeldrain global configuration", Title: "Pixeldrain global configuration",
PreFormHTML: template.HTML("<p>Careful! The slightest typing error could bring the whole website down</p>"), PreFormHTML: template.HTML("<p>Careful! The slightest typing error could bring the whole website down</p>"),
BackLink: "/admin",
SubmitLabel: "Submit", SubmitLabel: "Submit",
} }

4
webcontroller/forms.go
View File

@@ -17,7 +17,6 @@ type Form struct {
Fields []Field Fields []Field
BackLink string // Empty for no back link
SubmitLabel string // Label for the submit button SubmitLabel string // Label for the submit button
SubmitRed bool // If the submit button should be red or green SubmitRed bool // If the submit button should be red or green
@@ -53,9 +52,6 @@ type Field struct {
// Text below the input field // Text below the input field
Description template.HTML Description template.HTML
// Separates fields with a horizontal rule
Separator bool
Type FieldType Type FieldType
// Only used when Type == FieldTypeCaptcha // Only used when Type == FieldTypeCaptcha

10
webcontroller/user_account.go
View File

@@ -99,7 +99,6 @@ func (wc *WebController) registerForm(td *TemplateData, r *http.Request) (f Form
Name: "username", Name: "username",
Label: "Username", Label: "Username",
Description: "used for logging into your account", Description: "used for logging into your account",
Separator: true,
Type: FieldTypeUsername, Type: FieldTypeUsername,
}, { }, {
Name: "email", Name: "email",
@@ -107,7 +106,6 @@ func (wc *WebController) registerForm(td *TemplateData, r *http.Request) (f Form
Description: `not required. your e-mail address will only be Description: `not required. your e-mail address will only be
used for password resets and important account used for password resets and important account
notifications`, notifications`,
Separator: true,
Type: FieldTypeEmail, Type: FieldTypeEmail,
}, { }, {
Name: "password", Name: "password",
@@ -119,7 +117,6 @@ func (wc *WebController) registerForm(td *TemplateData, r *http.Request) (f Form
Description: "you need to enter your password twice so we " + Description: "you need to enter your password twice so we " +
"can verify that no typing errors were made, which would " + "can verify that no typing errors were made, which would " +
"prevent you from logging into your new account", "prevent you from logging into your new account",
Separator: true,
Type: FieldTypeNewPassword, Type: FieldTypeNewPassword,
}, { }, {
Name: "recaptcha_response", Name: "recaptcha_response",
@@ -128,12 +125,10 @@ func (wc *WebController) registerForm(td *TemplateData, r *http.Request) (f Form
"are not an evil robot that is trying to flood the " + "are not an evil robot that is trying to flood the " +
"website with fake accounts. Please click the white box " + "website with fake accounts. Please click the white box " +
"to prove that you're not a robot", "to prove that you're not a robot",
Separator: true,
Type: FieldTypeCaptcha, Type: FieldTypeCaptcha,
CaptchaSiteKey: wc.captchaKey(), CaptchaSiteKey: wc.captchaKey(),
}, },
}, },
BackLink: "/",
SubmitLabel: "Register", SubmitLabel: "Register",
PostFormHTML: template.HTML("<p>Welcome to the club!</p>"), PostFormHTML: template.HTML("<p>Welcome to the club!</p>"),
} }
@@ -181,7 +176,6 @@ func (wc *WebController) loginForm(td *TemplateData, r *http.Request) (f Form) {
Type: FieldTypeCurrentPassword, Type: FieldTypeCurrentPassword,
}, },
}, },
BackLink: "/",
SubmitLabel: "Login", SubmitLabel: "Login",
PostFormHTML: template.HTML( PostFormHTML: template.HTML(
`<p>If you don't have a pixeldrain account yet, you can ` + `<p>If you don't have a pixeldrain account yet, you can ` +
@@ -240,19 +234,16 @@ func (wc *WebController) passwordResetForm(td *TemplateData, r *http.Request) (f
Label: "E-mail address", Label: "E-mail address",
Description: `we will send a password reset link to this e-mail Description: `we will send a password reset link to this e-mail
address`, address`,
Separator: true,
Type: FieldTypeEmail, Type: FieldTypeEmail,
}, { }, {
Name: "recaptcha_response", Name: "recaptcha_response",
Label: "Turing test (click the white box)", Label: "Turing test (click the white box)",
Description: "the reCaptcha turing test verifies that you " + Description: "the reCaptcha turing test verifies that you " +
"are not an evil robot that is trying hijack accounts", "are not an evil robot that is trying hijack accounts",
Separator: true,
Type: FieldTypeCaptcha, Type: FieldTypeCaptcha,
CaptchaSiteKey: wc.captchaKey(), CaptchaSiteKey: wc.captchaKey(),
}, },
}, },
BackLink: "/login",
SubmitLabel: "Submit", SubmitLabel: "Submit",
} }
@@ -287,7 +278,6 @@ func (wc *WebController) passwordResetConfirmForm(td *TemplateData, r *http.Requ
Description: "you need to enter your password twice so we " + Description: "you need to enter your password twice so we " +
"can verify that no typing errors were made, which would " + "can verify that no typing errors were made, which would " +
"prevent you from logging into your new account", "prevent you from logging into your new account",
Separator: true,
Type: FieldTypeNewPassword, Type: FieldTypeNewPassword,
}, },
}, },