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

1 files changed, 118 insertions, 0 deletions

diff --git a/web/source/panels/user/style.css b/web/source/panels/user/style.css
new file mode 100644
index 000000000..021b1816e
--- /dev/null
+++ 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;
+}