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;
}
/* Forms*/
.form {
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
text-align: left;
max-width: 30em;
text-align: initial;
max-width: 500px;
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) {
border-collapse: collapse;
width: 100%;
@@ -344,7 +366,7 @@ table:not(.form) {
min-width: 100%;
}
tr:not(.form) {
tr {
border-bottom: 1px var(--separator) solid;
}
@@ -353,16 +375,6 @@ tr>th {
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 {
padding: 10px;
border-bottom: 1px var(--separator) solid;
@@ -416,12 +428,6 @@ details.request_patch {
background-color: rgba(128, 0, 255, 0.1);
}
/* Form fields */
.form_input {
width: 100%;
}
/* BUTTONS */
button,
.button,
@@ -583,7 +589,7 @@ input[type="date"] {
border: none;
border-radius: 6px;
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;
color: var(--input_text);
font-size: 1em;

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

@@ -21,80 +21,59 @@
<!-- 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"/>
{{end}}
<table class="form">
<div class="form">
{{range $field := .Fields}}
<tr class="form">
{{if eq $field.Type "textarea"}}
<td colspan="2">
{{$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"}}
<input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="text" class="form_input"/>
{{else if eq $field.Type "number"}}
<input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="number" class="form_input"/>
{{else if eq $field.Type "username"}}
<input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="text" autocomplete="username" class="form_input"/>
{{else if eq $field.Type "email"}}
<input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="email" autocomplete="email" class="form_input"/>
{{else if eq $field.Type "current-password"}}
<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"}}
<input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="password" autocomplete="new-password" class="form_input"/>
{{else if eq $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.CaptchaSiteKey}}"></div>
{{else if eq $field.Type "radio"}}
{{ range $val := $field.RadioValues}}
<input
id="input_{{$field.Name}}_choice_{{$val}}"
name="{{$field.Name}}"
value="{{$val}}"
type="radio"
{{if eq $val $field.DefaultValue}}checked="checked"{{end}}/>
<label for="input_{{$field.Name}}_choice_{{$val}}">{{$val}}</label><br/>
{{ end }}
{{else if eq $field.Type "description"}}
{{$field.DefaultValue}}
{{end}}
</td>
{{end}}
</tr>
{{if or (ne $field.Description "") (eq $field.Separator true)}}
<tr class="form">
<td colspan="2">
{{$field.Description}}
{{if eq $field.Separator true}}
<hr/>
{{end}}
</td>
</tr>
<label for="input_{{$field.Name}}">
{{$field.Label}}
</label>
{{if eq $field.Type "text"}}
<input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="text" class="form_input"/>
{{else if eq $field.Type "number"}}
<input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="number" class="form_input"/>
{{else if eq $field.Type "username"}}
<input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="text" autocomplete="username" class="form_input"/>
{{else if eq $field.Type "email"}}
<input id="input_{{$field.Name}}" name="{{$field.Name}}" value="{{$field.DefaultValue}}" type="email" autocomplete="email" class="form_input"/>
{{else if eq $field.Type "current-password"}}
<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"}}
<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"}}
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-theme="dark" data-sitekey="{{$field.CaptchaSiteKey}}"></div>
{{else if eq $field.Type "radio"}}
{{ range $val := $field.RadioValues}}
<input
id="input_{{$field.Name}}_choice_{{$val}}"
name="{{$field.Name}}"
value="{{$val}}"
type="radio"
{{if eq $val $field.DefaultValue}}checked="checked"{{end}}/>
<label for="input_{{$field.Name}}_choice_{{$val}}">{{$val}}</label><br/>
{{ end }}
{{else if eq $field.Type "description"}}
{{$field.DefaultValue}}
{{end}}
{{if ne $field.Description ""}}
<div>
{{$field.Description}}
</div>
{{end}}
{{end}}
<tr class="form">
{{if eq .BackLink ""}}
<td colspan="2" style="text-align: right;">
{{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>
{{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>
{{if eq .SubmitRed true}}
<button type="submit" class="button_red">
<i class="icon">send</i>
{{.SubmitLabel}}
</button>
{{else}}
<button type="submit" class="button_highlight">
<i class="icon">send</i>
{{.SubmitLabel}}
</button>
{{end}}
</div>
</form>
{{.PostFormHTML}}
{{end}}

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>

1
webcontroller/admin_panel.go
View File

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

4
webcontroller/forms.go
View File

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

18
webcontroller/user_account.go
View File

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