UX: Improve login form
This commit is contained in:
Michael Mayer
parent
fcfa258769
commit
d66f59b623
3 changed files with 36 additions and 29 deletions
|
|
@ -1,34 +1,37 @@
|
|||
<template>
|
||||
<div class="p-page p-page-login">
|
||||
<v-toolbar flat color="secondary" dense class="mb-3" :height="42">
|
||||
<v-toolbar-title class="subheading">
|
||||
{{ description }}
|
||||
</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-form ref="form" dense autocomplete="off" class="p-form-login" accept-charset="UTF-8" @submit.prevent="login">
|
||||
<v-card flat tile class="ma-2 application">
|
||||
<v-card-actions>
|
||||
<v-layout wrap align-top>
|
||||
<v-flex xs12 class="pa-2">
|
||||
<p class="subheading">
|
||||
<translate>Please enter your name and password:</translate>
|
||||
</p>
|
||||
</v-flex>
|
||||
<v-flex xs12 class="pa-2">
|
||||
|
||||
<v-text-field
|
||||
v-model="username"
|
||||
required hide-details
|
||||
type="text"
|
||||
:disabled="loading"
|
||||
:label="$gettext('Name')"
|
||||
color="accent"
|
||||
flat solo required hide-details
|
||||
type="text"
|
||||
browser-autocomplete="off"
|
||||
color="secondary-dark"
|
||||
placeholder="••••••••"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 class="pa-2">
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
required hide-details
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
:disabled="loading"
|
||||
:label="$gettext('Password')"
|
||||
color="accent"
|
||||
flat solo required hide-details
|
||||
browser-autocomplete="off"
|
||||
color="secondary-dark"
|
||||
placeholder="••••••••"
|
||||
:append-icon="showPassword ? 'visibility' : 'visibility_off'"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
@click:append="showPassword = !showPassword"
|
||||
@keyup.enter.native="login"
|
||||
></v-text-field>
|
||||
|
|
@ -37,7 +40,7 @@
|
|||
<v-btn color="primary-button"
|
||||
class="white--text ml-0"
|
||||
depressed
|
||||
:disabled="loading || !this.password || !this.username"
|
||||
:disabled="loading || !password || !username"
|
||||
@click.stop="login">
|
||||
<translate>Sign in</translate>
|
||||
<v-icon :right="!rtl" :left="rtl" dark>login</v-icon>
|
||||
|
|
@ -61,6 +64,8 @@ export default {
|
|||
showPassword: false,
|
||||
username: "admin",
|
||||
password: "",
|
||||
caption: this.$config.values.siteCaption,
|
||||
description: this.$config.values.siteDescription,
|
||||
nextUrl: this.$route.params.nextUrl ? this.$route.params.nextUrl : "/",
|
||||
rtl: this.$rtl,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,26 +6,26 @@
|
|||
<v-layout wrap align-top>
|
||||
<v-flex xs12 class="pa-2">
|
||||
<v-text-field
|
||||
v-model="oldPassword" hide-details
|
||||
required
|
||||
v-model="oldPassword"
|
||||
hide-details required
|
||||
type="password"
|
||||
:disabled="busy"
|
||||
browser-autocomplete="off"
|
||||
:label="$gettext('Current Password')"
|
||||
color="secondary-dark"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs12 class="pa-2">
|
||||
<v-text-field
|
||||
v-model="newPassword" required counter
|
||||
persistent-hint
|
||||
v-model="newPassword"
|
||||
required counter persistent-hint
|
||||
type="password"
|
||||
:disabled="busy"
|
||||
browser-autocomplete="off"
|
||||
:label="$gettext('New Password')"
|
||||
color="secondary-dark"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
:hint="$gettext('At least 6 characters.')"
|
||||
></v-text-field>
|
||||
|
|
@ -33,13 +33,13 @@
|
|||
|
||||
<v-flex xs12 class="pa-2">
|
||||
<v-text-field
|
||||
v-model="confirmPassword" required counter
|
||||
persistent-hint
|
||||
v-model="confirmPassword"
|
||||
required counter persistent-hint
|
||||
type="password"
|
||||
:disabled="busy"
|
||||
browser-autocomplete="off"
|
||||
:label="$gettext('Retype Password')"
|
||||
color="secondary-dark"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
:hint="$gettext('Please confirm your new password.')"
|
||||
@keyup.enter.native="confirm"
|
||||
|
|
|
|||
|
|
@ -47,6 +47,8 @@ import Help from "pages/help.vue";
|
|||
import { $gettext } from "common/vm";
|
||||
|
||||
const c = window.__CONFIG__;
|
||||
const appName = c.name;
|
||||
const siteTitle = c.siteTitle ? c.siteTitle : c.name;
|
||||
|
||||
export default [
|
||||
{
|
||||
|
|
@ -58,37 +60,37 @@ export default [
|
|||
name: "about",
|
||||
path: "/about",
|
||||
component: About,
|
||||
meta: { title: c.name, auth: false },
|
||||
meta: { title: appName, auth: false },
|
||||
},
|
||||
{
|
||||
name: "feedback",
|
||||
path: "/feedback",
|
||||
component: Feedback,
|
||||
meta: { title: c.name, auth: true },
|
||||
meta: { title: appName, auth: true },
|
||||
},
|
||||
{
|
||||
name: "license",
|
||||
path: "/about/license",
|
||||
component: License,
|
||||
meta: { title: c.name, auth: false },
|
||||
meta: { title: appName, auth: false },
|
||||
},
|
||||
{
|
||||
name: "help",
|
||||
path: "/help*",
|
||||
component: Help,
|
||||
meta: { title: c.name, auth: false },
|
||||
meta: { title: appName, auth: false },
|
||||
},
|
||||
{
|
||||
name: "login",
|
||||
path: "/login",
|
||||
component: Login,
|
||||
meta: { auth: false },
|
||||
meta: { title: siteTitle, auth: false },
|
||||
},
|
||||
{
|
||||
name: "browse",
|
||||
path: "/browse",
|
||||
component: Photos,
|
||||
meta: { title: c.name, auth: true },
|
||||
meta: { title: appName, auth: true },
|
||||
},
|
||||
{
|
||||
name: "all",
|
||||
|
|
@ -240,7 +242,7 @@ export default [
|
|||
name: "errors",
|
||||
path: "/library/errors",
|
||||
component: Errors,
|
||||
meta: { title: c.name, auth: true },
|
||||
meta: { title: appName, auth: true },
|
||||
},
|
||||
{
|
||||
name: "labels",
|
||||
|
|
|
|||
Loading…
Reference in a new issue