rafaelcaricio/gotosocial
1
0
Fork 0
forked from mirrors/gotosocial
Code Issues Pull requests Packages Projects Releases Wiki Activity

refactor/cleanup forms

Browse source
This commit is contained in:
f0x 2022-09-13 22:47:23 +02:00
parent 98b4301d52
commit fac0e28afb
5 changed files with 35 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
web/source/settings-panel/components/form-fields.jsx
View file

@ -71,7 +71,7 @@ function get(state, id) {
module.exports = {
formFields: function formFields(setter, selector) {
function FormField({type, id, name, className="", placeHolder="", fileType="", children=null}) {
function FormField({type, id, name, className="", placeHolder="", fileType="", children=null, options={}}) {
const dispatch = Redux.useDispatch();
let state = Redux.useSelector(selector);
let {
@ -88,6 +88,12 @@ module.exports = {
field = <textarea type="text" id={id} value={get(state, id)} placeholder={placeHolder} className={className} onChange={onTextChange(id)}/>;
} else if (type == "checkbox") {
field = <input type="checkbox" id={id} checked={get(state, id)} className={className} onChange={onCheckChange(id)}/>;
} else if (type == "select") {
field = (
<select id={id} checked={get(state, id)} className={className} onChange={onTextChange(id)}>
{options}
</select>
);
} else if (type == "file") {
defaultLabel = false;
let file = get(state, `${id}File`);
@ -128,6 +134,10 @@ module.exports = {
return <FormField type="checkbox" {...props} />;
},
Select: function(props) {
return <FormField type="select" {...props} />;
},
File: function(props) {
return <FormField type="file" {...props} />;
},

50
web/source/settings-panel/lib/form-fields.js
View file

@ -1,50 +0,0 @@
/*
GoToSocial
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
"use strict";
const d = require("dotty");
module.exports = function(dispatch, setter, obj) {
return {
onTextChange: function (key) {
return function (e) {
dispatch(setter([key, e.target.value]));
};
},
onCheckChange: function (key) {
return function (e) {
dispatch(setter([key, e.target.checked]));
};
},
onFileChange: function (key) {
return function (e) {
let old = d.get(obj, key);
if (old != undefined) {
URL.revokeObjectURL(old); // no error revoking a non-Object URL as provided by instance
}
let file = e.target.files[0];
let objectURL = URL.createObjectURL(file);
dispatch(setter([key, objectURL]));
dispatch(setter([`${key}File`, file]));
};
}
};
};

2
web/source/settings-panel/user/profile.js
View file

@ -43,8 +43,6 @@ module.exports = function UserProfile() {
const allowCustomCSS = instance.configuration.accounts.allow_custom_css;
const { onTextChange, onCheckChange, onFileChange } = formFields(dispatch, user.setProfileVal, account);
const [errorMsg, setError] = React.useState("");
const [statusMsg, setStatus] = React.useState("");

26
web/source/settings-panel/user/security.js
View file

@ -1,26 +0,0 @@
/*
GoToSocial
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
"use strict";
const React = require("react");
const Promise = require("bluebird");
const Redux = require("react-redux");
const Submit = require("../../lib/submit");
const api = require("../../lib");

50
web/source/settings-panel/user/settings.js
View file

@ -23,17 +23,18 @@ const React = require("react");
const Redux = require("react-redux");
const api = require("../lib/api");
const formFields = require("../lib/form-fields");
const user = require("../redux/reducers/user").actions;
const Languages = require("../components/languages");
const Submit = require("../components/submit");
const {
Checkbox,
Select,
} = require("../components/form-fields").formFields(user.setProfileVal, (state) => state.user.profile);
module.exports = function UserSettings() {
const dispatch = Redux.useDispatch();
const account = Redux.useSelector(state => state.user.settings);
const { onTextChange, onCheckChange } = formFields(dispatch, user.setSettingsVal, account);
const [errorMsg, setError] = React.useState("");
const [statusMsg, setStatus] = React.useState("");
@ -54,42 +55,39 @@ module.exports = function UserSettings() {
return (
<div className="user-settings">
<h1>Post settings</h1>
<div className="labelselect">
<label htmlFor="language">Default post language</label>
<select id="language" autoComplete="language" value={account.source.language.toUpperCase()} onChange={onTextChange("source.language")}>
<Languages />
</select>
</div>
<div className="labelselect">
<label htmlFor="privacy">Default post privacy</label>
<select id="privacy" value={account.source.privacy} onChange={onTextChange("source.privacy")}>
<Select id="language" name="Default post language">
<Languages/>
</Select>
<Select id="privacy" name="Default post privacy" options={
<>
<option value="private">Private / followers-only)</option>
<option value="unlisted">Unlisted</option>
<option value="public">Public</option>
</select>
</>
}>
<a href="https://docs.gotosocial.org/en/latest/user_guide/posts/#privacy-settings" target="_blank" className="moreinfolink" rel="noreferrer">Learn more about post privacy settings (opens in a new tab)</a>
</div>
<div className="labelselect">
<label htmlFor="format">Default post format</label>
<select id="format" value={account.source.format} onChange={onTextChange("source.format")}>
</Select>
<Select id="format" name="Default post format" options={
<>
<option value="plain">Plain (default)</option>
<option value="markdown">Markdown</option>
</select>
</>
}>
<a href="https://docs.gotosocial.org/en/latest/user_guide/posts/#input-types" target="_blank" className="moreinfolink" rel="noreferrer">Learn more about post format settings (opens in a new tab)</a>
</div>
<div className="labelcheckbox">
<label htmlFor="sensitive">Mark my posts as sensitive by default</label>
<input id="sensitive" type="checkbox" checked={account.source.sensitive} onChange={onCheckChange("source.sensitive")}/>
</div>
<Submit onClick={submit} label="Save post settings" errorMsg={errorMsg} statusMsg={statusMsg}/>
</Select>
<Checkbox
id="sensitive"
name="Mark my posts as sensitive by default"
/>
<Submit onClick={submit} label="Save post settings" errorMsg={errorMsg} statusMsg={statusMsg}/>
<hr/>
<PasswordChange/>
</div>
);
};
function PasswordChange({oauth}) {
function PasswordChange() {
const dispatch = Redux.useDispatch();
const [errorMsg, setError] = React.useState("");