Move buttons to separate component (#380)
Co-authored-by: kolaente <k@knt.li> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/380 Co-authored-by: konrad <konrad@kola-entertainments.de> Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad
parent
f3e0b79b26
commit
2aceca54ca
61 changed files with 2315 additions and 1825 deletions
|
|
@ -3,265 +3,216 @@
|
|||
:class="{ 'is-loading': passwordUpdateService.loading || emailUpdateService.loading || totpService.loading }"
|
||||
class="loader-container is-max-width-desktop">
|
||||
<!-- Password update -->
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Update Your Password
|
||||
</p>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
<form @submit.prevent="updatePassword()">
|
||||
<div class="field">
|
||||
<label class="label" for="newPassword">New Password</label>
|
||||
<div class="control">
|
||||
<input
|
||||
@keyup.enter="updatePassword"
|
||||
class="input"
|
||||
id="newPassword"
|
||||
placeholder="The new password..."
|
||||
type="password"
|
||||
v-model="passwordUpdate.newPassword"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="newPasswordConfirm">New Password Confirmation</label>
|
||||
<div class="control">
|
||||
<input
|
||||
@keyup.enter="updatePassword"
|
||||
class="input"
|
||||
id="newPasswordConfirm"
|
||||
placeholder="Confirm your new password..."
|
||||
type="password"
|
||||
v-model="passwordConfirm"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="currentPassword">Current Password</label>
|
||||
<div class="control">
|
||||
<input
|
||||
@keyup.enter="updatePassword"
|
||||
class="input"
|
||||
id="currentPassword"
|
||||
placeholder="Your current password"
|
||||
type="password"
|
||||
v-model="passwordUpdate.oldPassword"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="bigbuttons">
|
||||
<button :class="{ 'is-loading': passwordUpdateService.loading}" @click="updatePassword()"
|
||||
class="button is-primary is-fullwidth">
|
||||
Save
|
||||
</button>
|
||||
<card title="Update Your Password">
|
||||
<form @submit.prevent="updatePassword()">
|
||||
<div class="field">
|
||||
<label class="label" for="newPassword">New Password</label>
|
||||
<div class="control">
|
||||
<input
|
||||
@keyup.enter="updatePassword"
|
||||
class="input"
|
||||
id="newPassword"
|
||||
placeholder="The new password..."
|
||||
type="password"
|
||||
v-model="passwordUpdate.newPassword"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="newPasswordConfirm">New Password Confirmation</label>
|
||||
<div class="control">
|
||||
<input
|
||||
@keyup.enter="updatePassword"
|
||||
class="input"
|
||||
id="newPasswordConfirm"
|
||||
placeholder="Confirm your new password..."
|
||||
type="password"
|
||||
v-model="passwordConfirm"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="currentPassword">Current Password</label>
|
||||
<div class="control">
|
||||
<input
|
||||
@keyup.enter="updatePassword"
|
||||
class="input"
|
||||
id="currentPassword"
|
||||
placeholder="Your current password"
|
||||
type="password"
|
||||
v-model="passwordUpdate.oldPassword"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<x-button
|
||||
:loading="passwordUpdateService.loading"
|
||||
@click="updatePassword()"
|
||||
class="is-fullwidth mt-4">
|
||||
Save
|
||||
</x-button>
|
||||
</card>
|
||||
|
||||
<!-- Update E-Mail -->
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Update Your E-Mail Address
|
||||
</p>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
<form @submit.prevent="updateEmail()">
|
||||
<div class="field">
|
||||
<label class="label" for="newEmail">New Email Address</label>
|
||||
<div class="control">
|
||||
<input
|
||||
@keyup.enter="updateEmail"
|
||||
class="input"
|
||||
id="newEmail"
|
||||
placeholder="The new email address..."
|
||||
type="email"
|
||||
v-model="emailUpdate.newEmail"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="currentPassword">Current Password</label>
|
||||
<div class="control">
|
||||
<input
|
||||
@keyup.enter="updateEmail"
|
||||
class="input"
|
||||
id="currentPassword"
|
||||
placeholder="Your current password"
|
||||
type="password"
|
||||
v-model="emailUpdate.password"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="bigbuttons">
|
||||
<button :class="{ 'is-loading': emailUpdateService.loading}" @click="updateEmail()"
|
||||
class="button is-primary is-fullwidth">
|
||||
Save
|
||||
</button>
|
||||
<card title="Update Your E-Mail Address">
|
||||
<form @submit.prevent="updateEmail()">
|
||||
<div class="field">
|
||||
<label class="label" for="newEmail">New Email Address</label>
|
||||
<div class="control">
|
||||
<input
|
||||
@keyup.enter="updateEmail"
|
||||
class="input"
|
||||
id="newEmail"
|
||||
placeholder="The new email address..."
|
||||
type="email"
|
||||
v-model="emailUpdate.newEmail"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="currentPassword">Current Password</label>
|
||||
<div class="control">
|
||||
<input
|
||||
@keyup.enter="updateEmail"
|
||||
class="input"
|
||||
id="currentPassword"
|
||||
placeholder="Your current password"
|
||||
type="password"
|
||||
v-model="emailUpdate.password"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<x-button
|
||||
:loading="emailUpdateService.loading"
|
||||
@click="updateEmail()"
|
||||
class="is-fullwidth mt-4">
|
||||
Save
|
||||
</x-button>
|
||||
</card>
|
||||
|
||||
<!-- General -->
|
||||
<div class="card update-name">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
General Settings
|
||||
</p>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
<div class="field">
|
||||
<label class="label" for="newName">Name</label>
|
||||
<div class="control">
|
||||
<input
|
||||
@keyup.enter="updateSettings"
|
||||
class="input"
|
||||
id="newName"
|
||||
placeholder="The new name"
|
||||
type="text"
|
||||
v-model="settings.name"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" v-model="settings.emailRemindersEnabled"/>
|
||||
Send me Reminders for tasks via Email
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="bigbuttons">
|
||||
<button :class="{ 'is-loading': userSettingsService.loading}" @click="updateSettings()"
|
||||
class="button is-primary is-fullwidth">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
<card title="General Settings" class="general-settings">
|
||||
<div class="field">
|
||||
<label class="label" for="newName">Name</label>
|
||||
<div class="control">
|
||||
<input
|
||||
@keyup.enter="updateSettings"
|
||||
class="input"
|
||||
id="newName"
|
||||
placeholder="The new name"
|
||||
type="text"
|
||||
v-model="settings.name"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" v-model="settings.emailRemindersEnabled"/>
|
||||
Send me Reminders for tasks via Email
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<x-button
|
||||
:loading="userSettingsService.loading"
|
||||
@click="updateSettings()"
|
||||
class="is-fullwidth mt-4"
|
||||
>
|
||||
Save
|
||||
</x-button>
|
||||
</card>
|
||||
|
||||
<!-- Avatar -->
|
||||
<avatar-settings/>
|
||||
|
||||
<!-- TOTP -->
|
||||
<div class="card" v-if="totpEnabled">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Two Factor Authentication
|
||||
<card title="Two Factor Authentication" v-if="totpEnabled">
|
||||
<x-button
|
||||
:loading="totpService.loading"
|
||||
@click="totpEnroll()"
|
||||
v-if="!totpEnrolled && totp.secret === ''">
|
||||
Enroll
|
||||
</x-button>
|
||||
<template v-else-if="totp.secret !== '' && !totp.enabled">
|
||||
<p>
|
||||
To finish your setup, use this secret in your totp app (Google Authenticator or similar):
|
||||
<strong>{{ totp.secret }}</strong><br/>
|
||||
After that, enter a code from your app below.
|
||||
</p>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<a
|
||||
:class="{ 'is-loading': totpService.loading }"
|
||||
@click="totpEnroll()"
|
||||
class="button is-primary"
|
||||
v-if="!totpEnrolled && totp.secret === ''">
|
||||
Enroll
|
||||
</a>
|
||||
<div class="content" v-else-if="totp.secret !== '' && !totp.enabled">
|
||||
<p>
|
||||
To finish your setup, use this secret in your totp app (Google Authenticator or similar):
|
||||
<strong>{{ totp.secret }}</strong><br/>
|
||||
After that, enter a code from your app below.
|
||||
</p>
|
||||
<p>
|
||||
Alternatively you can scan this QR code:<br/>
|
||||
<img :src="totpQR" alt=""/>
|
||||
</p>
|
||||
<p>
|
||||
Alternatively you can scan this QR code:<br/>
|
||||
<img :src="totpQR" alt=""/>
|
||||
</p>
|
||||
<div class="field">
|
||||
<label class="label" for="totpConfirmPasscode">Passcode</label>
|
||||
<div class="control">
|
||||
<input
|
||||
@keyup.enter="totpConfirm()"
|
||||
class="input"
|
||||
id="totpConfirmPasscode"
|
||||
placeholder="A code generated by your totp application"
|
||||
type="text"
|
||||
v-model="totpConfirmPasscode"/>
|
||||
</div>
|
||||
</div>
|
||||
<x-button @click="totpConfirm()">Confirm</x-button>
|
||||
</template>
|
||||
<template v-else-if="totp.secret !== '' && totp.enabled">
|
||||
<p>
|
||||
You've sucessfully set up two factor authentication!
|
||||
</p>
|
||||
<p v-if="!totpDisableForm">
|
||||
<x-button @click="totpDisableForm = true" class="is-danger">Disable</x-button>
|
||||
</p>
|
||||
<div v-if="totpDisableForm">
|
||||
<div class="field">
|
||||
<label class="label" for="totpConfirmPasscode">Passcode</label>
|
||||
<label class="label" for="currentPassword">Please Enter Your Password</label>
|
||||
<div class="control">
|
||||
<input
|
||||
@keyup.enter="totpConfirm()"
|
||||
@keyup.enter="totpDisable"
|
||||
class="input"
|
||||
id="totpConfirmPasscode"
|
||||
placeholder="A code generated by your totp application"
|
||||
type="text"
|
||||
v-model="totpConfirmPasscode"/>
|
||||
id="currentPassword"
|
||||
placeholder="Your current password"
|
||||
type="password"
|
||||
v-focus
|
||||
v-model="totpDisablePassword"/>
|
||||
</div>
|
||||
</div>
|
||||
<a @click="totpConfirm()" class="button is-primary">Confirm</a>
|
||||
<x-button @click="totpDisable()" class="is-danger">Disable two factor authentication</x-button>
|
||||
</div>
|
||||
<div class="content" v-else-if="totp.secret !== '' && totp.enabled">
|
||||
<p>
|
||||
You've sucessfully set up two factor authentication!
|
||||
</p>
|
||||
<p v-if="!totpDisableForm">
|
||||
<a @click="totpDisableForm = true" class="button is-danger">Disable</a>
|
||||
</p>
|
||||
<div v-if="totpDisableForm">
|
||||
<div class="field">
|
||||
<label class="label" for="currentPassword">Please Enter Your Password</label>
|
||||
<div class="control">
|
||||
<input
|
||||
@keyup.enter="totpDisable"
|
||||
class="input"
|
||||
id="currentPassword"
|
||||
placeholder="Your current password"
|
||||
type="password"
|
||||
v-focus
|
||||
v-model="totpDisablePassword"/>
|
||||
</div>
|
||||
</div>
|
||||
<a @click="totpDisable()" class="button is-danger">Disable two factor authentication</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</card>
|
||||
|
||||
<!-- Migration -->
|
||||
<div class="card" v-if="migratorsEnabled">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Migrate from other services to Vikunja
|
||||
</p>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<router-link
|
||||
:to="{name: 'migrate.start'}"
|
||||
class="button is-primary"
|
||||
v-if="migratorsEnabled"
|
||||
>
|
||||
Import your data into Vikunja
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<card title="Migrate from other services to Vikunja" v-if="migratorsEnabled">
|
||||
<x-button
|
||||
:to="{name: 'migrate.start'}"
|
||||
>
|
||||
Import your data into Vikunja
|
||||
</x-button>
|
||||
</card>
|
||||
|
||||
<!-- Caldav -->
|
||||
<div class="card" v-if="caldavEnabled">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Caldav
|
||||
</p>
|
||||
</header>
|
||||
<div class="card-content content">
|
||||
<p>
|
||||
You can connect Vikunja to caldav clients to view and manage all tasks from different clients.
|
||||
Enter this url into your client:
|
||||
</p>
|
||||
<div class="field has-addons no-input-mobile">
|
||||
<div class="control is-expanded">
|
||||
<input type="text" v-model="caldavUrl" class="input" readonly/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a @click="copy(caldavUrl)" class="button is-primary has-no-shadow" v-tooltip="'Copy to clipboard'">
|
||||
<span class="icon">
|
||||
<icon icon="paste"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<card v-if="caldavEnabled" title="Caldav">
|
||||
<p>
|
||||
You can connect Vikunja to caldav clients to view and manage all tasks from different clients.
|
||||
Enter this url into your client:
|
||||
</p>
|
||||
<div class="field has-addons no-input-mobile">
|
||||
<div class="control is-expanded">
|
||||
<input type="text" v-model="caldavUrl" class="input" readonly/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<x-button
|
||||
@click="copy(caldavUrl)"
|
||||
:shadow="false"
|
||||
v-tooltip="'Copy to clipboard'"
|
||||
icon="paste"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
<a href="https://vikunja.io/docs/caldav/" target="_blank">
|
||||
More information about caldav in Vikunja
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<a href="https://vikunja.io/docs/caldav/" target="_blank">
|
||||
More information about caldav in Vikunja
|
||||
</a>
|
||||
</p>
|
||||
</card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Reference in a new issue