Add server with basic auth stuff

web/style/button.css

@@ -0,0 +1 @@
+button.mau-button{cursor:pointer;margin:.5rem 0;border-radius:.25rem;font-size:1rem;box-sizing:border-box;padding:0}button.mau-button:disabled{cursor:default}button.mau-button.size-thick{height:3rem}button.mau-button.size-normal{height:2.5rem}button.mau-button.size-thin{height:2rem}button.mau-button.variant-filled{background-color:#2e7d32;color:#fff;border:none}button.mau-button.variant-filled:hover{background-color:#005005}button.mau-button.variant-filled:disabled{background-color:#CCC;color:#212121}button.mau-button.variant-outlined{background-color:#fff;border:2px solid #2e7d32;color:#2e7d32}button.mau-button.variant-outlined:hover{background-color:#60ad5e}button.mau-button.variant-outlined:disabled{background-color:#fff;border-color:#CCC}

web/style/button.sass

@@ -0,0 +1,60 @@
+// maunium-stickerpicker - A fast and simple Matrix sticker picker widget.
+// Copyright (C) 2020 Tulir Asokan
+//
+// 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 <https://www.gnu.org/licenses/>.
+@import theme.sass
+
+button.mau-button
+  cursor: pointer
+  margin: .5rem 0
+  border-radius: .25rem
+  font-size: 1rem
+  box-sizing: border-box
+  padding: 0
+
+  &:disabled
+    cursor: default
+
+  &.size-thick
+    height: 3rem
+
+  &.size-normal
+    height: 2.5rem
+
+  &.size-thin
+    height: 2rem
+
+  &.variant-filled
+    background-color: $primary
+    color: $primaryContrastText
+    border: none
+
+    &:hover
+      background-color: $primaryDark
+
+    &:disabled
+      background-color: $disabled
+      color: $text
+
+  &.variant-outlined
+    background-color: $background
+    border: 2px solid $primary
+    color: $primary
+
+    &:hover
+      background-color: $primaryLight
+
+    &:disabled
+      background-color: $background
+      border-color: $disabled

web/style/setup-login.css

@@ -0,0 +1 @@
+main.login-view{position:fixed;top:0;bottom:0;right:0;left:0;background-color:#2e7d32;display:flex;justify-content:space-around}main.login-view form.login-box{background-color:#fff;width:25rem;height:22.5rem;padding:2.5rem 2.5rem 2rem;margin-top:3rem;border-radius:.25rem;box-sizing:border-box;display:flex;flex-direction:column}main.login-view form.login-box.has-error{min-height:27rem;height:auto;margin-bottom:auto}main.login-view form.login-box h1{color:#2e7d32;margin:.5rem auto 3rem;font-size:1.5rem}main.login-view form.login-box .input{margin:.5rem 0;border-radius:.25rem;border:1px solid #DDD;padding:1px}main.login-view form.login-box .input:hover,main.login-view form.login-box .input:focus,main.login-view form.login-box .input.focus{border-color:#2e7d32}main.login-view form.login-box .input:focus,main.login-view form.login-box .input.focus{border-width:2px;padding:0}main.login-view form.login-box .username{display:flex;cursor:text}main.login-view form.login-box .username>input{border:none;padding:.75rem .125rem;color:#212121;min-width:0;font-size:1rem}main.login-view form.login-box .username>input:last-of-type{padding-right:.5rem;border-radius:0 .25rem .25rem 0}main.login-view form.login-box .username>input:focus{outline:none}main.login-view form.login-box .username>span{user-select:none;padding:.75rem 0;color:#212121}main.login-view form.login-box .username>span:first-of-type{padding-left:.5rem}main.login-view form.login-box .password{font-size:1rem;margin:.5rem 0;border-radius:.25rem;border:1px solid #DDD;padding:calc(.75rem + 1px) 1rem;box-sizing:border-box}main.login-view form.login-box .password:hover:not(:disabled),main.login-view form.login-box .password:focus:not(:disabled){border-color:#2e7d32}main.login-view form.login-box .password:focus{padding:0.75rem calc(1rem - 1px);border-width:2px;outline:none}main.login-view form.login-box .button-group{display:flex;gap:4px}main.login-view form.login-box .button-group button{width:100%}main.login-view form.login-box .error{padding:1rem;border-radius:.25rem;border:2px solid #B71C1C;background-color:#F7A9A1;margin:.5rem 0;width:100%;box-sizing:border-box}

web/style/setup-login.sass

@@ -0,0 +1,105 @@
+// maunium-stickerpicker - A fast and simple Matrix sticker picker widget.
+// Copyright (C) 2020 Tulir Asokan
+//
+// 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 <https://www.gnu.org/licenses/>.
+@import theme.sass
+
+main.login-view
+  position: fixed
+  top: 0
+  bottom: 0
+  right: 0
+  left: 0
+  background-color: $primary
+  display: flex
+  justify-content: space-around
+
+  form.login-box
+    background-color: $background
+    width: 25rem
+    height: 22.5rem
+    padding: 2.5rem 2.5rem 2rem
+    margin-top: 3rem
+    border-radius: .25rem
+    box-sizing: border-box
+    display: flex
+    flex-direction: column
+
+    &.has-error
+      min-height: 27rem
+      height: auto
+      margin-bottom: auto
+
+    h1
+      color: $primary
+      margin: .5rem auto 3rem
+      font-size: 1.5rem
+
+    .input
+      margin: .5rem 0
+      border-radius: .25rem
+      border: 1px solid $border
+      padding: 1px
+
+      &:hover, &:focus, &.focus
+        border-color: $primary
+
+      &:focus, &.focus
+        border-width: 2px
+        padding: 0
+
+    .username
+      display: flex
+      cursor: text
+
+      & > input
+        border: none
+        padding: .75rem .125rem
+        color: $text
+        min-width: 0
+        font-size: 1rem
+
+        &:last-of-type
+          padding-right: .5rem
+          border-radius: 0 .25rem .25rem 0
+
+        &:focus
+          outline: none
+
+      & > span
+        user-select: none
+        padding: .75rem 0
+        color: $text
+
+        &:first-of-type
+          padding-left: .5rem
+
+    .password
+      @include input
+
+    .button-group
+      display: flex
+      gap: 4px
+
+      button
+        width: 100%
+
+    .error
+      padding: 1rem
+      border-radius: .25rem
+      border: 2px solid $errorDark
+      background-color: $error
+      margin: .5rem 0
+      width: 100%
+      box-sizing: border-box

web/style/setup.css

@@ -0,0 +1 @@
+body{font-family:sans-serif}

web/style/setup.sass

@@ -0,0 +1,18 @@
+// maunium-stickerpicker - A fast and simple Matrix sticker picker widget.
+// Copyright (C) 2020 Tulir Asokan
+//
+// 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 <https://www.gnu.org/licenses/>.
+
+body
+    font-family: sans-serif

web/style/theme.sass

@@ -0,0 +1,33 @@
+// Material UI green 800
+$primary: #2e7d32
+$primaryDark: #005005
+$primaryLight: #60ad5e
+// Material UI blue 700
+$secondary: #1976d2
+$secondaryDark: #004ba0
+$secondaryLight: #63a4ff
+
+$error: #F7A9A1
+$errorDark: #B71C1C
+
+$primaryContrastText: white
+$background: white
+$text: #212121
+$border: #DDD
+$disabled: #CCC
+
+@mixin input
+  font-size: 1rem
+  margin: .5rem 0
+  border-radius: .25rem
+  border: 1px solid $border
+  padding: calc(.75rem + 1px) 1rem
+  box-sizing: border-box
+
+  &:hover:not(:disabled), &:focus:not(:disabled)
+    border-color: $primary
+
+  &:focus
+    padding: .75rem calc(1rem - 1px)
+    border-width: 2px
+    outline: none