Add server with basic auth stuff

This commit is contained in:
Tulir Asokan
2020-10-31 21:53:46 +02:00
parent d3adedf3df
commit 9151f4cb6d
54 changed files with 3415 additions and 419 deletions

1
web/style/button.css Normal file
View File

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

60
web/style/button.sass Normal file
View File

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

View File

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

105
web/style/setup-login.sass Normal file
View File

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

1
web/style/setup.css Normal file
View File

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

18
web/style/setup.sass Normal file
View File

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

0
web/style/theme.css Normal file
View File

33
web/style/theme.sass Normal file
View File

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