Auth: Login screen improvements and code clean-up #98
see https://twitter.com/RAYs3T/status/1498403472932233216
This commit is contained in:
Michael Mayer
parent
893810f82f
commit
d926889757
4 changed files with 63 additions and 26 deletions
41
frontend/package-lock.json
generated
41
frontend/package-lock.json
generated
|
|
@ -1676,6 +1676,14 @@
|
|||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@colors/colors": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
|
||||
"integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
|
||||
"engines": {
|
||||
"node": ">=0.1.90"
|
||||
}
|
||||
},
|
||||
"node_modules/@csstools/postcss-color-function": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-1.0.2.tgz",
|
||||
|
|
@ -4317,9 +4325,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.4.73",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.73.tgz",
|
||||
"integrity": "sha512-RlCffXkE/LliqfA5m29+dVDPB2r72y2D2egMMfIy3Le8ODrxjuZNVo4NIC2yPL01N4xb4nZQLwzi6Z5tGIGLnA=="
|
||||
"version": "1.4.75",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz",
|
||||
"integrity": "sha512-LxgUNeu3BVU7sXaKjUDD9xivocQLxFtq6wgERrutdY/yIOps3ODOZExK1jg8DTEg4U8TUCb5MLGeWFOYuxjF3Q=="
|
||||
},
|
||||
"node_modules/emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
|
|
@ -7309,14 +7317,14 @@
|
|||
}
|
||||
},
|
||||
"node_modules/karma": {
|
||||
"version": "6.3.16",
|
||||
"resolved": "https://registry.npmjs.org/karma/-/karma-6.3.16.tgz",
|
||||
"integrity": "sha512-nEU50jLvDe5yvXqkEJRf8IuvddUkOY2x5Xc4WXHz6dxINgGDrgD2uqQWeVrJs4hbfNaotn+HQ1LZJ4yOXrL7xQ==",
|
||||
"version": "6.3.17",
|
||||
"resolved": "https://registry.npmjs.org/karma/-/karma-6.3.17.tgz",
|
||||
"integrity": "sha512-2TfjHwrRExC8yHoWlPBULyaLwAFmXmxQrcuFImt/JsAsSZu1uOWTZ1ZsWjqQtWpHLiatJOHL5jFjXSJIgCd01g==",
|
||||
"dependencies": {
|
||||
"@colors/colors": "1.5.0",
|
||||
"body-parser": "^1.19.0",
|
||||
"braces": "^3.0.2",
|
||||
"chokidar": "^3.5.1",
|
||||
"colors": "1.4.0",
|
||||
"connect": "^3.7.0",
|
||||
"di": "^0.0.1",
|
||||
"dom-serialize": "^2.2.1",
|
||||
|
|
@ -13671,6 +13679,11 @@
|
|||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"@colors/colors": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
|
||||
"integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ=="
|
||||
},
|
||||
"@csstools/postcss-color-function": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-1.0.2.tgz",
|
||||
|
|
@ -15668,9 +15681,9 @@
|
|||
}
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.4.73",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.73.tgz",
|
||||
"integrity": "sha512-RlCffXkE/LliqfA5m29+dVDPB2r72y2D2egMMfIy3Le8ODrxjuZNVo4NIC2yPL01N4xb4nZQLwzi6Z5tGIGLnA=="
|
||||
"version": "1.4.75",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz",
|
||||
"integrity": "sha512-LxgUNeu3BVU7sXaKjUDD9xivocQLxFtq6wgERrutdY/yIOps3ODOZExK1jg8DTEg4U8TUCb5MLGeWFOYuxjF3Q=="
|
||||
},
|
||||
"emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
|
|
@ -17780,14 +17793,14 @@
|
|||
}
|
||||
},
|
||||
"karma": {
|
||||
"version": "6.3.16",
|
||||
"resolved": "https://registry.npmjs.org/karma/-/karma-6.3.16.tgz",
|
||||
"integrity": "sha512-nEU50jLvDe5yvXqkEJRf8IuvddUkOY2x5Xc4WXHz6dxINgGDrgD2uqQWeVrJs4hbfNaotn+HQ1LZJ4yOXrL7xQ==",
|
||||
"version": "6.3.17",
|
||||
"resolved": "https://registry.npmjs.org/karma/-/karma-6.3.17.tgz",
|
||||
"integrity": "sha512-2TfjHwrRExC8yHoWlPBULyaLwAFmXmxQrcuFImt/JsAsSZu1uOWTZ1ZsWjqQtWpHLiatJOHL5jFjXSJIgCd01g==",
|
||||
"requires": {
|
||||
"@colors/colors": "1.5.0",
|
||||
"body-parser": "^1.19.0",
|
||||
"braces": "^3.0.2",
|
||||
"chokidar": "^3.5.1",
|
||||
"colors": "1.4.0",
|
||||
"connect": "^3.7.0",
|
||||
"di": "^0.0.1",
|
||||
"dom-serialize": "^2.2.1",
|
||||
|
|
|
|||
|
|
@ -306,10 +306,6 @@ ol, ul {
|
|||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#photoprism .search-results.cards-view .result {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#photoprism .search-results.mosaic-view .result {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,8 +33,31 @@
|
|||
color: #000000de !important;
|
||||
}
|
||||
|
||||
#photoprism main .auth-login a.text-link {
|
||||
color: #c8e3e7!important;
|
||||
#photoprism main .auth-login a {
|
||||
text-decoration: none!important;
|
||||
}
|
||||
|
||||
#photoprism main .auth-login,
|
||||
#photoprism main .auth-login form,
|
||||
#photoprism main .auth-login footer,
|
||||
#photoprism main .auth-login .v-input__prepend-outer .v-icon,
|
||||
#photoprism main .auth-login .body-1,
|
||||
#photoprism main .auth-login .body-2 {
|
||||
caret-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#photoprism main .auth-login .v-input__append-inner .v-icon {
|
||||
color: rgba(0,0,0,.54);
|
||||
}
|
||||
|
||||
#photoprism #app main .auth-login .v-btn.v-btn--disabled,
|
||||
#photoprism #app main .auth-login .v-btn.v-btn--disabled .v-icon {
|
||||
color: rgba(255,255,255,.36)!important;
|
||||
}
|
||||
|
||||
#photoprism #app main .auth-login .v-btn.v-btn--disabled {
|
||||
background-color: rgba(255,255,255,.16)!important;
|
||||
}
|
||||
|
||||
#photoprism main .auth-login footer {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<v-container fluid fill-height class="auth-login wallpaper pa-3">
|
||||
<v-layout align-center justify-center>
|
||||
<v-flex xs12 sm8 md4>
|
||||
<v-flex xs12 sm8 md4 xl3 xxl2>
|
||||
<v-form ref="form" dense class="auth-login-form" accept-charset="UTF-8" @submit.prevent="login">
|
||||
<v-card class="elevation-12 auth-login-box blur-7">
|
||||
<v-card-text class="pa-3">
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
:label="$gettext('Name')"
|
||||
background-color="grey lighten-5"
|
||||
class="input-name text-selectable"
|
||||
color="#05dde1"
|
||||
:color="colors.accent"
|
||||
:placeholder="$gettext('Name')"
|
||||
prepend-icon="person"
|
||||
></v-text-field>
|
||||
|
|
@ -38,14 +38,14 @@
|
|||
class="input-password mt-1 text-selectable"
|
||||
:append-icon="showPassword ? 'visibility' : 'visibility_off'"
|
||||
prepend-icon="lock"
|
||||
color="#05dde1"
|
||||
:color="colors.accent"
|
||||
@click:append="showPassword = !showPassword"
|
||||
@keyup.enter.native="login"
|
||||
></v-text-field>
|
||||
<v-spacer></v-spacer>
|
||||
<div class="pa-3 text-xs-center">
|
||||
<!-- a href="#" target="_blank" class="text-link px-2"><translate>Forgot password?</translate></a -->
|
||||
<v-btn color="#00adb0" round :disabled="loginDisabled"
|
||||
<!-- a href="#" target="_blank" class="text-link px-2" :style="`color: ${colors.link}!important`"><translate>Forgot password?</translate></a -->
|
||||
<v-btn :color="colors.primary" round :disabled="loginDisabled"
|
||||
class="white--text action-confirm px-3" @click.stop="login">
|
||||
<translate>Sign in</translate>
|
||||
<v-icon :right="!rtl" :left="rtl" dark>arrow_forward</v-icon>
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
<strong>{{ config.siteTitle }}</strong> – {{ config.siteCaption }}
|
||||
</v-flex>
|
||||
<v-flex v-if="config.imprint" xs12 sm6 class="pa-0 body-2 text-xs-center text-sm-right white--text">
|
||||
<a v-if="config.imprintUrl" :href="config.imprintUrl" target="_blank" class="text-link">{{ config.imprint }}</a>
|
||||
<a v-if="config.imprintUrl" :href="config.imprintUrl" target="_blank" class="text-link" :style="`color: ${colors.link}!important`">{{ config.imprint }}</a>
|
||||
<span v-else>{{ config.imprint }}</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
|
@ -78,6 +78,11 @@ export default {
|
|||
const c = this.$config.values;
|
||||
|
||||
return {
|
||||
colors: {
|
||||
accent: "#05dde1",
|
||||
primary: "#00adb0",
|
||||
link: "#c8e3e7",
|
||||
},
|
||||
loading: false,
|
||||
showPassword: false,
|
||||
username: "",
|
||||
|
|
|
|||
Loading…
Reference in a new issue