slightly adjusted security tab. that tab needs general overhaul

This commit is contained in:
Henry Jameson 2025-11-25 20:02:00 +02:00
commit 23c5a6fab7
2 changed files with 121 additions and 109 deletions

View file

@ -96,7 +96,6 @@
:label="$t('settings.security_tab')" :label="$t('settings.security_tab')"
icon="lock" icon="lock"
data-tab-name="security" data-tab-name="security"
:full-width="true"
> >
<SecurityTab /> <SecurityTab />
</div> </div>

View file

@ -1,116 +1,97 @@
<template> <template>
<div :label="$t('settings.security_tab')"> <div :label="$t('settings.security_tab')">
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.change_email') }}</h2> <h3>{{ $t('settings.change_email') }}</h3>
<div> <ul class="setting-list">
<p>{{ $t('settings.new_email') }}</p> <li>
<input <h4>{{ $t('settings.new_email') }}</h4>
v-model="newEmail" <input
type="email" v-model="newEmail"
autocomplete="email" type="email"
class="input" autocomplete="email"
> class="input"
</div>
<div>
<p>{{ $t('settings.current_password') }}</p>
<input
v-model="changeEmailPassword"
type="password"
autocomplete="current-password"
class="input"
>
</div>
<button
class="btn button-default"
@click="changeEmail"
>
{{ $t('settings.save') }}
</button>
<p v-if="changedEmail">
{{ $t('settings.changed_email') }}
</p>
<template v-if="changeEmailError !== false">
<p>{{ $t('settings.change_email_error') }}</p>
<p>{{ changeEmailError }}</p>
</template>
</div>
<div class="setting-item">
<h2>{{ $t('settings.change_password') }}</h2>
<div>
<p>{{ $t('settings.current_password') }}</p>
<input
v-model="changePasswordInputs[0]"
type="password"
class="input"
>
</div>
<div>
<p>{{ $t('settings.new_password') }}</p>
<input
v-model="changePasswordInputs[1]"
type="password"
class="input"
>
</div>
<div>
<p>{{ $t('settings.confirm_new_password') }}</p>
<input
v-model="changePasswordInputs[2]"
type="password"
class="input"
>
</div>
<button
class="btn button-default"
@click="changePassword"
>
{{ $t('settings.save') }}
</button>
<p v-if="changedPassword">
{{ $t('settings.changed_password') }}
</p>
<p v-else-if="changePasswordError !== false">
{{ $t('settings.change_password_error') }}
</p>
<p v-if="changePasswordError">
{{ changePasswordError }}
</p>
</div>
<div class="setting-item">
<h2>{{ $t('settings.oauth_tokens') }}</h2>
<table class="oauth-tokens">
<thead>
<tr>
<th>{{ $t('settings.app_name') }}</th>
<th>{{ $t('settings.valid_until') }}</th>
<th />
</tr>
</thead>
<tbody>
<tr
v-for="oauthToken in oauthTokens"
:key="oauthToken.id"
> >
<td>{{ oauthToken.appName }}</td> </li>
<td>{{ oauthToken.validUntil }}</td> <li>
<td class="actions"> <h4>{{ $t('settings.current_password') }}</h4>
<button <input
class="btn button-default" v-model="changeEmailPassword"
@click="revokeToken(oauthToken.id)" type="password"
> autocomplete="current-password"
{{ $t('settings.revoke_token') }} class="input"
</button> >
</td> </li>
</tr> <li>
</tbody> <button
</table> class="btn button-default"
@click="changeEmail"
>
{{ $t('settings.save') }}
</button>
</li>
<li>
<p v-if="changedEmail">
{{ $t('settings.changed_email') }}
</p>
<template v-if="changeEmailError !== false">
<p>{{ $t('settings.change_email_error') }}</p>
<p>{{ changeEmailError }}</p>
</template>
</li>
</ul>
</div> </div>
<mfa />
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.account_alias') }}</h2> <h3>{{ $t('settings.change_password') }}</h3>
<ul class="setting-list">
<li>
<h4>{{ $t('settings.current_password') }}</h4>
<input
v-model="changePasswordInputs[0]"
type="password"
class="input"
>
</li>
<li>
<h4>{{ $t('settings.new_password') }}</h4>
<input
v-model="changePasswordInputs[1]"
type="password"
class="input"
>
</li>
<li>
<h4>{{ $t('settings.confirm_new_password') }}</h4>
<input
v-model="changePasswordInputs[2]"
type="password"
class="input"
>
</li>
<li>
<button
class="btn button-default"
@click="changePassword"
>
{{ $t('settings.save') }}
</button>
</li>
<li>
<p v-if="changedPassword">
{{ $t('settings.changed_password') }}
</p>
<p v-else-if="changePasswordError !== false">
{{ $t('settings.change_password_error') }}
</p>
<p v-if="changePasswordError">
{{ changePasswordError }}
</p>
</li>
</ul>
</div>
<div class="setting-item">
<h3>{{ $t('settings.account_alias') }}</h3>
<table> <table>
<thead> <thead>
<tr> <tr>
@ -178,8 +159,40 @@
</template> </template>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.move_account') }}</h2> <h3>{{ $t('settings.oauth_tokens') }}</h3>
<table class="oauth-tokens">
<thead>
<tr>
<th>{{ $t('settings.app_name') }}</th>
<th>{{ $t('settings.valid_until') }}</th>
<th />
</tr>
</thead>
<tbody>
<tr
v-for="oauthToken in oauthTokens"
:key="oauthToken.id"
>
<td>{{ oauthToken.appName }}</td>
<td>{{ oauthToken.validUntil }}</td>
<td class="actions">
<button
class="btn button-default"
@click="revokeToken(oauthToken.id)"
>
{{ $t('settings.revoke_token') }}
</button>
</td>
</tr>
</tbody>
</table>
</div>
<mfa />
<div class="setting-item">
<h3>{{ $t('settings.move_account') }}</h3>
<p>{{ $t('settings.move_account_notes') }}</p> <p>{{ $t('settings.move_account_notes') }}</p>
<div> <div>
<i18n-t <i18n-t
@ -222,7 +235,7 @@
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.delete_account') }}</h2> <h3>{{ $t('settings.delete_account') }}</h3>
<p v-if="!deletingAccount"> <p v-if="!deletingAccount">
{{ $t('settings.delete_account_description') }} {{ $t('settings.delete_account_description') }}
</p> </p>