mirror of https://github.com/nextcloud/server
Merge pull request #33781 from nextcloud/port/login-form/vue-password-components
Use new vue components in login form
This commit is contained in:
Carl Schwan
GitHub
commit
36b2d3dc2a
Binary file not shown.
|
|
@ -1,7 +0,0 @@
|
|||
#reset-password p {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -62,3 +62,9 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.button-vue {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,28 +21,28 @@
|
|||
|
||||
<template>
|
||||
<form ref="loginForm"
|
||||
class="login-form"
|
||||
method="post"
|
||||
name="login"
|
||||
:action="loginActionUrl"
|
||||
@submit="submit">
|
||||
<fieldset>
|
||||
<div v-if="apacheAuthFailed"
|
||||
class="warning">
|
||||
{{ t('core', 'Server side authentication failed!') }}<br>
|
||||
<small>{{ t('core', 'Please contact your administrator.') }}
|
||||
</small>
|
||||
</div>
|
||||
<div v-for="(message, index) in messages"
|
||||
:key="index"
|
||||
class="warning">
|
||||
{{ message }}<br>
|
||||
</div>
|
||||
<div v-if="internalException"
|
||||
class="warning">
|
||||
{{ t('core', 'An internal error occurred.') }}<br>
|
||||
<small>{{ t('core', 'Please try again or contact your administrator.') }}
|
||||
</small>
|
||||
</div>
|
||||
<fieldset class="login-form__fieldset">
|
||||
<NcNoteCard v-if="apacheAuthFailed"
|
||||
:title="t('core', 'Server side authentication failed!')"
|
||||
type="warning">
|
||||
{{ t('core', 'Please contact your administrator.') }}
|
||||
</NcNoteCard>
|
||||
<NcNoteCard v-if="messages.length > 0">
|
||||
<div v-for="(message, index) in messages"
|
||||
:key="index">
|
||||
{{ message }}<br>
|
||||
</div>
|
||||
</NcNoteCard>
|
||||
<NcNoteCard v-if="internalException"
|
||||
:class="t('core', 'An internal error occurred.')"
|
||||
type="warning">
|
||||
{{ t('core', 'Please try again or contact your administrator.') }}
|
||||
</NcNoteCard>
|
||||
<div id="message"
|
||||
class="hidden">
|
||||
<img class="float-spinner"
|
||||
|
|
@ -52,65 +52,35 @@
|
|||
<!-- the following div ensures that the spinner is always inside the #message div -->
|
||||
<div style="clear: both;" />
|
||||
</div>
|
||||
<p class="grouptop"
|
||||
:class="{shake: invalidPassword}">
|
||||
<input id="user"
|
||||
ref="user"
|
||||
v-model="user"
|
||||
type="text"
|
||||
name="user"
|
||||
autocapitalize="none"
|
||||
autocorrect="off"
|
||||
:autocomplete="autoCompleteAllowed ? 'on' : 'off'"
|
||||
:placeholder="t('core', 'Username or email')"
|
||||
:aria-label="t('core', 'Username or email')"
|
||||
required
|
||||
@change="updateUsername">
|
||||
<label for="user" class="infield">{{ t('core', 'Username or email') }}</label>
|
||||
</p>
|
||||
<NcTextField id="user"
|
||||
ref="user"
|
||||
:label="t('core', 'Account name or email')"
|
||||
:label-visible="true"
|
||||
name="user"
|
||||
:value.sync="user"
|
||||
:class="{shake: invalidPassword}"
|
||||
autocapitalize="none"
|
||||
:spellchecking="false"
|
||||
:autocomplete="autoCompleteAllowed ? 'username' : 'off'"
|
||||
required
|
||||
@change="updateUsername" />
|
||||
|
||||
<p class="groupbottom"
|
||||
:class="{shake: invalidPassword}">
|
||||
<input id="password"
|
||||
ref="password"
|
||||
:type="passwordInputType"
|
||||
class="password-with-toggle"
|
||||
name="password"
|
||||
autocorrect="off"
|
||||
autocapitalize="none"
|
||||
:autocomplete="autoCompleteAllowed ? 'current-password' : 'off'"
|
||||
:placeholder="t('core', 'Password')"
|
||||
:aria-label="t('core', 'Password')"
|
||||
required>
|
||||
<label for="password"
|
||||
class="infield">{{ t('core', 'Password') }}</label>
|
||||
<NcButton class="toggle-password"
|
||||
type="tertiary-no-background"
|
||||
:aria-label="isPasswordHidden ? t('core', 'Show password') : t('core', 'Hide password')"
|
||||
@click.stop.prevent="togglePassword">
|
||||
<template #icon>
|
||||
<Eye v-if="isPasswordHidden" :size="20" />
|
||||
<EyeOff v-else :size="20" />
|
||||
</template>
|
||||
</NcButton>
|
||||
</p>
|
||||
<NcPasswordField id="password"
|
||||
ref="password"
|
||||
name="password"
|
||||
:label-visible="true"
|
||||
:class="{shake: invalidPassword}"
|
||||
:value="password"
|
||||
:spellchecking="false"
|
||||
autocapitalize="none"
|
||||
:autocomplete="autoCompleteAllowed ? 'current-password' : 'off'"
|
||||
:label="t('core', 'Password')"
|
||||
:helper-text="errorLabel"
|
||||
:error="isError"
|
||||
required />
|
||||
|
||||
<LoginButton :loading="loading" />
|
||||
|
||||
<p v-if="invalidPassword"
|
||||
class="warning wrongPasswordMsg">
|
||||
{{ t('core', 'Wrong username or password.') }}
|
||||
</p>
|
||||
<p v-else-if="userDisabled"
|
||||
class="warning userDisabledMsg">
|
||||
{{ t('core', 'User disabled') }}
|
||||
</p>
|
||||
|
||||
<p v-if="throttleDelay && throttleDelay > 5000"
|
||||
class="warning throttledMsg">
|
||||
{{ t('core', 'We have detected multiple invalid login attempts from your IP. Therefore your next login is throttled up to 30 seconds.') }}
|
||||
</p>
|
||||
|
||||
<input v-if="redirectUrl"
|
||||
type="hidden"
|
||||
name="redirect_url"
|
||||
|
|
@ -136,20 +106,20 @@
|
|||
import jstz from 'jstimezonedetect'
|
||||
import { generateUrl, imagePath } from '@nextcloud/router'
|
||||
|
||||
import NcButton from '@nextcloud/vue/dist/Components/NcButton'
|
||||
import Eye from 'vue-material-design-icons/Eye'
|
||||
import EyeOff from 'vue-material-design-icons/EyeOff'
|
||||
import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
|
||||
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
|
||||
import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
|
||||
|
||||
import LoginButton from './LoginButton'
|
||||
import LoginButton from './LoginButton.vue'
|
||||
|
||||
export default {
|
||||
name: 'LoginForm',
|
||||
|
||||
components: {
|
||||
NcButton,
|
||||
Eye,
|
||||
EyeOff,
|
||||
LoginButton,
|
||||
NcPasswordField,
|
||||
NcTextField,
|
||||
NcNoteCard,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
@ -188,13 +158,28 @@ export default {
|
|||
loading: false,
|
||||
timezone: jstz.determine().name(),
|
||||
timezoneOffset: (-new Date().getTimezoneOffset() / 60),
|
||||
user: this.username,
|
||||
user: '',
|
||||
password: '',
|
||||
passwordInputType: 'password',
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
isError() {
|
||||
return this.invalidPassword || this.userDisabled
|
||||
|| (this.throttleDelay && this.throttleDelay > 5000)
|
||||
},
|
||||
errorLabel() {
|
||||
if (this.invalidPassword) {
|
||||
return t('core', 'Wrong username or password.')
|
||||
}
|
||||
if (this.userDisabled) {
|
||||
return t('core', 'User disabled')
|
||||
}
|
||||
if (this.throttleDelay && this.throttleDelay > 5000) {
|
||||
return t('core', 'We have detected multiple invalid login attempts from your IP. Therefore your next login is throttled up to 30 seconds.')
|
||||
}
|
||||
return undefined
|
||||
},
|
||||
apacheAuthFailed() {
|
||||
return this.errors.indexOf('apacheAuthFailed') !== -1
|
||||
},
|
||||
|
|
@ -213,27 +198,18 @@ export default {
|
|||
loginActionUrl() {
|
||||
return generateUrl('login')
|
||||
},
|
||||
isPasswordHidden() {
|
||||
return this.passwordInputType === 'password'
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.username === '') {
|
||||
this.$refs.user.focus()
|
||||
} else {
|
||||
this.user = this.username
|
||||
this.$refs.password.focus()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
togglePassword() {
|
||||
if (this.passwordInputType === 'password') {
|
||||
this.passwordInputType = 'text'
|
||||
} else {
|
||||
this.passwordInputType = 'password'
|
||||
}
|
||||
},
|
||||
updateUsername() {
|
||||
this.$emit('update:username', this.user)
|
||||
},
|
||||
|
|
@ -246,10 +222,15 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.toggle-password {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 10px;
|
||||
color: var(--color-text-lighter);
|
||||
.login-form {
|
||||
text-align: left;
|
||||
font-size: 1rem;
|
||||
|
||||
&__fieldset {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,41 +20,37 @@
|
|||
-->
|
||||
|
||||
<template>
|
||||
<form @submit.prevent="submit">
|
||||
<fieldset>
|
||||
<p>
|
||||
<input id="user"
|
||||
v-model="user"
|
||||
type="text"
|
||||
name="user"
|
||||
autocapitalize="off"
|
||||
:placeholder="t('core', 'Username or email')"
|
||||
:aria-label="t('core', 'Username or email')"
|
||||
required
|
||||
@change="updateUsername">
|
||||
<!--<?php p($_['user_autofocus'] ? 'autofocus' : ''); ?>
|
||||
<form class="login-form" @submit.prevent="submit">
|
||||
<fieldset class="login-form__fieldset">
|
||||
<NcTextField id="user"
|
||||
:value.sync="user"
|
||||
name="user"
|
||||
autocapitalize="off"
|
||||
:label="t('core', 'Account name or email')"
|
||||
:label-visible="true"
|
||||
required
|
||||
@change="updateUsername" />
|
||||
<!--<?php p($_['user_autofocus'] ? 'autofocus' : ''); ?>
|
||||
autocomplete="<?php p($_['login_form_autocomplete']); ?>" autocapitalize="none" autocorrect="off"-->
|
||||
<label for="user" class="infield">{{ t('core', 'Username or email') }}</label>
|
||||
</p>
|
||||
<div id="reset-password-wrapper">
|
||||
<LoginButton :value="t('core', 'Reset password')" />
|
||||
</div>
|
||||
<p v-if="message === 'send-success'"
|
||||
class="notecard success">
|
||||
<LoginButton :value="t('core', 'Reset password')" />
|
||||
|
||||
<NcNoteCard v-if="message === 'send-success'"
|
||||
type="success">
|
||||
{{ t('core', 'A password reset message has been sent to the email address of this account. If you do not receive it, check your spam/junk folders or ask your local administrator for help.') }}
|
||||
<br>
|
||||
{{ t('core', 'If it is not there ask your local administrator.') }}
|
||||
</p>
|
||||
<p v-else-if="message === 'send-error'"
|
||||
class="notecard error">
|
||||
</NcNoteCard>
|
||||
<NcNoteCard v-else-if="message === 'send-error'"
|
||||
type="error">
|
||||
{{ t('core', 'Couldn\'t send reset email. Please contact your administrator.') }}
|
||||
</p>
|
||||
<p v-else-if="message === 'reset-error'"
|
||||
class="notecard error">
|
||||
</NcNoteCard>
|
||||
<NcNoteCard v-else-if="message === 'reset-error'"
|
||||
type="error">
|
||||
{{ t('core', 'Password cannot be changed. Please contact your administrator.') }}
|
||||
</p>
|
||||
</NcNoteCard>
|
||||
|
||||
<a href="#"
|
||||
<a class="login-form__link"
|
||||
href="#"
|
||||
@click.prevent="$emit('abort')">
|
||||
{{ t('core', 'Back to login') }}
|
||||
</a>
|
||||
|
|
@ -66,11 +62,15 @@
|
|||
import axios from '@nextcloud/axios'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import LoginButton from './LoginButton.vue'
|
||||
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
|
||||
import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
|
||||
|
||||
export default {
|
||||
name: 'ResetPassword',
|
||||
components: {
|
||||
LoginButton,
|
||||
NcNoteCard,
|
||||
NcTextField,
|
||||
},
|
||||
props: {
|
||||
username: {
|
||||
|
|
@ -130,8 +130,26 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.update {
|
||||
width: auto;
|
||||
<style lang="scss" scoped>
|
||||
.login-form {
|
||||
text-align: left;
|
||||
font-size: 1rem;
|
||||
|
||||
&__fieldset {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: block;
|
||||
font-weight: normal !important;
|
||||
padding-bottom: 1rem;
|
||||
cursor: pointer;
|
||||
font-size: var(--default-font-size);
|
||||
text-align: center;
|
||||
padding: .5rem 1rem 1rem 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div id="login" class="guest-box">
|
||||
<div class="guest-box login-box">
|
||||
<div v-if="!hideLoginForm || directLogin">
|
||||
<transition name="fade" mode="out-in">
|
||||
<div v-if="!passwordlessLogin && !resetPassword && resetPasswordTarget === ''">
|
||||
|
|
@ -34,16 +34,17 @@
|
|||
@submit="loading = true" />
|
||||
<a v-if="canResetPassword && resetPasswordLink !== ''"
|
||||
id="lost-password"
|
||||
class="login-box__link"
|
||||
:href="resetPasswordLink">
|
||||
{{ t('core', 'Forgot password?') }}
|
||||
</a>
|
||||
<a v-else-if="canResetPassword && !resetPassword"
|
||||
id="lost-password"
|
||||
class="login-box__link"
|
||||
:href="resetPasswordLink"
|
||||
@click.prevent="resetPassword = true">
|
||||
{{ t('core', 'Forgot password?') }}
|
||||
</a>
|
||||
<br>
|
||||
<template v-if="hasPasswordless">
|
||||
<div v-if="countAlternativeLogins"
|
||||
class="alternative-logins">
|
||||
|
|
@ -72,7 +73,7 @@
|
|||
:is-localhost="isLocalhost"
|
||||
:has-public-key-credential="hasPublicKeyCredential"
|
||||
@submit="loading = true" />
|
||||
<a href="#" @click.prevent="passwordlessLogin = false">
|
||||
<a href="#" class="login-box__link" @click.prevent="passwordlessLogin = false">
|
||||
{{ t('core', 'Back') }}
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -95,19 +96,16 @@
|
|||
</div>
|
||||
<div v-else>
|
||||
<transition name="fade" mode="out-in">
|
||||
<div class="warning">
|
||||
{{ t('core', 'Login form is disabled.') }}<br>
|
||||
<small>
|
||||
{{ t('core', 'Please contact your administrator.') }}
|
||||
</small>
|
||||
</div>
|
||||
<NcNoteCard type="warning" :title="t('core', 'Login form is disabled.')">
|
||||
{{ t('core', 'Please contact your administrator.') }}
|
||||
</NcNoteCard>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<div id="alternative-logins" class="alternative-logins">
|
||||
<NcButton v-for="(alternativeLogin, index) in alternativeLogins"
|
||||
:key="index"
|
||||
type="primary"
|
||||
type="secondary"
|
||||
:wide="true"
|
||||
:class="[alternativeLogin.class]"
|
||||
role="link"
|
||||
|
|
@ -127,7 +125,8 @@ import LoginForm from '../components/login/LoginForm.vue'
|
|||
import PasswordLessLoginForm from '../components/login/PasswordLessLoginForm.vue'
|
||||
import ResetPassword from '../components/login/ResetPassword.vue'
|
||||
import UpdatePassword from '../components/login/UpdatePassword.vue'
|
||||
import NcButton from '@nextcloud/vue/dist/Components/NcButton'
|
||||
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
|
||||
import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
|
||||
|
||||
const query = queryString.parse(location.search)
|
||||
if (query.clear === '1') {
|
||||
|
|
@ -149,6 +148,7 @@ export default {
|
|||
ResetPassword,
|
||||
UpdatePassword,
|
||||
NcButton,
|
||||
NcNoteCard,
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -192,28 +192,35 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .3s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
body {
|
||||
font-size: var(--default-font-size);
|
||||
}
|
||||
|
||||
#lost-password {
|
||||
padding: 4px;
|
||||
margin: 8px;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
.login-box {
|
||||
width: 300px;
|
||||
|
||||
.alternative-logins button {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&__link {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
font-size: var(--default-font-size);
|
||||
text-align: center;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .3s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.alternative-logins {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
|
||||
.button-vue {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -54,7 +54,7 @@ class LoginPageContext implements Context, ActorAwareInterface {
|
|||
}
|
||||
|
||||
public static function wrongPasswordMessage(): Locator {
|
||||
return Locator::forThe()->xpath("//*[@class = 'warning wrongPasswordMsg' and normalize-space() = 'Wrong username or password.']")->
|
||||
return Locator::forThe()->xpath("//*[@class = 'input-field__helper-text-message input-field__helper-text-message--error' and normalize-space() = 'Wrong username or password.']")->
|
||||
describedAs("Wrong password message in Login page");
|
||||
}
|
||||
|
||||
|
|
@ -62,7 +62,7 @@ class LoginPageContext implements Context, ActorAwareInterface {
|
|||
* @return Locator
|
||||
*/
|
||||
public static function userDisabledMessage() {
|
||||
return Locator::forThe()->xpath("//*[@class = 'warning userDisabledMsg' and normalize-space() = 'User disabled']")->
|
||||
return Locator::forThe()->xpath("//*[@class = 'input-field__helper-text-message input-field__helper-text-message--error' and normalize-space() = 'User disabled']")->
|
||||
describedAs('User disabled message on login page');
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue