mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
refactor DeleteData template and CSS
This commit is contained in:
Alina Beck
parent
41ef496d6b
commit
509892b6ca
@ -88,7 +88,7 @@ describe('DeleteData.vue', () => {
|
||||
|
||||
describe('calls the delete user mutation', () => {
|
||||
beforeEach(() => {
|
||||
enableDeletionInput = wrapper.find('.enable-deletion-input input')
|
||||
enableDeletionInput = wrapper.find('.ds-input')
|
||||
enableDeletionInput.setValue(deleteAccountName)
|
||||
deleteAccountBtn = wrapper.find('[data-test="delete-button"]')
|
||||
})
|
||||
@ -107,7 +107,7 @@ describe('DeleteData.vue', () => {
|
||||
|
||||
it("deletes a user's posts if requested", () => {
|
||||
mocks.$t.mockImplementation(() => deleteContributionsMessage)
|
||||
enableContributionDeletionCheckbox = wrapper.findAll('.checkbox-container input').at(0)
|
||||
enableContributionDeletionCheckbox = wrapper.findAll('input[type="checkbox"]').at(0)
|
||||
enableContributionDeletionCheckbox.trigger('click')
|
||||
deleteAccountBtn.trigger('click')
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
|
||||
@ -122,7 +122,7 @@ describe('DeleteData.vue', () => {
|
||||
|
||||
it("deletes a user's comments if requested", () => {
|
||||
mocks.$t.mockImplementation(() => deleteCommentsMessage)
|
||||
enableCommentDeletionCheckbox = wrapper.findAll('.checkbox-container input').at(1)
|
||||
enableCommentDeletionCheckbox = wrapper.findAll('input[type="checkbox"]').at(1)
|
||||
enableCommentDeletionCheckbox.trigger('click')
|
||||
deleteAccountBtn.trigger('click')
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
|
||||
@ -137,10 +137,10 @@ describe('DeleteData.vue', () => {
|
||||
|
||||
it("deletes a user's posts and comments if requested", () => {
|
||||
mocks.$t.mockImplementation(() => deleteContributionsMessage)
|
||||
enableContributionDeletionCheckbox = wrapper.findAll('.checkbox-container input').at(0)
|
||||
enableContributionDeletionCheckbox = wrapper.findAll('input[type="checkbox"]').at(0)
|
||||
enableContributionDeletionCheckbox.trigger('click')
|
||||
mocks.$t.mockImplementation(() => deleteCommentsMessage)
|
||||
enableCommentDeletionCheckbox = wrapper.findAll('.checkbox-container input').at(1)
|
||||
enableCommentDeletionCheckbox = wrapper.findAll('input[type="checkbox"]').at(1)
|
||||
enableCommentDeletionCheckbox.trigger('click')
|
||||
deleteAccountBtn.trigger('click')
|
||||
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
|
||||
@ -166,7 +166,7 @@ describe('DeleteData.vue', () => {
|
||||
|
||||
describe('error handling', () => {
|
||||
it('shows an error toaster when the mutation rejects', async () => {
|
||||
enableDeletionInput = wrapper.find('.enable-deletion-input input')
|
||||
enableDeletionInput = wrapper.find('.ds-input')
|
||||
enableDeletionInput.setValue(deleteAccountName)
|
||||
await Vue.nextTick()
|
||||
deleteAccountBtn = wrapper.find('[data-test="delete-button"]')
|
||||
|
||||
@ -1,80 +1,46 @@
|
||||
<template>
|
||||
<div>
|
||||
<ds-card hover>
|
||||
<ds-space />
|
||||
<ds-container>
|
||||
<ds-flex>
|
||||
<ds-flex-item :width="{ base: '22%', sm: '12%', md: '12%', lg: '8%' }">
|
||||
<base-icon name="warning" class="delete-warning-icon" />
|
||||
</ds-flex-item>
|
||||
<ds-flex-item :width="{ base: '78%', sm: '88%', md: '88%', lg: '92%' }">
|
||||
<ds-heading>{{ $t('settings.deleteUserAccount.name') }}</ds-heading>
|
||||
</ds-flex-item>
|
||||
<ds-space />
|
||||
<ds-heading tag="h4">
|
||||
{{ $t('settings.deleteUserAccount.accountDescription') }}
|
||||
</ds-heading>
|
||||
</ds-flex>
|
||||
</ds-container>
|
||||
<ds-space />
|
||||
<ds-container>
|
||||
<transition name="slide-up">
|
||||
<div v-if="deleteEnabled">
|
||||
<label v-if="currentUser.contributionsCount" class="checkbox-container">
|
||||
<input type="checkbox" v-model="deleteContributions" />
|
||||
<span class="checkmark"></span>
|
||||
{{
|
||||
$t('settings.deleteUserAccount.contributionsCount', {
|
||||
count: currentUser.contributionsCount,
|
||||
})
|
||||
}}
|
||||
</label>
|
||||
<ds-space margin-bottom="small" />
|
||||
<label v-if="currentUser.commentedCount" class="checkbox-container">
|
||||
<input type="checkbox" v-model="deleteComments" />
|
||||
<span class="checkmark"></span>
|
||||
{{
|
||||
$t('settings.deleteUserAccount.commentedCount', {
|
||||
count: currentUser.commentedCount,
|
||||
})
|
||||
}}
|
||||
</label>
|
||||
<ds-space margin-bottom="small" />
|
||||
<ds-section id="delete-user-account-warning">
|
||||
<div v-html="$t('settings.deleteUserAccount.accountWarning')"></div>
|
||||
</ds-section>
|
||||
</div>
|
||||
</transition>
|
||||
</ds-container>
|
||||
<template slot="footer" class="delete-data-footer">
|
||||
<ds-container>
|
||||
<div
|
||||
class="delete-input-label"
|
||||
v-html="$t('settings.deleteUserAccount.pleaseConfirm', { confirm: currentUser.name })"
|
||||
></div>
|
||||
<ds-space margin-bottom="xx-small" />
|
||||
<ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'large' }">
|
||||
<ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1.75 }">
|
||||
<ds-input v-model="enableDeletionValue" class="enable-deletion-input" />
|
||||
</ds-flex-item>
|
||||
<ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1 }">
|
||||
<base-button
|
||||
icon="trash"
|
||||
danger
|
||||
filled
|
||||
:disabled="!deleteEnabled"
|
||||
data-test="delete-button"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
{{ $t('settings.deleteUserAccount.name') }}
|
||||
</base-button>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-container>
|
||||
</template>
|
||||
</ds-card>
|
||||
</div>
|
||||
<base-card class="delete-data">
|
||||
<h2 class="card-heading">
|
||||
<base-icon name="warning" />
|
||||
{{ $t('settings.deleteUserAccount.name') }}
|
||||
</h2>
|
||||
<label>
|
||||
{{ $t('settings.deleteUserAccount.pleaseConfirm', { confirm: currentUser.name }) }}
|
||||
</label>
|
||||
<ds-input v-model="enableDeletionValue" />
|
||||
<p class="notice">{{ $t('settings.deleteUserAccount.accountDescription') }}</p>
|
||||
<label v-if="currentUser.contributionsCount" class="checkbox">
|
||||
<input type="checkbox" v-model="deleteContributions" />
|
||||
{{
|
||||
$t('settings.deleteUserAccount.contributionsCount', {
|
||||
count: currentUser.contributionsCount,
|
||||
})
|
||||
}}
|
||||
</label>
|
||||
<label v-if="currentUser.commentedCount" class="checkbox">
|
||||
<input type="checkbox" v-model="deleteComments" />
|
||||
{{
|
||||
$t('settings.deleteUserAccount.commentedCount', {
|
||||
count: currentUser.commentedCount,
|
||||
})
|
||||
}}
|
||||
</label>
|
||||
<section v-if="deleteEnabled" class="warning">
|
||||
<p>{{ $t('settings.deleteUserAccount.accountWarning') }}</p>
|
||||
</section>
|
||||
<base-button
|
||||
icon="trash"
|
||||
danger
|
||||
filled
|
||||
:disabled="!deleteEnabled"
|
||||
data-test="delete-button"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
{{ $t('settings.deleteUserAccount.name') }}
|
||||
</base-button>
|
||||
</base-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
import gql from 'graphql-tag'
|
||||
@ -131,96 +97,47 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.delete-warning-icon {
|
||||
color: $color-danger;
|
||||
font-size: $font-size-xxx-large;
|
||||
}
|
||||
.delete-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.checkbox-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
cursor: pointer;
|
||||
font-size: $font-size-large;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
> .card-heading > .base-icon {
|
||||
color: $color-danger;
|
||||
}
|
||||
|
||||
.checkbox-container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
> .ds-form-item {
|
||||
align-self: flex-start;
|
||||
margin-top: $space-xxx-small;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border: 2px solid $background-color-inverse-softer;
|
||||
background-color: $background-color-base;
|
||||
border-radius: $border-radius-x-large;
|
||||
}
|
||||
> .notice {
|
||||
font-weight: $font-weight-bold;
|
||||
margin-bottom: $space-small;
|
||||
}
|
||||
|
||||
.checkbox-container:hover input ~ .checkmark {
|
||||
background-color: $background-color-softest;
|
||||
}
|
||||
> .checkbox {
|
||||
margin-left: $space-base;
|
||||
margin-bottom: $space-x-small;
|
||||
|
||||
.checkbox-container input:checked ~ .checkmark {
|
||||
background-color: $background-color-danger-active;
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-bottom: $space-small;
|
||||
}
|
||||
}
|
||||
|
||||
.checkmark:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
> .warning {
|
||||
padding: $space-large;
|
||||
margin-bottom: $space-small;
|
||||
border-radius: $border-radius-base;
|
||||
|
||||
.checkbox-container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
color: $color-danger;
|
||||
background-color: $color-danger-inverse;
|
||||
border-left: 4px solid $color-danger;
|
||||
}
|
||||
|
||||
.checkbox-container .checkmark:after {
|
||||
left: 6px;
|
||||
top: 3px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid $background-color-base;
|
||||
border-width: 0 $border-size-large $border-size-large 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.enable-deletion-input input:focus {
|
||||
border-color: $border-color-danger;
|
||||
}
|
||||
|
||||
.delete-input-label {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
b.is-danger {
|
||||
color: $text-color-danger;
|
||||
}
|
||||
|
||||
.delete-data-footer {
|
||||
border-top: $border-size-base solid $border-color-softest;
|
||||
background-color: $background-color-danger-inverse;
|
||||
}
|
||||
|
||||
#delete-user-account-warning {
|
||||
background-color: $background-color-danger-inverse;
|
||||
border-left: $border-size-x-large solid $background-color-danger-active;
|
||||
color: $text-color-danger;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
border-radius: $border-radius-x-large;
|
||||
> .base-button {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -119,9 +119,9 @@
|
||||
"contributionsCount": "Meine {count} Beiträge löschen",
|
||||
"commentedCount": "Meine {count} Kommentare löschen",
|
||||
"accountDescription": "Sei dir bewusst, dass deine Beiträge und Kommentare für unsere Community wichtig sind. Wenn du sie trotzdem löschen möchtest, musst du sie unten markieren.",
|
||||
"accountWarning": "Dein Konto, deine Beiträge oder Kommentare kannst du nach dem Löschen <b>WEDER VERWALTEN NOCH WIEDERHERSTELLEN!<\/b>",
|
||||
"accountWarning": "Dein Konto, deine Beiträge oder Kommentare kannst du nach dem Löschen WEDER VERWALTEN NOCH WIEDERHERSTELLEN!",
|
||||
"success": "Konto erfolgreich gelöscht!",
|
||||
"pleaseConfirm": "<b class='is-danger'>Zerstörerische Aktion!<\/b> Gib <b>{confirm}<\/b> ein, um zu bestätigen."
|
||||
"pleaseConfirm": "Zerstörerische Aktion! Gib „{confirm}“ ein, um zu bestätigen."
|
||||
},
|
||||
"embeds": {
|
||||
"name": "Drittanbieter",
|
||||
|
||||
@ -278,9 +278,9 @@
|
||||
"contributionsCount": "Delete my {count} posts",
|
||||
"commentedCount": "Delete my {count} comments",
|
||||
"accountDescription": "Be aware that your Posts and Comments are important to our community. If you still choose to delete them, you have to mark them below.",
|
||||
"accountWarning": "You <b>CAN'T MANAGE</b> and <b>CAN'T RECOVER</b> your Account, Posts, or Comments after deleting your account!",
|
||||
"accountWarning": "You CAN'T MANAGE and CAN'T RECOVER your Account, Posts, or Comments after deleting your account!",
|
||||
"success": "Account successfully deleted!",
|
||||
"pleaseConfirm": "<b class='is-danger'>Destructive action!</b> Type <b>{confirm}</b> to confirm"
|
||||
"pleaseConfirm": "Destructive action! Type “{confirm}” to confirm."
|
||||
},
|
||||
"embeds": {
|
||||
"name": "Third party providers",
|
||||
|
||||
@ -117,9 +117,9 @@
|
||||
"contributionsCount": "Eliminar mis {count} contribuciones",
|
||||
"commentedCount": "Eliminar mis {count} comentarios",
|
||||
"accountDescription": "Tenga en cuenta que su contribución y sus comentarios son importantes para nuestra comunidad. Si aún decide borrarlos, debe marcarlos a continuación.",
|
||||
"accountWarning": "¡<b> NO PUEDE GESTIONAR <\/b> y <b> NO PUEDE RECUPERAR <\/b> su cuenta, contribuciones o comentarios después de eliminar su cuenta!",
|
||||
"accountWarning": "¡NO PUEDE GESTIONAR y NO PUEDE RECUPERAR su cuenta, contribuciones o comentarios después de eliminar su cuenta!",
|
||||
"success": "¡Cuenta eliminada con éxito!",
|
||||
"pleaseConfirm": "<b class='is-danger'> ¡Acción destructiva! <\/b> Escriba <b> {confirm} <\/b> para confirmar"
|
||||
"pleaseConfirm": "¡Acción destructiva! Escriba “{confirm}” para confirmar."
|
||||
},
|
||||
"embeds": {
|
||||
"name": "Proveedores externos",
|
||||
|
||||
@ -117,9 +117,9 @@
|
||||
"contributionsCount": "Supprimer mes {count} postes",
|
||||
"commentedCount": "Supprimer mes {count} commentaires",
|
||||
"accountDescription": "Sachez que vos postes et commentaires sont importants pour notre communauté. Si vous voulez quand même les supprimer, vous devez les marquer ci-dessous.",
|
||||
"accountWarning": "Vous <b>NE POUVEZ PAS GÉRER<\/b> et <b>NE POUVEZ PAS RECOUVRIR<\/b> votre compte, vos messages ou vos commentaires après avoir supprimé votre compte !",
|
||||
"accountWarning": "Vous NE POUVEZ PAS GÉRER et NE POUVEZ PAS RECOUVRIR votre compte, vos messages ou vos commentaires après avoir supprimé votre compte !",
|
||||
"success": "Compte supprimer avec succès!",
|
||||
"pleaseConfirm": "<b class='is-danger'> Action destructive! <\/b> Saisissez <b> {confirm} <\/b> pour confirmer"
|
||||
"pleaseConfirm": "Action destructive! Saisissez “{confirm}” pour confirmer."
|
||||
},
|
||||
"embeds": {
|
||||
"name": "Fournisseurs tiers",
|
||||
|
||||
@ -117,9 +117,9 @@
|
||||
"contributionsCount": "Cancellare i miei {count} messaggi",
|
||||
"commentedCount": "Cancella i miei {count} commenti",
|
||||
"accountDescription": "Essere consapevoli che i tuoi post e commenti sono importanti per la nostra comunità. Se cancelli il tuo account utente, tutto scomparirà per sempre - e sarebbe un vero peccato!",
|
||||
"accountWarning": "Attenzione!Tu <b>Non puoi gestire</b> e <b>Non puoi recuperare il tuo account, i tuoi messaggi o commenti dopo aver cancellato il tuo account!",
|
||||
"accountWarning": "Attenzione! Tu NON PUOI GESTIRE e NON PUOI RECUPERARE il tuo account, i tuoi messaggi o commenti dopo aver cancellato il tuo account!",
|
||||
"success": "Account eliminato con successo!",
|
||||
"pleaseConfirm": "<b class='is-danger'>Azione distruttiva! </b> Digita <b>{conferma}</b> per confermare"
|
||||
"pleaseConfirm": "Azione distruttiva! Digita “{confirm}” per confermare."
|
||||
},
|
||||
"embeds": {
|
||||
"name": "",
|
||||
|
||||
@ -129,9 +129,9 @@
|
||||
"contributionsCount": "Usuń {count} moich postów",
|
||||
"commentedCount": "Usuń {count} moich komentarzy",
|
||||
"accountDescription": "Be aware that your Post and Comments are important to our community. If you still choose to delete them, you have to mark them below.",
|
||||
"accountWarning": "Po usunięcie Twojego konta, nie możesz <b>ZARZĄDZAĆ</b> ani <b>ODZYSKAĆ</b> danych, wpisów oraz komentarzy!",
|
||||
"accountWarning": "Po usunięcie Twojego konta, nie możesz ZARZĄDZAĆ ani ODZYSKAĆ danych, wpisów oraz komentarzy!",
|
||||
"success": "Konto zostało usunięte",
|
||||
"pleaseConfirm": "<b class='is-danger'>Uwaga, niebezpieczeństwo!</b> Wpisz <b>{confirm}</b>, aby potwierdzić"
|
||||
"pleaseConfirm": "Uwaga, niebezpieczeństwo! Wpisz „{confirm}”, aby potwierdzić."
|
||||
},
|
||||
"organizations": {
|
||||
"name": "My Organizations"
|
||||
|
||||
@ -117,9 +117,9 @@
|
||||
"contributionsCount": "Deletar minhas {count} publicações",
|
||||
"commentedCount": "Deletar meus {count} comentários",
|
||||
"accountDescription": "Esteja ciente de que o suas Publicações e Comentários são importantes para a nossa comunidade. Se você ainda optar por excluí-los, você tem que marcá-los abaixo.",
|
||||
"accountWarning": "Você <b>NÃO PODE GERENCIAR<\/b> e <b>NÃO PODE RECUPERAR<\/b> sua conta, Publicações, ou Comentários após excluir sua conta!",
|
||||
"accountWarning": "Você NÃO PODE GERENCIAR e NÃO PODE RECUPERAR sua conta, Publicações, ou Comentários após excluir sua conta!",
|
||||
"success": "Conta eliminada com sucesso!",
|
||||
"pleaseConfirm": "<b class='is-danger'>Ação destrutiva!<\/b> Digitar <b>{confirm}<\/b> para confirmar"
|
||||
"pleaseConfirm": "Ação destrutiva! Digitar “{confirm}” para confirmar."
|
||||
},
|
||||
"embeds": {
|
||||
"name": "Fornecedores de terceiros",
|
||||
|
||||
@ -627,11 +627,11 @@
|
||||
},
|
||||
"deleteUserAccount": {
|
||||
"accountDescription": "Обратите внимание, что ваши посты и комментарии важны для сообщества. Если вы все равно хотите их удалить, то вы должны отметить соответствующие опции ниже.",
|
||||
"accountWarning": "Вы <b>НЕ СМОЖЕТЕ<\/b> восстановить свой аккаунт, посты или комментарии после удаления.",
|
||||
"accountWarning": "Вы НЕ СМОЖЕТЕ восстановить свой аккаунт, посты или комментарии после удаления.",
|
||||
"commentedCount": "Удалить мои комментарии: {count}",
|
||||
"contributionsCount": "Удалить мои посты: {count}",
|
||||
"name": "Удалить данные",
|
||||
"pleaseConfirm": "<b class='is-danger'>Разрушительное действие!<\/b> Введите <b>{confirm}<\/b> для подтверждения.",
|
||||
"pleaseConfirm": "Разрушительное действие! Введите „{confirm}“ для подтверждения.",
|
||||
"success": "Аккаунт успешно удален!"
|
||||
},
|
||||
"download": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user