[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>
This commit is contained in:
tobi
2022-08-08 10:40:51 +02:00
committed by GitHub
parent 4722970a5b
commit 117888cf59
29 changed files with 931 additions and 202 deletions

View File

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

View File

@@ -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;
button {
place-self: center;
grid-column: 2;
padding-bottom: 1rem;
padding-top: 1rem;
label, input {
padding-left: 0.2rem;
}
.labelinput {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.btn {
margin-top: 1rem;
}
}
}
@@ -245,11 +264,25 @@ section.error {
}
input, select, textarea {
border: 1px solid $fg;
box-sizing: border-box;
border: 0.15rem solid $border_accent;
border-radius: 0.1rem;
color: $fg;
background: $bg;
/* background: $input_bg; */
background: $bg_accent;
width: 100%;
font-family: 'Noto Sans', sans-serif;
font-size: 1rem;
padding: 0.3rem;
&:focus {
border-color: $fg_accent;
}
}
input, textarea {
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
footer {