Skip to content

Use new vue components in login form #33781

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CarlSchwan merged 2 commits into from
Sep 6, 2022
Merged

Use new vue components in login form #33781

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
df40fc9
Use new vue components in login form
CarlSchwan Aug 31, 2022
43d1aa3
More cleaning up of the login component
CarlSchwan Sep 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
More cleaning up of the login component 
- Move css in scopped vue components
- Port to NcNoteCard all the warning messages

Signed-off-by: Carl Schwan <[email protected]>
  • Loading branch information
@CarlSchwan
CarlSchwan committed Sep 6, 2022
commit 43d1aa38df776a6767723db262af9e099a88fdfc
39 changes: 5 additions & 34 deletions core/css/guest.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,8 +138,7 @@ form #datadirField legend {
}

/* Buttons and input */
#submit-wrapper,
#reset-password-wrapper {
#submit-wrapper {
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -155,8 +154,7 @@ form #datadirField legend {
}


#submit-wrapper .submit-icon,
#reset-password-wrapper .submit-icon {
#submit-wrapper .submit-icon {
position: absolute;
right: 24px;
transition: right 100ms ease-in-out;
Expand All @@ -176,12 +174,6 @@ form #datadirField legend {
right: 20px;
}

#reset-password-submit {
padding: 10px;
overflow: hidden;
text-overflow: ellipsis;
}

#submit-wrapper .icon-loading-small {
position: absolute;
top: 22px;
Expand Down Expand Up @@ -457,25 +449,6 @@ form .warning input[type='checkbox']+label {
#remember_login {
margin: 18px 5px 0 16px !important;
}
.lost-password-container {
display: inline-block;
margin: 10px 0;
text-align: center;
width: 100%;
}
#lost-password,
#lost-password-back,
#reset-password-wrapper + a {
display: inline-block;
font-weight: normal !important;
padding: 12px 12px 0 12px;
cursor: pointer;
}
#forgot-password {
padding: 11px;
float: right;
color: var(--color-primary-text);
}

/* fixes for update page TODO should be fixed some time in a proper way */
/* this is just for an error while updating the ownCloud instance */
Expand Down Expand Up @@ -750,24 +723,22 @@ a.legal {
}

.notecard.success {
--note-background: rgba(var(--color-success-rgb), 0.2);
--note-background: rgba(var(--color-success-rgb), 0.1);
--note-theme: var(--color-success);
}
.notecard.error {
--note-background: rgba(var(--color-error-rgb), 0.2);
--note-background: rgba(var(--color-error-rgb), 0.1);
--note-theme: var(--color-error);
}
.notecard.warning {
--note-background: rgba(var(--color-warning-rgb), 0.2);
--note-background: rgba(var(--color-warning-rgb), 0.1);
--note-theme: var(--color-warning);
}
.notecard {
color: var(--color-text-light);
background-color: var(--note-background);
border: 1px solid var(--color-border);
border-left: 4px solid var(--note-theme);
border-radius: var(--border-radius);
box-shadow: rgba(43, 42, 51, 0.05) 0px 1px 2px 0px;
margin: 1rem 0;
margin-top: 1rem;
padding: 1rem;
Expand Down
7 changes: 0 additions & 7 deletions core/css/lostpassword/resetpassword.css
View file
Open in desktop

This file was deleted.

6 changes: 6 additions & 0 deletions core/src/components/login/LoginButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,3 +62,9 @@ export default {
},
}
</script>

<style lang="scss" scoped>
.button-vue {
margin-top: .5rem;
}
</style>
63 changes: 29 additions & 34 deletions core/src/components/login/LoginForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,23 +27,22 @@
:action="loginActionUrl"
@submit="submit">
<fieldset class="login-form__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>
<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"
Expand All @@ -54,30 +53,29 @@
<div style="clear: both;" />
</div>
<NcTextField id="user"
:label="t('core', 'Username or email')"
:labelVisible="true"
ref="user"
:label="t('core', 'Account name or email')"
:label-visible="true"
name="user"
:class="{shake: invalidPassword}"
:value.sync="user"
:class="{shake: invalidPassword}"
autocapitalize="none"
:spellchecking="false"
:autocomplete="autoCompleteAllowed ? 'username' : 'off'"
:aria-label="t('core', 'Username or email')"
required
@change="updateUsername" />

<NcPasswordField id="password"
ref="password"
name="password"
:labelVisible="true"
:label-visible="true"
:class="{shake: invalidPassword}"
:value.sync="password"
:value="password"
:spellchecking="false"
autocapitalize="none"
:autocomplete="autoCompleteAllowed ? 'current-password' : 'off'"
:label="t('core', 'Password')"
:helperText="errorLabel"
:helper-text="errorLabel"
:error="isError"
required />

Expand Down Expand Up @@ -108,24 +106,20 @@
import jstz from 'jstimezonedetect'
import { generateUrl, imagePath } from '@nextcloud/router'

import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
import Eye from 'vue-material-design-icons/Eye'
import EyeOff from 'vue-material-design-icons/EyeOff'
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: {
Expand Down Expand Up @@ -164,7 +158,7 @@ export default {
loading: false,
timezone: jstz.determine().name(),
timezoneOffset: (-new Date().getTimezoneOffset() / 60),
user: this.username,
user: '',
password: '',
}
},
Expand All @@ -184,7 +178,7 @@ export default {
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;
return undefined
},
apacheAuthFailed() {
return this.errors.indexOf('apacheAuthFailed') !== -1
Expand All @@ -210,6 +204,7 @@ export default {
if (this.username === '') {
this.$refs.user.focus()
} else {
this.user = this.username
this.$refs.password.focus()
}
},
Expand All @@ -235,7 +230,7 @@ export default {
width: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
gap: .5rem;
}
}
</style>
30 changes: 20 additions & 10 deletions core/src/components/login/ResetPassword.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,20 @@
-->

<template>
<form @submit.prevent="submit" class="login-form">
<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', 'Username or email')"
:labelVisible="true"
:label="t('core', 'Account name or email')"
:label-visible="true"
required
@change="updateUsername" />
<!--<?php p($_['user_autofocus'] ? 'autofocus' : ''); ?>
<!--<?php p($_['user_autofocus'] ? 'autofocus' : ''); ?>
autocomplete="<?php p($_['login_form_autocomplete']); ?>" autocapitalize="none" autocorrect="off"-->
<div id="reset-password-wrapper">
<LoginButton :value="t('core', 'Reset password')" />
</div>
<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.') }}
Expand All @@ -50,7 +49,8 @@
{{ t('core', 'Password cannot be changed. Please contact your administrator.') }}
</NcNoteCard>

<a href="#"
<a class="login-form__link"
href="#"
@click.prevent="$emit('abort')">
{{ t('core', 'Back to login') }}
</a>
Expand Down Expand Up @@ -130,7 +130,7 @@ export default {
}
</script>

<style scoped>
<style lang="scss" scoped>
.login-form {
text-align: left;
font-size: 1rem;
Expand All @@ -139,7 +139,17 @@ export default {
width: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
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>
Loading