diff options
Diffstat (limited to 'web/source/settings/components')
20 files changed, 456 insertions, 582 deletions
diff --git a/web/source/settings/components/authorization/index.jsx b/web/source/settings/components/authorization/index.jsx new file mode 100644 index 000000000..8bcf68e09 --- /dev/null +++ b/web/source/settings/components/authorization/index.jsx @@ -0,0 +1,76 @@ +/* + GoToSocial + Copyright (C) 2021-2023 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 Redux = require("react-redux"); + +const query = require("../../lib/query"); + +const Login = require("./login"); +const Loading = require("../loading"); +const { Error } = require("../error"); + +module.exports = function Authorization({ App }) { + const loginState = Redux.useSelector((state) => state.oauth.loginState); + const [hasStoredLogin] = React.useState(loginState != "none" && loginState != "logout"); + + const { isLoading, isSuccess, data: account, error } = query.useVerifyCredentialsQuery(undefined, { + skip: loginState == "none" || loginState == "logout" + }); + + let showLogin = true; + let content = null; + + if (isLoading && hasStoredLogin) { + showLogin = false; + + let loadingInfo; + if (loginState == "callback") { + loadingInfo = "Processing OAUTH callback."; + } else if (loginState == "login") { + loadingInfo = "Verifying stored login."; + } + + content = ( + <div> + <Loading /> {loadingInfo} + </div> + ); + } else if (error != undefined) { + content = ( + <div> + <Error error={error} /> + You can attempt logging in again below: + </div> + ); + } + + if (loginState == "login" && isSuccess) { + return <App account={account} />; + } else { + return ( + <section className="oauth"> + <h1>GoToSocial Settings</h1> + {content} + {showLogin && <Login />} + </section> + ); + } +};
\ No newline at end of file diff --git a/web/source/settings/components/authorization/login.jsx b/web/source/settings/components/authorization/login.jsx new file mode 100644 index 000000000..3115c5da2 --- /dev/null +++ b/web/source/settings/components/authorization/login.jsx @@ -0,0 +1,67 @@ +/* + GoToSocial + Copyright (C) 2021-2023 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 query = require("../../lib/query"); +const { useTextInput, useValue } = require("../../lib/form"); +const useFormSubmit = require("../../lib/form/submit"); +const { TextInput } = require("../form/inputs"); +const MutationButton = require("../form/mutation-button"); +const Loading = require("../loading"); + +module.exports = function Login({ }) { + const form = { + instance: useTextInput("instance", { + defaultValue: window.location.origin + }), + scopes: useValue("scopes", "user admin") + }; + + const [formSubmit, result] = useFormSubmit( + form, + query.useAuthorizeFlowMutation(), + { changedOnly: false } + ); + + if (result.isLoading) { + return ( + <div> + <Loading /> Checking instance. + </div> + ); + } else if (result.isSuccess) { + return ( + <div> + <Loading /> Redirecting to instance authorization page. + </div> + ); + } + + return ( + <form onSubmit={formSubmit}> + <TextInput + field={form.instance} + label="Instance" + /> + <MutationButton label="Login" result={result} /> + </form> + ); +};
\ No newline at end of file diff --git a/web/source/settings/components/back-button.jsx b/web/source/settings/components/back-button.jsx index d95f82a73..9e849dee0 100644 --- a/web/source/settings/components/back-button.jsx +++ b/web/source/settings/components/back-button.jsx @@ -21,7 +21,7 @@ const React = require("react"); const { Link } = require("wouter"); -module.exports = function BackButton({to}) { +module.exports = function BackButton({ to }) { return ( <Link to={to}> <a className="button">< back</a> diff --git a/web/source/settings/components/check-list.jsx b/web/source/settings/components/check-list.jsx new file mode 100644 index 000000000..1276d5dbf --- /dev/null +++ b/web/source/settings/components/check-list.jsx @@ -0,0 +1,58 @@ +/* + GoToSocial + Copyright (C) 2021-2023 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"); + +module.exports = function CheckList({ field, Component, header = " All", ...componentProps }) { + return ( + <div className="checkbox-list list"> + <label className="header"> + <input + ref={field.toggleAll.ref} + type="checkbox" + onChange={field.toggleAll.onChange} + checked={field.toggleAll.value === 1} + /> {header} + </label> + {Object.values(field.value).map((entry) => ( + <CheckListEntry + key={entry.key} + onChange={(value) => field.onChange(entry.key, value)} + entry={entry} + Component={Component} + componentProps={componentProps} + /> + ))} + </div> + ); +}; + +function CheckListEntry({ entry, onChange, Component, componentProps }) { + return ( + <label className="entry"> + <input + type="checkbox" + onChange={(e) => onChange({ checked: e.target.checked })} + checked={entry.checked} + /> + <Component entry={entry} onChange={onChange} {...componentProps} /> + </label> + ); +}
\ No newline at end of file diff --git a/web/source/settings/components/combo-box.jsx b/web/source/settings/components/combo-box.jsx index 07d4abb6c..aaa56daac 100644 --- a/web/source/settings/components/combo-box.jsx +++ b/web/source/settings/components/combo-box.jsx @@ -26,21 +26,21 @@ const { ComboboxPopover, } = require("ariakit/combobox"); -module.exports = function ComboBox({state, items, label, placeHolder, children}) { +module.exports = function ComboBox({ field, items, label, children, ...inputProps }) { return ( <div className="form-field combobox-wrapper"> <label> {label} <div className="row"> <Combobox - state={state} - placeholder={placeHolder} + state={field.state} className="combobox input" + {...inputProps} /> {children} </div> </label> - <ComboboxPopover state={state} className="popover"> + <ComboboxPopover state={field.state} className="popover"> {items.map(([key, value]) => ( <ComboboxItem className="combobox-item" key={key} value={key}> {value} diff --git a/web/source/settings/components/error.jsx b/web/source/settings/components/error.jsx index 5d808c467..bc64bf9ec 100644 --- a/web/source/settings/components/error.jsx +++ b/web/source/settings/components/error.jsx @@ -20,7 +20,7 @@ const React = require("react"); -module.exports = function ErrorFallback({error, resetErrorBoundary}) { +function ErrorFallback({ error, resetErrorBoundary }) { return ( <div className="error"> <p> @@ -28,7 +28,7 @@ module.exports = function ErrorFallback({error, resetErrorBoundary}) { <a href="https://github.com/superseriousbusiness/gotosocial/issues">GoToSocial issue tracker</a> {" or "} <a href="https://matrix.to/#/#gotosocial-help:superseriousbusiness.org">Matrix support room</a>. - <br/>Include the details below: + <br />Include the details below: </p> <pre> {error.name}: {error.message} @@ -41,4 +41,43 @@ module.exports = function ErrorFallback({error, resetErrorBoundary}) { </p> </div> ); -};
\ No newline at end of file +} + +function Error({ error }) { + /* eslint-disable-next-line no-console */ + console.error("Rendering error:", error); + let message; + + if (error.data != undefined) { // RTK Query error with data + if (error.status) { + message = (<> + <b>{error.status}:</b> {error.data.error} + {error.data.error_description && + <p> + {error.data.error_description} + </p> + } + </>); + } else { + message = error.data.error; + } + } else if (error.name != undefined || error.type != undefined) { // JS error + message = (<> + <b>{error.type && error.name}:</b> {error.message} + </>); + } else if (error.status && typeof error.error == "string") { + message = (<> + <b>{error.status}:</b> {error.error} + </>); + } else { + message = error.message ?? error; + } + + return ( + <div className="error"> + {message} + </div> + ); +} + +module.exports = { ErrorFallback, Error };
\ No newline at end of file diff --git a/web/source/settings/components/fake-profile.jsx b/web/source/settings/components/fake-profile.jsx index 8afccf2cc..c326605d9 100644 --- a/web/source/settings/components/fake-profile.jsx +++ b/web/source/settings/components/fake-profile.jsx @@ -19,24 +19,21 @@ "use strict"; const React = require("react"); -const Redux = require("react-redux"); - -module.exports = function FakeProfile({}) { - const account = Redux.useSelector(state => state.user.profile); +module.exports = function FakeProfile({ avatar, header, display_name, username, role }) { return ( // Keep in sync with web/template/profile.tmpl <div className="profile"> <div className="headerimage"> - <img className="headerpreview" src={account.header} alt={account.header ? `header image for ${account.username}` : "None set"} /> + <img className="headerpreview" src={header} alt={header ? `header image for ${username}` : "None set"} /> </div> <div className="basic"> <div id="profile-basic-filler2"></div> - <span className="avatar"><img className="avatarpreview" src={account.avatar} alt={account.avatar ? `avatar image for ${account.username}` : "None set"} /></span> - <div className="displayname">{account.display_name.trim().length > 0 ? account.display_name : account.username}</div> + <span className="avatar"><img className="avatarpreview" src={avatar} alt={avatar ? `avatar image for ${username}` : "None set"} /></span> + <div className="displayname">{display_name.trim().length > 0 ? display_name : username}</div> <div className="usernamecontainer"> - <div className="username"><span>@{account.username}</span></div> - {(account.role && account.role != "user") && - <div className={`role ${account.role}`}>{account.role}</div> + <div className="username"><span>@{username}</span></div> + {(role && role != "user") && + <div className={`role ${role}`}>{role}</div> } </div> </div> diff --git a/web/source/settings/components/fake-toot.jsx b/web/source/settings/components/fake-toot.jsx index 836ac62f8..b6e05154e 100644 --- a/web/source/settings/components/fake-toot.jsx +++ b/web/source/settings/components/fake-toot.jsx @@ -19,16 +19,21 @@ "use strict"; const React = require("react"); -const Redux = require("react-redux"); -module.exports = function FakeToot({children}) { - const account = Redux.useSelector((state) => state.user.profile); +const query = require("../lib/query"); + +module.exports = function FakeToot({ children }) { + const { data: account = { + avatar: "/assets/default_avatars/GoToSocial_icon1.png", + display_name: "", + username: "" + } } = query.useVerifyCredentialsQuery(); return ( <div className="toot expanded"> <div className="contentgrid"> <span className="avatar"> - <img src={account.avatar} alt=""/> + <img src={account.avatar} alt="" /> </span> <span className="displayname">{account.display_name.trim().length > 0 ? account.display_name : account.username}</span> <span className="username">@{account.username}</span> diff --git a/web/source/settings/components/form-fields.jsx b/web/source/settings/components/form-fields.jsx deleted file mode 100644 index 7b393b3ef..000000000 --- a/web/source/settings/components/form-fields.jsx +++ /dev/null @@ -1,167 +0,0 @@ -/* - GoToSocial - Copyright (C) 2021-2023 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 Redux = require("react-redux"); -const d = require("dotty"); -const prettierBytes = require("prettier-bytes"); - -function eventListeners(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, withPreview) { - return function (e) { - let file = e.target.files[0]; - if (withPreview) { - let old = d.get(obj, key); - if (old != undefined) { - URL.revokeObjectURL(old); // no error revoking a non-Object URL as provided by instance - } - let objectURL = URL.createObjectURL(file); - dispatch(setter([key, objectURL])); - } - dispatch(setter([`${key}File`, file])); - }; - } - }; -} - -function get(state, id, defaultVal) { - let value; - if (id.includes(".")) { - value = d.get(state, id); - } else { - value = state[id]; - } - if (value == undefined) { - value = defaultVal; - } - return value; -} - -// function removeFile(name) { -// return function(e) { -// e.preventDefault(); -// dispatch(user.setProfileVal([name, ""])); -// dispatch(user.setProfileVal([`${name}File`, ""])); -// }; -// } - -module.exports = { - formFields: function formFields(setter, selector) { - function FormField({ - type, id, name, className="", placeHolder="", fileType="", children=null, - options=null, inputProps={}, withPreview=true, showSize=false, maxSize=Infinity - }) { - const dispatch = Redux.useDispatch(); - let state = Redux.useSelector(selector); - let { - onTextChange, - onCheckChange, - onFileChange - } = eventListeners(dispatch, setter, state); - - let field; - let defaultLabel = true; - if (type == "text") { - field = <input type="text" id={id} value={get(state, id, "")} placeholder={placeHolder} className={className} onChange={onTextChange(id)} {...inputProps}/>; - } else if (type == "textarea") { - field = <textarea type="text" id={id} value={get(state, id, "")} placeholder={placeHolder} className={className} onChange={onTextChange(id)} rows={8} {...inputProps}/>; - } else if (type == "checkbox") { - field = <input type="checkbox" id={id} checked={get(state, id, false)} className={className} onChange={onCheckChange(id)} {...inputProps}/>; - } else if (type == "select") { - field = ( - <select id={id} value={get(state, id, "")} className={className} onChange={onTextChange(id)} {...inputProps}> - {options} - </select> - ); - } else if (type == "file") { - defaultLabel = false; - let file = get(state, `${id}File`); - - let size = null; - if (showSize && file) { - size = `(${prettierBytes(file.size)})`; - - if (file.size > maxSize) { - size = <span className="error-text">{size}</span>; - } - } - - field = ( - <> - <label htmlFor={id} className="file-input button">Browse</label> - <span className="form-info"> - {file ? file.name : "no file selected"} {size} - </span> - {/* <a onClick={removeFile("header")}>remove</a> */} - <input className="hidden" id={id} type="file" accept={fileType} onChange={onFileChange(id, withPreview)} {...inputProps}/> - </> - ); - } else { - defaultLabel = false; - field = `unsupported FormField ${type}, this is a developer error`; - } - - let label = <label htmlFor={id}>{name}</label>; - return ( - <div className={`form-field ${type}`}> - {defaultLabel ? label : null} {field} - {children} - </div> - ); - } - - return { - TextInput: function(props) { - return <FormField type="text" {...props} />; - }, - - TextArea: function(props) { - return <FormField type="textarea" {...props} />; - }, - - Checkbox: function(props) { - return <FormField type="checkbox" {...props} />; - }, - - Select: function(props) { - return <FormField type="select" {...props} />; - }, - - File: function(props) { - return <FormField type="file" {...props} />; - }, - }; - }, - - eventListeners -};
\ No newline at end of file diff --git a/web/source/settings/components/form/combobox.jsx b/web/source/settings/components/form/combobox.jsx deleted file mode 100644 index aeee38fc2..000000000 --- a/web/source/settings/components/form/combobox.jsx +++ /dev/null @@ -1,41 +0,0 @@ -/* - GoToSocial - Copyright (C) 2021-2023 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 { useComboboxState } = require("ariakit/combobox"); - -module.exports = function useComboBoxInput({name, Name}, {validator, defaultValue} = {}) { - const state = useComboboxState({ - defaultValue, - gutter: 0, - sameWidth: true - }); - - function reset() { - state.setValue(""); - } - - return [ - state, - reset, - { - [name]: state.value, - } - ]; -};
\ No newline at end of file diff --git a/web/source/settings/components/form/file.jsx b/web/source/settings/components/form/file.jsx deleted file mode 100644 index 4dd0e5162..000000000 --- a/web/source/settings/components/form/file.jsx +++ /dev/null @@ -1,78 +0,0 @@ -/* - GoToSocial - Copyright (C) 2021-2023 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 prettierBytes = require("prettier-bytes"); - -module.exports = function useFileInput({name, _Name}, { - withPreview, - maxSize, - initialInfo = "no file selected" -}) { - const [file, setFile] = React.useState(); - const [imageURL, setImageURL] = React.useState(); - const [info, setInfo] = React.useState(); - - function onChange(e) { - let file = e.target.files[0]; - setFile(file); - - URL.revokeObjectURL(imageURL); - - if (file != undefined) { - if (withPreview) { - setImageURL(URL.createObjectURL(file)); - } - - let size = prettierBytes(file.size); - if (maxSize && file.size > maxSize) { - size = <span className="error-text">{size}</span>; - } - - setInfo(<> - {file.name} ({size}) - </>); - } else { - setInfo(); - } - } - - function reset() { - URL.revokeObjectURL(imageURL); - setImageURL(); - setFile(); - setInfo(); - } - - return [ - onChange, - reset, - { - [name]: file, - [`${name}URL`]: imageURL, - [`${name}Info`]: <span className="form-info"> - {info - ? info - : initialInfo - } - </span> - } - ]; -};
\ No newline at end of file diff --git a/web/source/settings/components/form/index.js b/web/source/settings/components/form/index.js deleted file mode 100644 index a9f333e0e..000000000 --- a/web/source/settings/components/form/index.js +++ /dev/null @@ -1,37 +0,0 @@ -/* - GoToSocial - Copyright (C) 2021-2023 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"; - -function capitalizeFirst(str) { - return str.slice(0,1).toUpperCase()+str.slice(1); -} - -function makeHook(func) { - return (name, ...args) => func({ - name, - Name: capitalizeFirst(name) - }, - ...args); -} - -module.exports = { - useTextInput: makeHook(require("./text")), - useFileInput: makeHook(require("./file")), - useComboBoxInput: makeHook(require("./combobox")) -};
\ No newline at end of file diff --git a/web/source/settings/components/form/inputs.jsx b/web/source/settings/components/form/inputs.jsx new file mode 100644 index 000000000..eef375ee8 --- /dev/null +++ b/web/source/settings/components/form/inputs.jsx @@ -0,0 +1,141 @@ +/* + GoToSocial + Copyright (C) 2021-2023 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"); + +function TextInput({ label, field, ...inputProps }) { + const { onChange, value, ref } = field; + + return ( + <div className="form-field text"> + <label> + {label} + <input + type="text" + {...{ onChange, value, ref }} + {...inputProps} + /> + </label> + </div> + ); +} + +function TextArea({ label, field, ...inputProps }) { + const { onChange, value, ref } = field; + + return ( + <div className="form-field textarea"> + <label> + {label} + <textarea + type="text" + {...{ onChange, value, ref }} + {...inputProps} + /> + </label> + </div> + ); +} + +function FileInput({ label, field, ...inputProps }) { + const { onChange, ref, infoComponent } = field; + + return ( + <div className="form-field file"> + <label> + <div className="label">{label}</div> + <div className="file-input button">Browse</div> + {infoComponent} + {/* <a onClick={removeFile("header")}>remove</a> */} + <input + type="file" + className="hidden" + {...{ onChange, ref }} + {...inputProps} + /> + </label> + </div> + ); +} + +function Checkbox({ label, field, ...inputProps }) { + const { onChange, value } = field; + + return ( + <div className="form-field checkbox"> + <label> + <input + type="checkbox" + checked={value} + onChange={onChange} + {...inputProps} + /> {label} + </label> + </div> + ); +} + +function Select({ label, field, options, ...inputProps }) { + const { onChange, value, ref } = field; + + return ( + <div className="form-field select"> + <label> + {label} + <select + {...{ onChange, value, ref }} + {...inputProps} + > + {options} + </select> + </label> + </div> + ); +} + +function RadioGroup({ field, label, ...inputProps }) { + return ( + <div className="form-field radio"> + {Object.entries(field.options).map(([value, radioLabel]) => ( + <label key={value}> + <input + type="radio" + name={field.name} + value={value} + checked={field.value == value} + onChange={field.onChange} + {...inputProps} + /> + {radioLabel} + </label> + ))} + {label} + </div> + ); +} + +module.exports = { + TextInput, + TextArea, + FileInput, + Checkbox, + Select, + RadioGroup +};
\ No newline at end of file diff --git a/web/source/settings/components/form/mutation-button.jsx b/web/source/settings/components/form/mutation-button.jsx new file mode 100644 index 000000000..97bcdf08d --- /dev/null +++ b/web/source/settings/components/form/mutation-button.jsx @@ -0,0 +1,49 @@ +/* + GoToSocial + Copyright (C) 2021-2023 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 { Error } = require("../error"); + +module.exports = function MutationButton({ label, result, disabled, showError = true, className = "", ...inputProps }) { + let iconClass = ""; + const targetsThisButton = result.action == inputProps.name; // can also both be undefined, which is correct + + if (targetsThisButton) { + if (result.isLoading) { + iconClass = "fa-spin fa-refresh"; + } else if (result.isSuccess) { + iconClass = "fa-check fadeout"; + } + } + + return (<div> + {(showError && targetsThisButton && result.error) && + <Error error={result.error} /> + } + <button type="submit" className={"with-icon " + className} disabled={result.isLoading || disabled} {...inputProps}> + <i className={`fa fa-fw ${iconClass}`} aria-hidden="true"></i> + {(targetsThisButton && result.isLoading) + ? "Processing..." + : label + } + </button> + </div> + ); +};
\ No newline at end of file diff --git a/web/source/settings/components/form/text.jsx b/web/source/settings/components/form/text.jsx deleted file mode 100644 index 3cd7e2d25..000000000 --- a/web/source/settings/components/form/text.jsx +++ /dev/null @@ -1,56 +0,0 @@ -/* - GoToSocial - Copyright (C) 2021-2023 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"); - -module.exports = function useTextInput({name, Name}, {validator, defaultValue=""} = {}) { - const [text, setText] = React.useState(defaultValue); - const [valid, setValid] = React.useState(true); - const textRef = React.useRef(null); - - function onChange(e) { - let input = e.target.value; - setText(input); - } - - function reset() { - setText(""); - } - - React.useEffect(() => { - if (validator) { - let res = validator(text); - setValid(res == ""); - textRef.current.setCustomValidity(res); - textRef.current.reportValidity(); - } - }, [text, textRef, validator]); - - return [ - onChange, - reset, - { - [name]: text, - [`${name}Ref`]: textRef, - [`set${Name}`]: setText, - [`${name}Valid`]: valid - } - ]; -};
\ No newline at end of file diff --git a/web/source/settings/components/loading.jsx b/web/source/settings/components/loading.jsx index f5648285b..a278e6466 100644 --- a/web/source/settings/components/loading.jsx +++ b/web/source/settings/components/loading.jsx @@ -22,6 +22,6 @@ const React = require("react"); module.exports = function Loading() { return ( - <i className="fa fa-spin fa-refresh" aria-label="Loading" title="Loading"/> + <i className="fa fa-spin fa-refresh loading-icon" aria-label="Loading" title="Loading" /> ); };
\ No newline at end of file diff --git a/web/source/settings/components/login.jsx b/web/source/settings/components/login.jsx deleted file mode 100644 index 4774423fc..000000000 --- a/web/source/settings/components/login.jsx +++ /dev/null @@ -1,102 +0,0 @@ -/* - GoToSocial - Copyright (C) 2021-2023 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 Promise = require("bluebird"); -const React = require("react"); -const Redux = require("react-redux"); - -const { setInstance } = require("../redux/reducers/oauth").actions; -const api = require("../lib/api"); - -module.exports = function Login({error}) { - const dispatch = Redux.useDispatch(); - const [ instanceField, setInstanceField ] = React.useState(""); - const [ errorMsg, setErrorMsg ] = React.useState(); - const instanceFieldRef = React.useRef(""); - - React.useEffect(() => { - // check if current domain runs an instance - let currentDomain = window.location.origin; - Promise.try(() => { - return dispatch(api.instance.fetchWithoutStore(currentDomain)); - }).then(() => { - if (instanceFieldRef.current.length == 0) { // user hasn't started typing yet - dispatch(setInstance(currentDomain)); - instanceFieldRef.current = currentDomain; - setInstanceField(currentDomain); - } - }).catch((e) => { - console.log("Current domain does not host a valid instance: ", e); - }); - }, []); - - function tryInstance() { - let domain = instanceFieldRef.current; - Promise.try(() => { - return dispatch(api.instance.fetchWithoutStore(domain)).catch((e) => { - // TODO: clearer error messages for common errors - console.log(e); - throw e; - }); - }).then(() => { - dispatch(setInstance(domain)); - - return dispatch(api.oauth.register()).catch((e) => { - console.log(e); - throw e; - }); - }).then(() => { - return dispatch(api.oauth.authorize()); // will send user off-page - }).catch((e) => { - setErrorMsg( - <> - <b>{e.type}</b> - <span>{e.message}</span> - </> - ); - }); - } - - function updateInstanceField(e) { - if (e.key == "Enter") { - tryInstance(instanceField); - } else { - setInstanceField(e.target.value); - instanceFieldRef.current = e.target.value; - } - } - - return ( - <section className="login"> - <h1>OAUTH Login:</h1> - {error} - <form onSubmit={(e) => e.preventDefault()}> - <label htmlFor="instance">Instance: </label> - <input value={instanceField} onChange={updateInstanceField} id="instance"/> - {errorMsg && - <div className="error"> - {errorMsg} - </div> - } - <button onClick={tryInstance}>Authenticate</button> - </form> - </section> - ); -};
\ No newline at end of file diff --git a/web/source/settings/components/mutation-button.jsx b/web/source/settings/components/mutation-button.jsx deleted file mode 100644 index 2d0f2a2b4..000000000 --- a/web/source/settings/components/mutation-button.jsx +++ /dev/null @@ -1,42 +0,0 @@ -/* - GoToSocial - Copyright (C) 2021-2023 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"); - -module.exports = function MutateButton({text, result}) { - let buttonText = text; - - if (result.isLoading) { - buttonText = "Processing..."; - } - - return (<div> - {result.error && - <section className="error">{result.error.status}: {result.error.data.error}</section> - } - <input - className="button" - type="submit" - disabled={result.isLoading} - value={buttonText} - /> - </div> - ); -};
\ No newline at end of file diff --git a/web/source/settings/components/nav-button.jsx b/web/source/settings/components/nav-button.jsx index 127193471..ef4717c89 100644 --- a/web/source/settings/components/nav-button.jsx +++ b/web/source/settings/components/nav-button.jsx @@ -21,7 +21,7 @@ const React = require("react"); const { Link, useRoute } = require("wouter"); -module.exports = function NavButton({href, name}) { +module.exports = function NavButton({ href, name }) { const [isActive] = useRoute(`${href}/:anything?`); return ( <Link href={href}> diff --git a/web/source/settings/components/submit.jsx b/web/source/settings/components/submit.jsx deleted file mode 100644 index 2a1b864e3..000000000 --- a/web/source/settings/components/submit.jsx +++ /dev/null @@ -1,35 +0,0 @@ -/* - GoToSocial - Copyright (C) 2021-2023 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"); - -module.exports = function Submit({onClick, label, errorMsg, statusMsg}) { - return ( - <div className="messagebutton"> - <button type="submit" onClick={onClick}>{ label }</button> - {errorMsg.length > 0 && - <div className="error accent">{errorMsg}</div> - } - {statusMsg.length > 0 && - <div className="accent">{statusMsg}</div> - } - </div> - ); -}; |