feat!: allow registration of multiple users (#340)

feat: administration area
feat: add reset password functionality

styles/login.css

@@ -45,6 +45,16 @@ body, html {
     text-align: center;
 }
 
+.container > .message {
+  text-align: center;
+  font-size: 18px;
+}
+
+.container > .message a {
+  color: var(--main-color);
+  text-decoration: none;
+}
+
 h2 {
     text-align: center;
     margin-bottom: 20px;
@@ -144,11 +154,53 @@ input[type="checkbox"] {
     margin-bottom: 20px;
 }
 
+.error-box,
+.success-box {
+    display: block;
+    color: #FFFFFF;
+    margin-bottom: 20px;
+    padding: 14px 14px 16px 14px;
+    border: 1px solid var(--error-color);
+    background-color: rgba(var(--error-color-rgb), 0.8);
+    border-radius: 8px;
+}
+
+.success-box {
+    border: 1px solid var(--success-color);
+    background-color: rgba(var(--success-color-rgb), 0.5);
+}
+
+.error-box li,
+.success-box li {
+  list-style: none;
+  font-size: 15px;
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  margin-bottom: 5px;
+}
+
+.error-box li:last-of-type,
+.success-box li:last-of-type {
+  margin-bottom: 0px;
+}
+
 .separator {
     border-top: 1px solid #ccc;
     padding-top: 20px;
 }
 
+.login-form-link {
+    text-align: center;
+    margin: 20px 0px;
+}
+
+.login-form-link a {
+    color: var(--main-color);
+    text-decoration: none;
+    font-size: 16px;
+}
+
 /* TOAST MESSAGE */
 
 .toast {

styles/styles.css

@@ -662,7 +662,8 @@ header #avatar {
 .account-currencies .buttons, 
 .account-fixer .buttons,
 .account-categories .buttons,
-.account-notifications .buttons {
+.account-notifications .buttons,
+.admin-form .buttons {
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -814,6 +815,14 @@ header #avatar {
   margin: 0px;
 }
 
+.settings-notes {
+  margin-bottom: 1.5em;
+}
+
+.settings-notes > p {
+  margin-bottom: 0px;
+}
+
 .credits-list > p > span,
 .settings-notes > p > span {
   color: #AAA;
@@ -1545,6 +1554,8 @@ textarea.thin {
 
 .statistic > .subtitle > img {
   width: 100px;
+  max-height: 40px;
+  object-fit: contain;
 }
 
 .graphs {
@@ -1841,4 +1852,39 @@ textarea.thin {
 
 .wrap {
   flex-wrap: wrap;
+}
+
+.user-list {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.user-list > div {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+}
+
+.user-list .user-list-row {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+}
+
+.user-list .user-list-row:last-of-type {
+  flex-grow: 0;
+}
+
+.user-list .user-list-row > div {
+  display: flex;
+  flex-basis: 50%;
+  gap: 12px;
+  align-items: baseline;
+}
+
+.user-list a {
+  color: var(--main-color);
+  text-decoration: none;
 }