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,31 +1,35 @@
<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>
<h4>{{ $t('settings.new_email') }}</h4>
<input <input
v-model="newEmail" v-model="newEmail"
type="email" type="email"
autocomplete="email" autocomplete="email"
class="input" class="input"
> >
</div> </li>
<div> <li>
<p>{{ $t('settings.current_password') }}</p> <h4>{{ $t('settings.current_password') }}</h4>
<input <input
v-model="changeEmailPassword" v-model="changeEmailPassword"
type="password" type="password"
autocomplete="current-password" autocomplete="current-password"
class="input" class="input"
> >
</div> </li>
<li>
<button <button
class="btn button-default" class="btn button-default"
@click="changeEmail" @click="changeEmail"
> >
{{ $t('settings.save') }} {{ $t('settings.save') }}
</button> </button>
</li>
<li>
<p v-if="changedEmail"> <p v-if="changedEmail">
{{ $t('settings.changed_email') }} {{ $t('settings.changed_email') }}
</p> </p>
@ -33,40 +37,46 @@
<p>{{ $t('settings.change_email_error') }}</p> <p>{{ $t('settings.change_email_error') }}</p>
<p>{{ changeEmailError }}</p> <p>{{ changeEmailError }}</p>
</template> </template>
</li>
</ul>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.change_password') }}</h2> <h3>{{ $t('settings.change_password') }}</h3>
<div> <ul class="setting-list">
<p>{{ $t('settings.current_password') }}</p> <li>
<h4>{{ $t('settings.current_password') }}</h4>
<input <input
v-model="changePasswordInputs[0]" v-model="changePasswordInputs[0]"
type="password" type="password"
class="input" class="input"
> >
</div> </li>
<div> <li>
<p>{{ $t('settings.new_password') }}</p> <h4>{{ $t('settings.new_password') }}</h4>
<input <input
v-model="changePasswordInputs[1]" v-model="changePasswordInputs[1]"
type="password" type="password"
class="input" class="input"
> >
</div> </li>
<div> <li>
<p>{{ $t('settings.confirm_new_password') }}</p> <h4>{{ $t('settings.confirm_new_password') }}</h4>
<input <input
v-model="changePasswordInputs[2]" v-model="changePasswordInputs[2]"
type="password" type="password"
class="input" class="input"
> >
</div> </li>
<li>
<button <button
class="btn button-default" class="btn button-default"
@click="changePassword" @click="changePassword"
> >
{{ $t('settings.save') }} {{ $t('settings.save') }}
</button> </button>
</li>
<li>
<p v-if="changedPassword"> <p v-if="changedPassword">
{{ $t('settings.changed_password') }} {{ $t('settings.changed_password') }}
</p> </p>
@ -76,41 +86,12 @@
<p v-if="changePasswordError"> <p v-if="changePasswordError">
{{ changePasswordError }} {{ changePasswordError }}
</p> </p>
</li>
</ul>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<h2>{{ $t('settings.oauth_tokens') }}</h2> <h3>{{ $t('settings.account_alias') }}</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">
<h2>{{ $t('settings.account_alias') }}</h2>
<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>