[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>

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,
 	})
 }
 

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
 	}
 

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"})
 }

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) {

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 {

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(http.StatusUnauthorized, errWithCode.Code())
-	suite.Equal("Bad Request: old password did not match", errWithCode.Safe())
+	suite.Equal("Unauthorized: old password was incorrect", errWithCode.Safe())
+
+	// get user from the db again
+	dbUser := &gtsmodel.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 := &gtsmodel.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) {

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

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)

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{

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)

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"
+	}
+};

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;
+$profile_avatar_border: 0.2rem solid $border_accent;
+
+$input_bg: $sloth_gray2_darker3;

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;
+		display: flex;
-		grid-template-columns: auto 100%;
+		flex-direction: column;
-		grid-gap: 0.7rem;
+		gap: 1rem;
 
-		button {
+
-			place-self: center;
+		padding-bottom: 1rem;
-			grid-column: 2;
+		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 {

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>
+	);
+};

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",

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>
-	);
-};

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 createPanel = require("../lib/panel");
-const Auth = require("./auth");
+
 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"));
+createPanel("GoToSocial Admin Panel", ["admin"], AdminPanel);

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;
-}

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;
+}

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>
+		);
+	}
+};

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}&apos;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>
+	);
+};

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");
+const createPanel = require("../lib/panel");
 
-function App() {
+const Basic = require("./basic");
-	return "hello world - user panel";
+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"));
+createPanel("GoToSocial User Panel", ["read write"], UserPanel);

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>;
+};

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>
+	);
+};

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>
+	);
+};

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;
+}

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"

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>
+            <div class="labelinput">
-            <input type="email" class="form-control" name="username" required placeholder="Please enter your email address">
+                <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>
+            </div>
-            <input type="password" class="form-control" name="password" required placeholder="Please enter your password">
+            <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>