diff options
Diffstat (limited to 'web/source/settings-panel/components')
| -rw-r--r-- | web/source/settings-panel/components/error.jsx | 45 | ||||
| -rw-r--r-- | web/source/settings-panel/components/fake-toot.jsx | 43 | ||||
| -rw-r--r-- | web/source/settings-panel/components/form-fields.jsx | 167 | ||||
| -rw-r--r-- | web/source/settings-panel/components/languages.jsx | 98 | ||||
| -rw-r--r-- | web/source/settings-panel/components/login.jsx | 102 | ||||
| -rw-r--r-- | web/source/settings-panel/components/nav-button.jsx | 33 | ||||
| -rw-r--r-- | web/source/settings-panel/components/submit.jsx | 35 |
7 files changed, 523 insertions, 0 deletions
diff --git a/web/source/settings-panel/components/error.jsx b/web/source/settings-panel/components/error.jsx new file mode 100644 index 000000000..13dc686b7 --- /dev/null +++ b/web/source/settings-panel/components/error.jsx @@ -0,0 +1,45 @@ +/* + 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 Promise = require("bluebird"); +const React = require("react"); + +module.exports = function ErrorFallback({error, resetErrorBoundary}) { + return ( + <div className="error"> + <p> + {"An error occured, please report this on the "} + <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: + </p> + <pre> + {error.name}: {error.message} + </pre> + <pre> + {error.stack} + </pre> + <p> + <button onClick={resetErrorBoundary}>Try again</button> or <a href="">refresh the page</a> + </p> + </div> + ); +};
\ No newline at end of file diff --git a/web/source/settings-panel/components/fake-toot.jsx b/web/source/settings-panel/components/fake-toot.jsx new file mode 100644 index 000000000..f79e24eb9 --- /dev/null +++ b/web/source/settings-panel/components/fake-toot.jsx @@ -0,0 +1,43 @@ +/* + 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 Redux = require("react-redux"); + +module.exports = function FakeToot({children}) { + const account = Redux.useSelector((state) => state.user.profile); + + return ( + <div className="toot expanded"> + <div className="contentgrid"> + <span className="avatar"> + <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> + <div className="text"> + <div className="content"> + {children} + </div> + </div> + </div> + </div> + ); +};
\ No newline at end of file diff --git a/web/source/settings-panel/components/form-fields.jsx b/web/source/settings-panel/components/form-fields.jsx new file mode 100644 index 000000000..cb402c3b2 --- /dev/null +++ b/web/source/settings-panel/components/form-fields.jsx @@ -0,0 +1,167 @@ +/* + 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 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> + {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-panel/components/languages.jsx b/web/source/settings-panel/components/languages.jsx new file mode 100644 index 000000000..1522495da --- /dev/null +++ b/web/source/settings-panel/components/languages.jsx @@ -0,0 +1,98 @@ +/* + 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"); + +module.exports = function Languages() { + return <React.Fragment> + <option value="AF">Afrikaans</option> + <option value="SQ">Albanian</option> + <option value="AR">Arabic</option> + <option value="HY">Armenian</option> + <option value="EU">Basque</option> + <option value="BN">Bengali</option> + <option value="BG">Bulgarian</option> + <option value="CA">Catalan</option> + <option value="KM">Cambodian</option> + <option value="ZH">Chinese (Mandarin)</option> + <option value="HR">Croatian</option> + <option value="CS">Czech</option> + <option value="DA">Danish</option> + <option value="NL">Dutch</option> + <option value="EN">English</option> + <option value="ET">Estonian</option> + <option value="FJ">Fiji</option> + <option value="FI">Finnish</option> + <option value="FR">French</option> + <option value="KA">Georgian</option> + <option value="DE">German</option> + <option value="EL">Greek</option> + <option value="GU">Gujarati</option> + <option value="HE">Hebrew</option> + <option value="HI">Hindi</option> + <option value="HU">Hungarian</option> + <option value="IS">Icelandic</option> + <option value="ID">Indonesian</option> + <option value="GA">Irish</option> + <option value="IT">Italian</option> + <option value="JA">Japanese</option> + <option value="JW">Javanese</option> + <option value="KO">Korean</option> + <option value="LA">Latin</option> + <option value="LV">Latvian</option> + <option value="LT">Lithuanian</option> + <option value="MK">Macedonian</option> + <option value="MS">Malay</option> + <option value="ML">Malayalam</option> + <option value="MT">Maltese</option> + <option value="MI">Maori</option> + <option value="MR">Marathi</option> + <option value="MN">Mongolian</option> + <option value="NE">Nepali</option> + <option value="NO">Norwegian</option> + <option value="FA">Persian</option> + <option value="PL">Polish</option> + <option value="PT">Portuguese</option> + <option value="PA">Punjabi</option> + <option value="QU">Quechua</option> + <option value="RO">Romanian</option> + <option value="RU">Russian</option> + <option value="SM">Samoan</option> + <option value="SR">Serbian</option> + <option value="SK">Slovak</option> + <option value="SL">Slovenian</option> + <option value="ES">Spanish</option> + <option value="SW">Swahili</option> + <option value="SV">Swedish </option> + <option value="TA">Tamil</option> + <option value="TT">Tatar</option> + <option value="TE">Telugu</option> + <option value="TH">Thai</option> + <option value="BO">Tibetan</option> + <option value="TO">Tonga</option> + <option value="TR">Turkish</option> + <option value="UK">Ukrainian</option> + <option value="UR">Urdu</option> + <option value="UZ">Uzbek</option> + <option value="VI">Vietnamese</option> + <option value="CY">Welsh</option> + <option value="XH">Xhosa</option> + </React.Fragment>; +}; diff --git a/web/source/settings-panel/components/login.jsx b/web/source/settings-panel/components/login.jsx new file mode 100644 index 000000000..c67e99acd --- /dev/null +++ b/web/source/settings-panel/components/login.jsx @@ -0,0 +1,102 @@ +/* + 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 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-panel/components/nav-button.jsx b/web/source/settings-panel/components/nav-button.jsx new file mode 100644 index 000000000..3c76711fb --- /dev/null +++ b/web/source/settings-panel/components/nav-button.jsx @@ -0,0 +1,33 @@ +/* + 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 { Link, useRoute } = require("wouter"); + +module.exports = function NavButton({href, name}) { + const [isActive] = useRoute(`${href}/:anything?`); + return ( + <Link href={href}> + <a className={isActive ? "active" : ""} data-content={name}> + {name} + </a> + </Link> + ); +};
\ No newline at end of file diff --git a/web/source/settings-panel/components/submit.jsx b/web/source/settings-panel/components/submit.jsx new file mode 100644 index 000000000..0187fc81f --- /dev/null +++ b/web/source/settings-panel/components/submit.jsx @@ -0,0 +1,35 @@ +/* + 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"); + +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> + ); +}; |