From 117888cf59c10330671f43bbce949a3984761c91 Mon Sep 17 00:00:00 2001 From: tobi <31960611+tsmethurst@users.noreply.github.com> Date: Mon, 8 Aug 2022 10:40:51 +0200 Subject: [PATCH] [feature] Add first iteration of a user panel at `/user` (#736) * start work on user panel * parse source first before checking if empty form * newline * set avi + header nicely * add posts settings * render signin a bit nicer on mobile * return OK json on successful change * return unauthorized on bad password * clarify message on insecure password * make login a bit prettier * add alt text + border round image previews * add logout button * add password change * styling updates * redirect /auth/edit to /user * update tests * fix validation tests * better labels, link to more info * make submit button generic component * move submit button inside forms * add autocomplete labels to password fields * fix indentation (thx eslint) * update eslintrc * eslint: no-unescaped-entities * initial deduplication between user and admin panel * add default status/post format setting * user panel styling for inputs * update user panel styling, include normalize css * add placeholder text * input padding Co-authored-by: f0x --- internal/api/client/auth/authorize.go | 8 + internal/api/client/auth/signin.go | 11 +- internal/api/client/user/passwordchange.go | 2 +- .../api/client/user/passwordchange_test.go | 6 +- internal/processing/user/changepassword.go | 2 +- .../processing/user/changepassword_test.go | 26 +++- internal/validate/formvalidation.go | 2 +- internal/validate/formvalidation_test.go | 8 +- internal/web/panels.go | 4 + internal/web/web.go | 6 +- web/source/.eslintrc.js | 9 +- web/source/css/_colors.css | 5 +- web/source/css/base.css | 49 ++++++- web/source/lib/submit.js | 30 ++++ web/source/package.json | 1 + web/source/panels/admin/auth.js | 96 ------------ web/source/panels/admin/index.js | 39 +---- web/source/panels/admin/style.css | 35 ----- web/source/panels/base.css | 63 ++++++++ web/source/{ => panels}/lib/oauth.js | 0 web/source/panels/lib/panel.js | 134 +++++++++++++++++ web/source/panels/user/basic.js | 137 ++++++++++++++++++ web/source/panels/user/index.js | 39 ++++- web/source/panels/user/languages.js | 98 +++++++++++++ web/source/panels/user/posts.js | 107 ++++++++++++++ web/source/panels/user/security.js | 80 ++++++++++ web/source/panels/user/style.css | 118 +++++++++++++++ web/source/yarn.lock | 5 + web/template/sign-in.tmpl | 13 +- 29 files changed, 931 insertions(+), 202 deletions(-) create mode 100644 web/source/lib/submit.js delete mode 100644 web/source/panels/admin/auth.js create mode 100644 web/source/panels/base.css rename web/source/{ => panels}/lib/oauth.js (100%) create mode 100644 web/source/panels/lib/panel.js create mode 100644 web/source/panels/user/basic.js create mode 100644 web/source/panels/user/languages.js create mode 100644 web/source/panels/user/posts.js create mode 100644 web/source/panels/user/security.js create mode 100644 web/source/panels/user/style.css diff --git a/internal/api/client/auth/authorize.go b/internal/api/client/auth/authorize.go index 1a594a319..67325a81d 100644 --- a/internal/api/client/auth/authorize.go +++ b/internal/api/client/auth/authorize.go @@ -29,6 +29,7 @@ "github.com/google/uuid" "github.com/superseriousbusiness/gotosocial/internal/api" "github.com/superseriousbusiness/gotosocial/internal/api/model" + "github.com/superseriousbusiness/gotosocial/internal/config" "github.com/superseriousbusiness/gotosocial/internal/db" "github.com/superseriousbusiness/gotosocial/internal/gtserror" "github.com/superseriousbusiness/gotosocial/internal/gtsmodel" @@ -142,6 +143,12 @@ func (m *Module) AuthorizeGETHandler(c *gin.Context) { return } + instance, errWithCode := m.processor.InstanceGet(c.Request.Context(), config.GetHost()) + if errWithCode != nil { + api.ErrorHandler(c, errWithCode, m.processor.InstanceGet) + return + } + // the authorize template will display a form to the user where they can get some information // about the app that's trying to authorize, and the scope of the request. // They can then approve it if it looks OK to them, which will POST to the AuthorizePOSTHandler @@ -151,6 +158,7 @@ func (m *Module) AuthorizeGETHandler(c *gin.Context) { "redirect": redirect, "scope": scope, "user": acct.Username, + "instance": instance, }) } diff --git a/internal/api/client/auth/signin.go b/internal/api/client/auth/signin.go index f9541d4c5..58f3fad7e 100644 --- a/internal/api/client/auth/signin.go +++ b/internal/api/client/auth/signin.go @@ -27,6 +27,7 @@ "github.com/gin-contrib/sessions" "github.com/gin-gonic/gin" "github.com/superseriousbusiness/gotosocial/internal/api" + "github.com/superseriousbusiness/gotosocial/internal/config" "github.com/superseriousbusiness/gotosocial/internal/db" "github.com/superseriousbusiness/gotosocial/internal/gtserror" "github.com/superseriousbusiness/gotosocial/internal/gtsmodel" @@ -50,8 +51,16 @@ func (m *Module) SignInGETHandler(c *gin.Context) { } if m.idp == nil { + instance, errWithCode := m.processor.InstanceGet(c.Request.Context(), config.GetHost()) + if errWithCode != nil { + api.ErrorHandler(c, errWithCode, m.processor.InstanceGet) + return + } + // no idp provider, use our own funky little sign in page - c.HTML(http.StatusOK, "sign-in.tmpl", gin.H{}) + c.HTML(http.StatusOK, "sign-in.tmpl", gin.H{ + "instance": instance, + }) return } diff --git a/internal/api/client/user/passwordchange.go b/internal/api/client/user/passwordchange.go index 7676f5b85..2b40a345e 100644 --- a/internal/api/client/user/passwordchange.go +++ b/internal/api/client/user/passwordchange.go @@ -100,5 +100,5 @@ func (m *Module) PasswordChangePOSTHandler(c *gin.Context) { return } - c.Status(http.StatusOK) + c.JSON(http.StatusOK, gin.H{"status": "OK"}) } diff --git a/internal/api/client/user/passwordchange_test.go b/internal/api/client/user/passwordchange_test.go index 31b59b2ce..3c0fd7b30 100644 --- a/internal/api/client/user/passwordchange_test.go +++ b/internal/api/client/user/passwordchange_test.go @@ -119,13 +119,13 @@ func (suite *PasswordChangeTestSuite) TestPasswordIncorrectOldPassword() { suite.userModule.PasswordChangePOSTHandler(ctx) // check response - suite.EqualValues(http.StatusBadRequest, recorder.Code) + suite.EqualValues(http.StatusUnauthorized, recorder.Code) result := recorder.Result() defer result.Body.Close() b, err := ioutil.ReadAll(result.Body) suite.NoError(err) - suite.Equal(`{"error":"Bad Request: old password did not match"}`, string(b)) + suite.Equal(`{"error":"Unauthorized: old password was incorrect"}`, string(b)) } func (suite *PasswordChangeTestSuite) TestPasswordWeakNewPassword() { @@ -153,7 +153,7 @@ func (suite *PasswordChangeTestSuite) TestPasswordWeakNewPassword() { defer result.Body.Close() b, err := ioutil.ReadAll(result.Body) suite.NoError(err) - suite.Equal(`{"error":"Bad Request: password is 94% strength, try including more special characters, using uppercase letters, using numbers or using a longer password"}`, string(b)) + suite.Equal(`{"error":"Bad Request: password is only 94% strength, try including more special characters, using uppercase letters, using numbers or using a longer password"}`, string(b)) } func TestPasswordChangeTestSuite(t *testing.T) { diff --git a/internal/processing/user/changepassword.go b/internal/processing/user/changepassword.go index 8cc71133d..50c7a7517 100644 --- a/internal/processing/user/changepassword.go +++ b/internal/processing/user/changepassword.go @@ -29,7 +29,7 @@ func (p *processor) ChangePassword(ctx context.Context, user *gtsmodel.User, oldPassword string, newPassword string) gtserror.WithCode { if err := bcrypt.CompareHashAndPassword([]byte(user.EncryptedPassword), []byte(oldPassword)); err != nil { - return gtserror.NewErrorBadRequest(err, "old password did not match") + return gtserror.NewErrorUnauthorized(err, "old password was incorrect") } if err := validate.NewPassword(newPassword); err != nil { diff --git a/internal/processing/user/changepassword_test.go b/internal/processing/user/changepassword_test.go index e769f4cc0..1d92e6b55 100644 --- a/internal/processing/user/changepassword_test.go +++ b/internal/processing/user/changepassword_test.go @@ -56,17 +56,35 @@ func (suite *ChangePasswordTestSuite) TestChangePasswordIncorrectOld() { errWithCode := suite.user.ChangePassword(context.Background(), user, "ooooopsydoooopsy", "verygoodnewpassword") suite.EqualError(errWithCode, "crypto/bcrypt: hashedPassword is not the hash of the given password") - suite.Equal(http.StatusBadRequest, errWithCode.Code()) - suite.Equal("Bad Request: old password did not match", errWithCode.Safe()) + suite.Equal(http.StatusUnauthorized, errWithCode.Code()) + suite.Equal("Unauthorized: old password was incorrect", errWithCode.Safe()) + + // get user from the db again + dbUser := >smodel.User{} + err := suite.db.GetByID(context.Background(), user.ID, dbUser) + suite.NoError(err) + + // check the password has not changed + err = bcrypt.CompareHashAndPassword([]byte(dbUser.EncryptedPassword), []byte("password")) + suite.NoError(err) } func (suite *ChangePasswordTestSuite) TestChangePasswordWeakNew() { user := suite.testUsers["local_account_1"] errWithCode := suite.user.ChangePassword(context.Background(), user, "password", "1234") - suite.EqualError(errWithCode, "password is 11% strength, try including more special characters, using lowercase letters, using uppercase letters or using a longer password") + suite.EqualError(errWithCode, "password is only 11% strength, try including more special characters, using lowercase letters, using uppercase letters or using a longer password") suite.Equal(http.StatusBadRequest, errWithCode.Code()) - suite.Equal("Bad Request: password is 11% strength, try including more special characters, using lowercase letters, using uppercase letters or using a longer password", errWithCode.Safe()) + suite.Equal("Bad Request: password is only 11% strength, try including more special characters, using lowercase letters, using uppercase letters or using a longer password", errWithCode.Safe()) + + // get user from the db again + dbUser := >smodel.User{} + err := suite.db.GetByID(context.Background(), user.ID, dbUser) + suite.NoError(err) + + // check the password has not changed + err = bcrypt.CompareHashAndPassword([]byte(dbUser.EncryptedPassword), []byte("password")) + suite.NoError(err) } func TestChangePasswordTestSuite(t *testing.T) { diff --git a/internal/validate/formvalidation.go b/internal/validate/formvalidation.go index 5ce80ae31..d22e43f6c 100644 --- a/internal/validate/formvalidation.go +++ b/internal/validate/formvalidation.go @@ -60,7 +60,7 @@ func NewPassword(password string) error { return errors.New(strings.ReplaceAll( err.Error(), "insecure password", - fmt.Sprintf("password is %d%% strength", percent))) + fmt.Sprintf("password is only %d%% strength", percent))) } return nil // pasword OK diff --git a/internal/validate/formvalidation_test.go b/internal/validate/formvalidation_test.go index 7b92b9a8c..ff40b1dfb 100644 --- a/internal/validate/formvalidation_test.go +++ b/internal/validate/formvalidation_test.go @@ -50,22 +50,22 @@ func (suite *ValidationTestSuite) TestCheckPasswordStrength() { err = validate.NewPassword(terriblePassword) if assert.Error(suite.T(), err) { - assert.Equal(suite.T(), errors.New("password is 62% strength, try including more special characters, using uppercase letters, using numbers or using a longer password"), err) + assert.Equal(suite.T(), errors.New("password is only 62% strength, try including more special characters, using uppercase letters, using numbers or using a longer password"), err) } err = validate.NewPassword(weakPassword) if assert.Error(suite.T(), err) { - assert.Equal(suite.T(), errors.New("password is 95% strength, try including more special characters, using numbers or using a longer password"), err) + assert.Equal(suite.T(), errors.New("password is only 95% strength, try including more special characters, using numbers or using a longer password"), err) } err = validate.NewPassword(shortPassword) if assert.Error(suite.T(), err) { - assert.Equal(suite.T(), errors.New("password is 39% strength, try including more special characters or using a longer password"), err) + assert.Equal(suite.T(), errors.New("password is only 39% strength, try including more special characters or using a longer password"), err) } err = validate.NewPassword(specialPassword) if assert.Error(suite.T(), err) { - assert.Equal(suite.T(), errors.New("password is 53% strength, try including more special characters or using a longer password"), err) + assert.Equal(suite.T(), errors.New("password is only 53% strength, try including more special characters or using a longer password"), err) } err = validate.NewPassword(longPassword) diff --git a/internal/web/panels.go b/internal/web/panels.go index e0e88944e..dafd0abc7 100644 --- a/internal/web/panels.go +++ b/internal/web/panels.go @@ -41,6 +41,7 @@ func (m *Module) UserPanelHandler(c *gin.Context) { assetsPath + "/Fork-Awesome/css/fork-awesome.min.css", assetsPath + "/dist/_colors.css", assetsPath + "/dist/base.css", + assetsPath + "/dist/panels-base.css", assetsPath + "/dist/panels-user-style.css", }, "javascript": []string{ @@ -63,6 +64,9 @@ func (m *Module) AdminPanelHandler(c *gin.Context) { "instance": instance, "stylesheets": []string{ assetsPath + "/Fork-Awesome/css/fork-awesome.min.css", + assetsPath + "/dist/_colors.css", + assetsPath + "/dist/base.css", + assetsPath + "/dist/panels-base.css", assetsPath + "/dist/panels-admin-style.css", }, "javascript": []string{ diff --git a/internal/web/web.go b/internal/web/web.go index daa4563f7..fe270ac6c 100644 --- a/internal/web/web.go +++ b/internal/web/web.go @@ -133,10 +133,14 @@ func (m *Module) Route(s router.Router) error { }) s.AttachHandler(http.MethodGet, userPanelpath, m.UserPanelHandler) - // redirect /settings/ to /settings + // redirect /user/ to /user s.AttachHandler(http.MethodGet, userPanelpath+"/", func(c *gin.Context) { c.Redirect(http.StatusMovedPermanently, userPanelpath) }) + // redirect /auth/edit to /user + s.AttachHandler(http.MethodGet, "/auth/edit", func(c *gin.Context) { + c.Redirect(http.StatusMovedPermanently, userPanelpath) + }) // serve front-page s.AttachHandler(http.MethodGet, "/", m.baseHandler) diff --git a/web/source/.eslintrc.js b/web/source/.eslintrc.js index 36fbbacd6..cb94b8e88 100644 --- a/web/source/.eslintrc.js +++ b/web/source/.eslintrc.js @@ -1,3 +1,8 @@ +"use strict"; + module.exports = { - "extends": ["@f0x52/eslint-config-react"] -}; + "extends": ["@f0x52/eslint-config-react"], + "rules": { + "react/prop-types": "off" + } +}; \ No newline at end of file diff --git a/web/source/css/_colors.css b/web/source/css/_colors.css index 25bfae26e..5390f13d2 100644 --- a/web/source/css/_colors.css +++ b/web/source/css/_colors.css @@ -51,6 +51,7 @@ $bg_trans: color-mod($sloth_gray2 alpha(62%)); $bg_accent: $sloth_gray2_lighter3; $fg_accent: $lightblue; +$border_accent: $sloth_orange2; /* Color variables as used in a specific location */ @@ -70,4 +71,6 @@ $status_info_fg: #CBCBD7; $boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15); $boxshadow_border: 0.08rem solid $sloth_gray2_darker5; -$profile_avatar_border: 0.2rem solid $sloth_orange2; \ No newline at end of file +$profile_avatar_border: 0.2rem solid $border_accent; + +$input_bg: $sloth_gray2_darker3; \ No newline at end of file diff --git a/web/source/css/base.css b/web/source/css/base.css index 11d6dc407..5f07fb847 100644 --- a/web/source/css/base.css +++ b/web/source/css/base.css @@ -16,6 +16,8 @@ along with this program. If not, see . */ +@import "modern-normalize/modern-normalize.css"; + @font-face { font-family: "Noto Sans"; font-weight: 400; @@ -48,6 +50,10 @@ body { position: relative; } +.hidden { + display: none; +} + .page { position: absolute; display: grid; @@ -215,13 +221,26 @@ section.apps { section.login { form { - display: inline-grid; - grid-template-columns: auto 100%; - grid-gap: 0.7rem; + display: flex; + flex-direction: column; + gap: 1rem; - button { - place-self: center; - grid-column: 2; + + padding-bottom: 1rem; + padding-top: 1rem; + + label, input { + padding-left: 0.2rem; + } + + .labelinput { + display: flex; + flex-direction: column; + gap: 0.4rem; + } + + .btn { + margin-top: 1rem; } } } @@ -245,11 +264,25 @@ section.error { } input, select, textarea { - border: 1px solid $fg; + box-sizing: border-box; + border: 0.15rem solid $border_accent; + border-radius: 0.1rem; color: $fg; - background: $bg; + /* background: $input_bg; */ + background: $bg_accent; width: 100%; font-family: 'Noto Sans', sans-serif; + font-size: 1rem; + padding: 0.3rem; + + &:focus { + border-color: $fg_accent; + } +} + +input, textarea { + padding-top: 0.1rem; + padding-bottom: 0.1rem; } footer { diff --git a/web/source/lib/submit.js b/web/source/lib/submit.js new file mode 100644 index 000000000..ae4108a01 --- /dev/null +++ b/web/source/lib/submit.js @@ -0,0 +1,30 @@ +/* + 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 . +*/ + +"use strict"; + +const React = require("react"); + +module.exports = function Submit({onClick, label, errorMsg, statusMsg}) { + return ( +
+ +
{errorMsg ? errorMsg : statusMsg}
+
+ ); +}; diff --git a/web/source/package.json b/web/source/package.json index 4ff538769..691b68183 100644 --- a/web/source/package.json +++ b/web/source/package.json @@ -22,6 +22,7 @@ "from2-string": "^1.1.0", "icssify": "^2.0.0", "js-file-download": "^0.4.12", + "modern-normalize": "^1.1.0", "photoswipe": "^5.3.0", "photoswipe-dynamic-caption-plugin": "^1.2.4", "postcss-color-mod-function": "^3.0.3", diff --git a/web/source/panels/admin/auth.js b/web/source/panels/admin/auth.js deleted file mode 100644 index e26ff06b9..000000000 --- a/web/source/panels/admin/auth.js +++ /dev/null @@ -1,96 +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 . -*/ - -"use strict"; - -const Promise = require("bluebird"); -const React = require("react"); -const oauthLib = require("../../lib/oauth"); - -module.exports = function Auth({setOauth}) { - const [ instance, setInstance ] = React.useState(""); - - React.useEffect(() => { - let isStillMounted = true; - // check if current domain runs an instance - let thisUrl = new URL(window.location.origin); - thisUrl.pathname = "/api/v1/instance"; - Promise.try(() => { - return fetch(thisUrl.href); - }).then((res) => { - if (res.status == 200) { - return res.json(); - } - }).then((json) => { - if (json && json.uri && isStillMounted) { - setInstance(json.uri); - } - }).catch((e) => { - console.log("error checking instance response:", e); - }); - - return () => { - // cleanup function - isStillMounted = false; - }; - }, []); - - function doAuth() { - return Promise.try(() => { - return new URL(instance); - }).catch(TypeError, () => { - return new URL(`https://${instance}`); - }).then((parsedURL) => { - let url = parsedURL.toString(); - let oauth = oauthLib({ - instance: url, - client_name: "GoToSocial Admin Panel", - scope: ["admin"], - website: window.location.href - }); - setOauth(oauth); - setInstance(url); - return oauth.register().then(() => { - return oauth; - }); - }).then((oauth) => { - return oauth.authorize(); - }).catch((e) => { - console.log("error authenticating:", e); - }); - } - - function updateInstance(e) { - if (e.key == "Enter") { - doAuth(); - } else { - setInstance(e.target.value); - } - } - - return ( -
-

OAUTH Login:

-
e.preventDefault()}> - - - -
-
- ); -}; \ No newline at end of file diff --git a/web/source/panels/admin/index.js b/web/source/panels/admin/index.js index 05ab8e583..0fc1601eb 100644 --- a/web/source/panels/admin/index.js +++ b/web/source/panels/admin/index.js @@ -22,45 +22,14 @@ const Promise = require("bluebird"); const React = require("react"); const ReactDom = require("react-dom"); -const oauthLib = require("../../lib/oauth.js"); -const Auth = require("./auth"); +const createPanel = require("../lib/panel"); + const Settings = require("./settings"); const Blocks = require("./blocks"); +require("../base.css"); require("./style.css"); -function App() { - const [oauth, setOauth] = React.useState(); - const [hasAuth, setAuth] = React.useState(false); - const [oauthState, setOauthState] = React.useState(localStorage.getItem("oauth")); - - React.useEffect(() => { - let state = localStorage.getItem("oauth"); - if (state != undefined) { - state = JSON.parse(state); - let restoredOauth = oauthLib(state.config, state); - Promise.try(() => { - return restoredOauth.callback(); - }).then(() => { - setAuth(true); - }); - setOauth(restoredOauth); - } - }, []); - - if (!hasAuth && oauth && oauth.isAuthorized()) { - setAuth(true); - } - - if (oauth && oauth.isAuthorized()) { - return ; - } else if (oauthState != undefined) { - return "processing oauth..."; - } else { - return ; - } -} - function AdminPanel({oauth}) { /* Features: (issue #78) @@ -92,4 +61,4 @@ function Logout({oauth}) { ); } -ReactDom.render(, document.getElementById("root")); \ No newline at end of file +createPanel("GoToSocial Admin Panel", ["admin"], AdminPanel); \ No newline at end of file diff --git a/web/source/panels/admin/style.css b/web/source/panels/admin/style.css index c9d2f09b4..01195437f 100644 --- a/web/source/panels/admin/style.css +++ b/web/source/panels/admin/style.css @@ -16,22 +16,6 @@ along with this program. If not, see . */ -body { - grid-template-rows: auto 1fr; -} - -.capitalize { - text-transform: capitalize; -} - -section { - margin-bottom: 1rem; -} - -input, select, textarea { - box-sizing: border-box; -} - section.info { form { grid-template-columns: auto 1fr; @@ -120,22 +104,3 @@ section.blocks { gap: 0.5rem; } } - -.error { - font-weight: bold; -} - -.hidden { - display: none; -} - -.notImplemented { - border: 2px solid rgb(70, 79, 88); - background: repeating-linear-gradient( - -45deg, - #525c66, - #525c66 10px, - rgb(70, 79, 88) 10px, - rgb(70, 79, 88) 20px - ) !important; -} \ No newline at end of file diff --git a/web/source/panels/base.css b/web/source/panels/base.css new file mode 100644 index 000000000..d0e242505 --- /dev/null +++ b/web/source/panels/base.css @@ -0,0 +1,63 @@ +/* + 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 . +*/ + +body { + grid-template-rows: auto 1fr; +} + +.capitalize { + text-transform: capitalize; +} + +section { + margin-bottom: 1rem; +} + +input, select, textarea { + box-sizing: border-box; +} + +.error { + font-weight: bold; +} + +.hidden { + display: none; +} + +.messagebutton { + margin-top: 1rem; + display: flex; + gap: 1rem; + align-items: center; + + button { + white-space: nowrap; + } +} + +.notImplemented { + border: 2px solid rgb(70, 79, 88); + background: repeating-linear-gradient( + -45deg, + #525c66, + #525c66 10px, + rgb(70, 79, 88) 10px, + rgb(70, 79, 88) 20px + ) !important; +} diff --git a/web/source/lib/oauth.js b/web/source/panels/lib/oauth.js similarity index 100% rename from web/source/lib/oauth.js rename to web/source/panels/lib/oauth.js diff --git a/web/source/panels/lib/panel.js b/web/source/panels/lib/panel.js new file mode 100644 index 000000000..168eac7a0 --- /dev/null +++ b/web/source/panels/lib/panel.js @@ -0,0 +1,134 @@ +/* + 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 . +*/ + +"use strict"; + +const Promise = require("bluebird"); +const React = require("react"); +const ReactDom = require("react-dom"); + +const oauthLib = require("./oauth"); + +module.exports = function createPanel(clientName, scope, Component) { + ReactDom.render(, document.getElementById("root")); + + function Panel() { + const [oauth, setOauth] = React.useState(); + const [hasAuth, setAuth] = React.useState(false); + const [oauthState, setOauthState] = React.useState(localStorage.getItem("oauth")); + + React.useEffect(() => { + let state = localStorage.getItem("oauth"); + if (state != undefined) { + state = JSON.parse(state); + let restoredOauth = oauthLib(state.config, state); + Promise.try(() => { + return restoredOauth.callback(); + }).then(() => { + setAuth(true); + }); + setOauth(restoredOauth); + } + }, [setAuth, setOauth]); + + if (!hasAuth && oauth && oauth.isAuthorized()) { + setAuth(true); + } + + if (oauth && oauth.isAuthorized()) { + return ; + } else if (oauthState != undefined) { + return "processing oauth..."; + } else { + return ; + } + } + + function Auth({setOauth}) { + const [ instance, setInstance ] = React.useState(""); + + React.useEffect(() => { + let isStillMounted = true; + // check if current domain runs an instance + let thisUrl = new URL(window.location.origin); + thisUrl.pathname = "/api/v1/instance"; + Promise.try(() => { + return fetch(thisUrl.href); + }).then((res) => { + if (res.status == 200) { + return res.json(); + } + }).then((json) => { + if (json && json.uri && isStillMounted) { + setInstance(json.uri); + } + }).catch((e) => { + console.log("error checking instance response:", e); + }); + + return () => { + // cleanup function + isStillMounted = false; + }; + }, []); + + function doAuth() { + return Promise.try(() => { + return new URL(instance); + }).catch(TypeError, () => { + return new URL(`https://${instance}`); + }).then((parsedURL) => { + let url = parsedURL.toString(); + let oauth = oauthLib({ + instance: url, + client_name: clientName, + scope: scope, + website: window.location.href + }); + setOauth(oauth); + setInstance(url); + return oauth.register().then(() => { + return oauth; + }); + }).then((oauth) => { + return oauth.authorize(); + }).catch((e) => { + console.log("error authenticating:", e); + }); + } + + function updateInstance(e) { + if (e.key == "Enter") { + doAuth(); + } else { + setInstance(e.target.value); + } + } + + return ( +
+

OAUTH Login:

+
e.preventDefault()}> + + + +
+
+ ); + } +}; \ No newline at end of file diff --git a/web/source/panels/user/basic.js b/web/source/panels/user/basic.js new file mode 100644 index 000000000..6891706e9 --- /dev/null +++ b/web/source/panels/user/basic.js @@ -0,0 +1,137 @@ +/* + 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 . +*/ + +"use strict"; + +const React = require("react"); +const Promise = require("bluebird"); + +const Submit = require("../../lib/submit"); + +module.exports = function Basic({oauth, account}) { + const [errorMsg, setError] = React.useState(""); + const [statusMsg, setStatus] = React.useState(""); + + const [headerFile, setHeaderFile] = React.useState(undefined); + const [headerSrc, setHeaderSrc] = React.useState(""); + + const [avatarFile, setAvatarFile] = React.useState(undefined); + const [avatarSrc, setAvatarSrc] = React.useState(""); + + const [displayName, setDisplayName] = React.useState(""); + const [bio, setBio] = React.useState(""); + const [locked, setLocked] = React.useState(false); + + React.useEffect(() => { + setHeaderSrc(account.header); + setAvatarSrc(account.avatar); + + setDisplayName(account.display_name); + setBio(account.source ? account.source.note : ""); + setLocked(account.locked); + }, [account, setHeaderSrc, setAvatarSrc, setDisplayName, setBio, setLocked]); + + const headerOnChange = (e) => { + setHeaderFile(e.target.files[0]); + setHeaderSrc(URL.createObjectURL(e.target.files[0])); + }; + + const avatarOnChange = (e) => { + setAvatarFile(e.target.files[0]); + setAvatarSrc(URL.createObjectURL(e.target.files[0])); + }; + + const submit = (e) => { + e.preventDefault(); + + setStatus("PATCHing"); + setError(""); + return Promise.try(() => { + let formDataInfo = new FormData(); + + if (headerFile) { + formDataInfo.set("header", headerFile); + } + + if (avatarFile) { + formDataInfo.set("avatar", avatarFile); + } + + formDataInfo.set("display_name", displayName); + formDataInfo.set("note", bio); + formDataInfo.set("locked", locked); + + return oauth.apiRequest("/api/v1/accounts/update_credentials", "PATCH", formDataInfo, "form"); + }).then((json) => { + setStatus("Saved!"); + + setHeaderSrc(json.header); + setAvatarSrc(json.avatar); + + setDisplayName(json.display_name); + setBio(json.source.note); + setLocked(json.locked); + }).catch((e) => { + setError(e.message); + setStatus(""); + }); + }; + + return ( +
+

@{account.username}'s Profile Info

+
+
+ +
+ {headerSrc +
+ + {headerFile ? headerFile.name : ""} +
+
+ +
+
+ +
+ {headerSrc +
+ + {avatarFile ? avatarFile.name : ""} +
+
+ +
+
+ + setDisplayName(e.target.value)} placeHolder="A GoToSocial user"/> +
+
+ +