commit 117888cf59c10330671f43bbce949a3984761c91
parent 4722970a5be599d3fdcf6b172bd5f0d3e81ab95d
Author: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Mon, 8 Aug 2022 10:40:51 +0200
[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 <f0x@cthu.lu>
Diffstat:
29 files changed, 937 insertions(+), 208 deletions(-)
diff --git a/internal/api/client/auth/authorize.go b/internal/api/client/auth/authorize.go
@@ -29,6 +29,7 @@ import (
"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
@@ -27,6 +27,7 @@ import (
"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
@@ -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
@@ -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
@@ -29,7 +29,7 @@ import (
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -16,6 +16,8 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
+@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;
+
+
+ padding-bottom: 1rem;
+ padding-top: 1rem;
+
+ label, input {
+ padding-left: 0.2rem;
+ }
- button {
- place-self: center;
- grid-column: 2;
+ .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
@@ -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 <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>
+ <div className="error accent">{errorMsg ? errorMsg : statusMsg}</div>
+ </div>
+ );
+};
diff --git 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
@@ -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 <http://www.gnu.org/licenses/>.
-*/
-
-"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 (
- <section className="login">
- <h1>OAUTH Login:</h1>
- <form onSubmit={(e) => e.preventDefault()}>
- <label htmlFor="instance">Instance: </label>
- <input value={instance} onChange={updateInstance} id="instance"/>
- <button onClick={doAuth}>Authenticate</button>
- </form>
- </section>
- );
-};
-\ No newline at end of file
diff --git 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 <AdminPanel oauth={oauth} />;
- } else if (oauthState != undefined) {
- return "processing oauth...";
- } else {
- return <Auth setOauth={setOauth} />;
- }
-}
-
function AdminPanel({oauth}) {
/*
Features: (issue #78)
@@ -92,4 +61,4 @@ function Logout({oauth}) {
);
}
-ReactDom.render(<App/>, 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
@@ -16,22 +16,6 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
-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
@@ -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 <http://www.gnu.org/licenses/>.
+*/
+
+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
diff --git a/web/source/panels/lib/panel.js 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 <http://www.gnu.org/licenses/>.
+*/
+
+"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(<Panel/>, 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 <Component oauth={oauth} />;
+ } else if (oauthState != undefined) {
+ return "processing oauth...";
+ } else {
+ return <Auth setOauth={setOauth} />;
+ }
+ }
+
+ 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 (
+ <section className="login">
+ <h1>OAUTH Login:</h1>
+ <form onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor="instance">Instance: </label>
+ <input value={instance} onChange={updateInstance} id="instance"/>
+ <button onClick={doAuth}>Authenticate</button>
+ </form>
+ </section>
+ );
+ }
+};
+\ No newline at end of file
diff --git a/web/source/panels/user/basic.js 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 <http://www.gnu.org/licenses/>.
+*/
+
+"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 (
+ <section className="basic">
+ <h1>@{account.username}'s Profile Info</h1>
+ <form>
+ <div className="labelinput">
+ <label htmlFor="header">Header</label>
+ <div className="border">
+ <img className="headerpreview" src={headerSrc} alt={headerSrc ? `header image for ${account.username}` : "None set"}/>
+ <div>
+ <label htmlFor="header" className="file-input button">Browse…</label>
+ <span>{headerFile ? headerFile.name : ""}</span>
+ </div>
+ </div>
+ <input className="hidden" id="header" type="file" accept="image/*" onChange={headerOnChange}/>
+ </div>
+ <div className="labelinput">
+ <label htmlFor="avatar">Avatar</label>
+ <div className="border">
+ <img className="avatarpreview" src={avatarSrc} alt={headerSrc ? `avatar image for ${account.username}` : "None set"}/>
+ <div>
+ <label htmlFor="avatar" className="file-input button">Browse…</label>
+ <span>{avatarFile ? avatarFile.name : ""}</span>
+ </div>
+ </div>
+ <input className="hidden" id="avatar" type="file" accept="image/*" onChange={avatarOnChange}/>
+ </div>
+ <div className="labelinput">
+ <label htmlFor="displayname">Display Name</label>
+ <input id="displayname" type="text" value={displayName} onChange={(e) => setDisplayName(e.target.value)} placeHolder="A GoToSocial user"/>
+ </div>
+ <div className="labelinput">
+ <label htmlFor="bio">Bio</label>
+ <textarea id="bio" value={bio} onChange={(e) => setBio(e.target.value)} placeHolder="Just trying out GoToSocial, my pronouns are they/them and I like sloths."/>
+ </div>
+ <div className="labelcheckbox">
+ <label htmlFor="locked">Manually approve follow requests</label>
+ <input id="locked" type="checkbox" checked={locked} onChange={(e) => setLocked(e.target.checked)}/>
+ </div>
+ <Submit onClick={submit} label="Save profile info" errorMsg={errorMsg} statusMsg={statusMsg}/>
+ </form>
+ </section>
+ );
+};
diff --git a/web/source/panels/user/index.js b/web/source/panels/user/index.js
@@ -22,10 +22,41 @@ const Promise = require("bluebird");
const React = require("react");
const ReactDom = require("react-dom");
-// require("./style.css");
-
-function App() {
- return "hello world - user panel";
+const createPanel = require("../lib/panel");
+
+const Basic = require("./basic");
+const Posts = require("./posts");
+const Security = require("./security");
+
+require("../base.css");
+require("./style.css");
+
+function UserPanel({oauth}) {
+ const [account, setAccount] = React.useState({});
+ const [errorMsg, setError] = React.useState("");
+ const [statusMsg, setStatus] = React.useState("Fetching user info");
+
+ React.useEffect(() => {
+ Promise.try(() => {
+ return oauth.apiRequest("/api/v1/accounts/verify_credentials", "GET");
+ }).then((json) => {
+ setAccount(json);
+ }).catch((e) => {
+ setError(e.message);
+ setStatus("");
+ });
+ }, [oauth, setAccount, setError, setStatus]);
+
+ return (
+ <React.Fragment>
+ <div>
+ <button className="logout" onClick={oauth.logout}>Log out of settings panel</button>
+ </div>
+ <Basic oauth={oauth} account={account}/>
+ <Posts oauth={oauth} account={account}/>
+ <Security oauth={oauth}/>
+ </React.Fragment>
+ );
}
-ReactDom.render(<App/>, document.getElementById("root"));
-\ No newline at end of file
+createPanel("GoToSocial User Panel", ["read write"], UserPanel);
+\ No newline at end of file
diff --git a/web/source/panels/user/languages.js b/web/source/panels/user/languages.js
@@ -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/panels/user/posts.js b/web/source/panels/user/posts.js
@@ -0,0 +1,107 @@
+/*
+ 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 Languages = require("./languages");
+const Submit = require("../../lib/submit");
+
+module.exports = function Posts({oauth, account}) {
+ const [errorMsg, setError] = React.useState("");
+ const [statusMsg, setStatus] = React.useState("");
+
+ const [language, setLanguage] = React.useState("");
+ const [privacy, setPrivacy] = React.useState("");
+ const [format, setFormat] = React.useState("");
+ const [sensitive, setSensitive] = React.useState(false);
+
+ React.useEffect(() => {
+ if (account.source) {
+ setLanguage(account.source.language.toUpperCase());
+ setPrivacy(account.source.privacy);
+ setSensitive(account.source.sensitive ? account.source.sensitive : false);
+ setFormat(account.source.status_format ? account.source.status_format : "plain");
+ }
+
+ }, [account, setSensitive, setPrivacy]);
+
+ const submit = (e) => {
+ e.preventDefault();
+
+ setStatus("PATCHing");
+ setError("");
+ return Promise.try(() => {
+ let formDataInfo = new FormData();
+
+ formDataInfo.set("source[language]", language);
+ formDataInfo.set("source[privacy]", privacy);
+ formDataInfo.set("source[sensitive]", sensitive);
+ formDataInfo.set("source[status_format]", format);
+
+ return oauth.apiRequest("/api/v1/accounts/update_credentials", "PATCH", formDataInfo, "form");
+ }).then((json) => {
+ setStatus("Saved!");
+ setLanguage(json.source.language.toUpperCase());
+ setPrivacy(json.source.privacy);
+ setSensitive(json.source.sensitive ? json.source.sensitive : false);
+ setFormat(json.source.status_format ? json.source.status_format : "plain");
+ }).catch((e) => {
+ setError(e.message);
+ setStatus("");
+ });
+ };
+
+ return (
+ <section className="posts">
+ <h1>Post Settings</h1>
+ <form>
+ <div className="labelselect">
+ <label htmlFor="language">Default post language</label>
+ <select id="language" autoComplete="language" value={language} onChange={(e) => setLanguage(e.target.value)}>
+ <Languages />
+ </select>
+ </div>
+ <div className="labelselect">
+ <label htmlFor="privacy">Default post privacy</label>
+ <select id="privacy" value={privacy} onChange={(e) => setPrivacy(e.target.value)}>
+ <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={format} onChange={(e) => setFormat(e.target.value)}>
+ <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={sensitive} onChange={(e) => setSensitive(e.target.checked)}/>
+ </div>
+ <Submit onClick={submit} label="Save post settings" errorMsg={errorMsg} statusMsg={statusMsg}/>
+ </form>
+ </section>
+ );
+};
diff --git a/web/source/panels/user/security.js b/web/source/panels/user/security.js
@@ -0,0 +1,80 @@
+/*
+ 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 Submit = require("../../lib/submit");
+
+module.exports = function Security({oauth}) {
+ const [errorMsg, setError] = React.useState("");
+ const [statusMsg, setStatus] = React.useState("");
+
+ const [oldPassword, setOldPassword] = React.useState("");
+ const [newPassword, setNewPassword] = React.useState("");
+ const [newPasswordConfirm, setNewPasswordConfirm] = React.useState("");
+
+ const submit = (e) => {
+ e.preventDefault();
+
+ if (newPassword !== newPasswordConfirm) {
+ setError("New password and confirm new password did not match!");
+ return;
+ }
+
+ setStatus("PATCHing");
+ setError("");
+ return Promise.try(() => {
+ let formDataInfo = new FormData();
+ formDataInfo.set("old_password", oldPassword);
+ formDataInfo.set("new_password", newPassword);
+ return oauth.apiRequest("/api/v1/user/password_change", "POST", formDataInfo, "form");
+ }).then((json) => {
+ setStatus("Saved!");
+ setOldPassword("");
+ setNewPassword("");
+ setNewPasswordConfirm("");
+ }).catch((e) => {
+ setError(e.message);
+ setStatus("");
+ });
+ };
+
+ return (
+ <section className="security">
+ <h1>Password Change</h1>
+ <form>
+ <div className="labelinput">
+ <label htmlFor="password">Current password</label>
+ <input name="password" id="password" type="password" autoComplete="current-password" value={oldPassword} onChange={(e) => setOldPassword(e.target.value)} />
+ </div>
+ <div className="labelinput">
+ <label htmlFor="new-password">New password</label>
+ <input name="new-password" id="new-password" type="password" autoComplete="new-password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
+ </div>
+ <div className="labelinput">
+ <label htmlFor="confirm-new-password">Confirm new password</label>
+ <input name="confirm-new-password" id="confirm-new-password" type="password" autoComplete="new-password" value={newPasswordConfirm} onChange={(e) => setNewPasswordConfirm(e.target.value)} />
+ </div>
+ <Submit onClick={submit} label="Save new password" errorMsg={errorMsg} statusMsg={statusMsg}/>
+ </form>
+ </section>
+ );
+};
diff --git a/web/source/panels/user/style.css b/web/source/panels/user/style.css
@@ -0,0 +1,118 @@
+/*
+ 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/>.
+*/
+
+section.basic, section.posts, section.security {
+ form {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ input, textarea {
+ width: 100%;
+ line-height: 1.5rem;
+ }
+
+ input[type=checkbox] {
+ justify-self: start;
+ width: initial;
+ }
+
+ input:read-only {
+ border: none;
+ }
+
+ input:invalid {
+ border-color: red;
+ }
+ }
+
+ textarea {
+ width: 100%;
+ height: 8rem;
+ }
+
+ h1 {
+ margin-bottom: 0.5rem;
+ }
+
+ img {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: $boxshadow_border;
+ box-shadow: $box-shadow;
+ object-fit: cover;
+ border-radius: 0.2rem;
+ box-sizing: border-box;
+ margin-bottom: 0.5rem;
+ }
+
+ .avatarpreview {
+ height: 8.5rem;
+ width: 8.5rem;
+ }
+
+ .headerpreview {
+ width: 100%;
+ aspect-ratio: 3 / 1;
+ overflow: hidden;
+ }
+
+ .moreinfolink {
+ font-size: 0.9em;
+ }
+}
+
+.labelinput .border {
+ border-radius: 0.2rem;
+ border: 0.15rem solid $border_accent;
+ padding: 0.3rem;
+ display: flex;
+ flex-direction: column;
+}
+
+.file-input.button {
+ display: inline-block;
+ font-size: 1rem;
+ font-weight: normal;
+ padding: 0.3rem 0.3rem;
+ align-self: flex-start;
+ /* background: $border_accent; */
+ margin-right: 0.2rem;
+}
+
+.labelinput, .labelselect {
+ display: flex;
+ flex-direction: column;
+ gap: 0.4rem;
+}
+
+.labelcheckbox {
+ display: flex;
+ gap: 0.4rem;
+}
+
+.titlesave {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.4rem;
+}
+
+.logout {
+ margin-bottom: 2rem;
+}
diff --git a/web/source/yarn.lock b/web/source/yarn.lock
@@ -4365,6 +4365,11 @@ mkdirp@^0.5.0:
dependencies:
minimist "^1.2.6"
+modern-normalize@^1.1.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
+ integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
+
module-deps@^6.2.3:
version "6.2.3"
resolved "https://registry.yarnpkg.com/module-deps/-/module-deps-6.2.3.tgz#15490bc02af4b56cf62299c7c17cba32d71a96ee"
diff --git a/web/template/sign-in.tmpl b/web/template/sign-in.tmpl
@@ -3,11 +3,14 @@
<section class="login">
<h1>Login</h1>
<form action="/auth/sign_in" method="POST">
- <label for="email">Email</label>
- <input type="email" class="form-control" name="username" required placeholder="Please enter your email address">
-
- <label for="password">Password</label>
- <input type="password" class="form-control" name="password" required placeholder="Please enter your password">
+ <div class="labelinput">
+ <label for="email">Email</label>
+ <input type="email" class="form-control" name="username" required placeholder="Please enter your email address">
+ </div>
+ <div class="labelinput">
+ <label for="password">Password</label>
+ <input type="password" class="form-control" name="password" required placeholder="Please enter your password">
+ </div>
<button type="submit" class="btn btn-success">Login</button>
</form>
</section>
