IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2026-02-06 09:56:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): migration feedback fixes (#3359)

Browse Source 
* fix(frontend): fixes after feedback

* fix(frontend): fixes after feedback

* fix(frontend): fixes after feedback
This commit is contained in:
MateuszMichalowski 2024-08-26 08:41:28 +02:00 committed by GitHub
parent 57e54d60dc
commit 0f134c8a15
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
91 changed files with 1033 additions and 677 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/src/components/ChangeUserRoleFormular.vue
View File

@ -8,7 +8,7 @@
{{ $t('userRole.notChangeYourSelf') }}
</div>
<div v-else class="m-3">
<label for="role" class="mr-3">{{ $t('userRole.selectLabel') }}</label>
<label for="role" class="me-3">{{ $t('userRole.selectLabel') }}</label>
<BFormSelect v-model="roleSelected" class="role-select" :options="roles" />
<div class="mt-3 mb-5">
<BButton variant="danger" @click="showModal">

2
admin/src/components/ContentFooter.vue
View File

@ -7,7 +7,7 @@
{{ $t('footer.copyright.year', { year }) }}
<a
:href="`https://gradido.net/${$i18n.locale}`"
class="fw-bold ml-1 link-underline link-underline-opacity-0 link-underline-opacity-100-hover"
class="fw-bold ms-1 link-underline link-underline-opacity-0 link-underline-opacity-100-hover"
target="_blank"
>
{{ $t('footer.copyright.link') }}

2
admin/src/components/ContributionLink/ContributionLink.vue
View File

@ -19,7 +19,7 @@
<BCollapse id="newContribution" v-model="visible" class="mt-2">
<BCard>
<p class="h2 ml-5">{{ $t('contributionLink.contributionLinks') }}</p>
<p class="h2 ms-5">{{ $t('contributionLink.contributionLinks') }}</p>
<contribution-link-form
:contribution-link-data="contributionLinkData"
:edit-contribution-link="editContributionLink"

4
admin/src/components/ContributionLink/ContributionLinkForm.vue
View File

@ -101,12 +101,12 @@
</BFormGroup>
-->
<div class="mt-6">
<BButton type="submit" variant="primary">
<BButton type="submit" variant="primary" class="me-2">
{{
editContributionLink ? $t('contributionLink.saveChange') : $t('contributionLink.create')
}}
</BButton>
<BButton type="reset" variant="danger">
<BButton type="reset" variant="danger" class="me-2">
{{ $t('contributionLink.clear') }}
</BButton>
<BButton @click.prevent="emit('close-contribution-form')">

6
admin/src/components/ContributionLink/ContributionLinkList.vue
View File

@ -5,14 +5,14 @@
<BButton
variant="danger"
size="md"
class="mr-2 test-delete-link"
class="me-2 test-delete-link"
@click="handleDelete(data)"
>
<IBiTrash />
</BButton>
</template>
<template #cell(edit)="data">
<BButton variant="success" size="md" class="mr-2" @click="editContributionLink(data.item)">
<BButton variant="success" size="md" class="me-2" @click="editContributionLink(data.item)">
<IBiPencil />
</BButton>
</template>
@ -20,7 +20,7 @@
<BButton
variant="info"
size="md"
class="mr-2 test-show"
class="me-2 test-show"
@click="showContributionLink(data.item)"
>
<IBiEye />

2
admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
View File

@ -59,7 +59,7 @@
<BCol>
<BButton type="reset" variant="danger">{{ $t('form.cancel') }}</BButton>
</BCol>
<BCol class="text-right">
<BCol class="text-end">
<BButton
type="submit"
variant="primary"

8
admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
View File

@ -55,8 +55,8 @@ describe('ContributionMessagesListItem', () => {
wrapper = ModeratorItemWrapper()
})
it('has a DIV .text-right.is-moderator', () => {
expect(wrapper.find('div.text-right.is-moderator').exists()).toBe(true)
it('has a DIV .text-end.is-moderator', () => {
expect(wrapper.find('div.text-end.is-moderator').exists()).toBe(true)
})
it('has the complete user name', () => {
@ -110,8 +110,8 @@ describe('ContributionMessagesListItem', () => {
wrapper = ItemWrapper()
})
it('has a DIV .text-left.is-not-moderator', () => {
expect(wrapper.find('div.text-left.is-user').exists()).toBe(true)
it('has a DIV .text-start.is-not-moderator', () => {
expect(wrapper.find('div.text-start.is-user').exists()).toBe(true)
})
it('has the complete user name', () => {

22
admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
View File

@ -1,16 +1,18 @@
<template>
<div class="contribution-messages-list-item clearfix">
<div v-if="isModeratorMessage" class="text-right p-2 rounded-sm mb-3" :class="boxClass">
<small class="ml-4" data-test="moderator-label">
<div v-if="isModeratorMessage" class="text-end p-2 rounded-sm mb-3" :class="boxClass">
<small class="ms-4" data-test="moderator-label">
{{ $t('moderator.moderator') }}
</small>
<small class="ml-2" data-test="moderator-date">
<small class="ms-2" data-test="moderator-date">
{{ $d(new Date(message.createdAt), 'short') }}
</small>
<span class="ml-2 mr-2" data-test="moderator-name">
<span class="ms-2 me-2" data-test="moderator-name">
{{ message.userFirstName }} {{ message.userLastName }}
</span>
<BAvatar square variant="warning"></BAvatar>
<BAvatar square variant="warning">
<variant-icon icon="person-fill" variant="black" />
</BAvatar>
<small v-if="isHistory">
<hr />
{{ $t('moderator.history') }}
@ -22,12 +24,14 @@
{{ $t('moderator.request') }}
</small>
</div>
<div v-else class="text-left p-2 rounded-sm mb-3" :class="boxClass">
<BAvatar variant="info"></BAvatar>
<span class="ml-2 mr-2" data-test="user-name">
<div v-else class="text-start p-2 rounded-sm mb-3" :class="boxClass">
<BAvatar variant="info">
<variant-icon icon="person-fill" variant="white" />
</BAvatar>
<span class="ms-2 me-2" data-test="user-name">
{{ message.userFirstName }} {{ message.userLastName }}
</span>
<small class="ml-2" data-test="user-date">
<small class="ms-2" data-test="user-date">
{{ $d(new Date(message.createdAt), 'short') }}
</small>
<small v-if="isHistory">

6
admin/src/components/EditCreationFormular.vue
View File

@ -2,7 +2,7 @@
<div class="component-edit-creation-formular">
<div class="shadow p-3 mb-5 bg-white rounded">
<BForm ref="updateCreationForm">
<div class="ml-4">
<div class="ms-4">
<label>{{ $t('creation_form.select_month') }}</label>
</div>
<BRow class="m-4">
@ -48,13 +48,13 @@
</div>
</div>
<BRow class="m-4">
<BCol class="text-left">
<BCol class="text-start">
<BButton type="reset" variant="danger" @click="$refs.updateCreationForm.reset()">
{{ $t('creation_form.reset') }}
</BButton>
</BCol>
<BCol class="text-center">
<div class="text-right">
<div class="text-end">
<BButton
type="button"
variant="success"

363
admin/src/components/Federation/CommunityVisualizeItem.vue
View File

@ -1,14 +1,18 @@
<template>
<div class="community-visualize-item">
<BRow @click="toggleDetails">
<BCol cols="1"><b-icon :icon="icon" :variant="variant" class="mr-4"></b-icon></BCol>
<BRow v-on="{ click: toggleDetails }">
<BCol cols="1">
<variant-icon :icon="icon" :variant="variant" />
</BCol>
<BCol>
<div>
<a :href="item.url" target="_blank">{{ item.url }}</a>
</div>
<small>{{ `${item.publicKey.substring(0, 26)}…` }}</small>
</BCol>
<BCol v-b-tooltip="item.description">{{ item.name }}</BCol>
<BCol>
<span v-b-tooltip="`${item.description}`">{{ item.name }}</span>
</BCol>
<BCol cols="2">{{ lastAnnouncedAt }}</BCol>
<BCol cols="2">{{ createdAt }}</BCol>
</BRow>
@ -57,7 +61,7 @@
<BListGroup-item>
<BListGroup>
<BRow>
<BCol class="ml-1">{{ $t('federation.verified') }}</BCol>
<BCol class="ms-1">{{ $t('federation.verified') }}</BCol>
<BCol>{{ $t('federation.apiVersion') }}</BCol>
<BCol>{{ $t('federation.createdAt') }}</BCol>
<BCol>{{ $t('federation.lastAnnouncedAt') }}</BCol>
@ -78,130 +82,249 @@
</BRow>
</div>
</template>
<script>
<script setup>
import { ref, computed, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import { useMutation } from '@vue/apollo-composable'
import { formatDistanceToNow } from 'date-fns'
import { de, enUS as en, fr, es, nl } from 'date-fns/locale'
import EditableGroup from '@/components/input/EditableGroup'
import EditableGroup from '@/components/input/EditableGroup.vue'
import FederationVisualizeItem from './FederationVisualizeItem.vue'
import { updateHomeCommunity } from '../../graphql/updateHomeCommunity'
import { updateHomeCommunity } from '@/graphql/updateHomeCommunity'
import Coordinates from '../input/Coordinates.vue'
import EditableGroupableLabel from '../input/EditableGroupableLabel.vue'
import { useAppToast } from '@/composables/useToast'
const locales = { en, de, es, fr, nl }
export default {
name: 'CommunityVisualizeItem',
components: {
Coordinates,
EditableGroup,
FederationVisualizeItem,
EditableGroupableLabel,
},
props: {
item: { type: Object },
},
data() {
return {
formatDistanceToNow,
locale: this.$i18n.locale,
details: false,
gmsApiKey: this.item.gmsApiKey,
location: this.item.location,
originalGmsApiKey: this.item.gmsApiKey,
originalLocation: this.item.location,
const props = defineProps({
item: { type: Object, required: true },
})
const { item } = toRefs(props)
const { t, locale } = useI18n()
const { toastSuccess, toastError } = useAppToast()
const details = ref(false)
const gmsApiKey = ref(item.value.gmsApiKey)
const location = ref(item.value.location)
const originalGmsApiKey = ref(item.value.gmsApiKey)
const originalLocation = ref(item.value.location)
const { mutate: updateHomeCommunityMutation } = useMutation(updateHomeCommunity)
const verified = computed(() => {
if (!item.value.federatedCommunities || item.value.federatedCommunities.length === 0) {
return false
}
return item.value.federatedCommunities.some(
(federatedCommunity) =>
new Date(federatedCommunity.verifiedAt) >= new Date(federatedCommunity.lastAnnouncedAt),
)
})
const icon = computed(() => (verified.value ? 'check' : 'x-circle'))
const variant = computed(() => (verified.value ? 'success' : 'danger'))
const lastAnnouncedAt = computed(() => {
if (!item.value.federatedCommunities || item.value.federatedCommunities.length === 0) return ''
const minDate = new Date(0)
const lastAnnouncedAt = item.value.federatedCommunities.reduce(
(lastAnnouncedAt, federateCommunity) => {
if (!federateCommunity.lastAnnouncedAt) return lastAnnouncedAt
const date = new Date(federateCommunity.lastAnnouncedAt)
return date > lastAnnouncedAt ? date : lastAnnouncedAt
},
minDate,
)
if (lastAnnouncedAt !== minDate) {
return formatDistanceToNow(lastAnnouncedAt, {
includeSecond: true,
addSuffix: true,
locale: locales[locale.value],
})
}
return ''
})
const createdAt = computed(() => {
if (item.value.createdAt) {
return formatDistanceToNow(new Date(item.value.createdAt), {
includeSecond: true,
addSuffix: true,
locale: locales[locale.value],
})
}
return ''
})
const isLocationChanged = computed(() => originalLocation.value !== location.value)
const isGMSApiKeyChanged = computed(() => originalGmsApiKey.value !== gmsApiKey.value)
const isValidLocation = computed(
() => location.value && location.value.latitude && location.value.longitude,
)
const toggleDetails = () => {
details.value = !details.value
}
const handleUpdateHomeCommunity = async () => {
try {
await updateHomeCommunityMutation({
variables: {
uuid: item.value.uuid,
gmsApiKey: gmsApiKey.value,
location: location.value,
},
})
if (isLocationChanged.value && isGMSApiKeyChanged.value) {
toastSuccess(t('federation.toast_gmsApiKeyAndLocationUpdated'))
} else if (isGMSApiKeyChanged.value) {
toastSuccess(t('federation.toast_gmsApiKeyUpdated'))
} else if (isLocationChanged.value) {
toastSuccess(t('federation.toast_gmsLocationUpdated'))
}
},
computed: {
verified() {
if (!this.item.federatedCommunities || this.item.federatedCommunities.length === 0) {
return false
}
return (
this.item.federatedCommunities.filter(
(federatedCommunity) =>
new Date(federatedCommunity.verifiedAt) >= new Date(federatedCommunity.lastAnnouncedAt),
).length > 0
)
},
icon() {
return this.verified ? 'check' : 'x-circle'
},
variant() {
return this.verified ? 'success' : 'danger'
},
lastAnnouncedAt() {
if (!this.item.federatedCommunities || this.item.federatedCommunities.length === 0) return ''
const minDate = new Date(0)
const lastAnnouncedAt = this.item.federatedCommunities.reduce(
(lastAnnouncedAt, federateCommunity) => {
if (!federateCommunity.lastAnnouncedAt) return lastAnnouncedAt
const date = new Date(federateCommunity.lastAnnouncedAt)
return date > lastAnnouncedAt ? date : lastAnnouncedAt
},
minDate,
)
if (lastAnnouncedAt !== minDate) {
return formatDistanceToNow(lastAnnouncedAt, {
includeSecond: true,
addSuffix: true,
locale: locales[this.locale],
})
}
return ''
},
createdAt() {
if (this.item.createdAt) {
return formatDistanceToNow(new Date(this.item.createdAt), {
includeSecond: true,
addSuffix: true,
locale: locales[this.locale],
})
}
return ''
},
isLocationChanged() {
return this.originalLocation !== this.location
},
isGMSApiKeyChanged() {
return this.originalGmsApiKey !== this.gmsApiKey
},
isValidLocation() {
return this.location && this.location.latitude && this.location.longitude
},
},
methods: {
toggleDetails() {
this.details = !this.details
},
handleUpdateHomeCommunity() {
this.$apollo
.mutate({
mutation: updateHomeCommunity,
variables: {
uuid: this.item.uuid,
gmsApiKey: this.gmsApiKey,
location: this.location,
},
})
.then(() => {
if (this.isLocationChanged && this.isGMSApiKeyChanged) {
this.toastSuccess(this.$t('federation.toast_gmsApiKeyAndLocationUpdated'))
} else if (this.isGMSApiKeyChanged) {
this.toastSuccess(this.$t('federation.toast_gmsApiKeyUpdated'))
} else if (this.isLocationChanged) {
this.toastSuccess(this.$t('federation.toast_gmsLocationUpdated'))
}
this.originalLocation = this.location
this.originalGmsApiKey = this.gmsApiKey
})
.catch((error) => {
this.toastError(error.message)
})
},
resetHomeCommunityEditable() {
this.location = this.originalLocation
this.gmsApiKey = this.originalGmsApiKey
},
},
originalLocation.value = location.value
originalGmsApiKey.value = gmsApiKey.value
} catch (error) {
toastError(error.message)
}
}
const resetHomeCommunityEditable = () => {
location.value = originalLocation.value
gmsApiKey.value = originalGmsApiKey.value
}
</script>
<!--<script>-->
<!--import { formatDistanceToNow } from 'date-fns'-->
<!--import { de, enUS as en, fr, es, nl } from 'date-fns/locale'-->
<!--import EditableGroup from '@/components/input/EditableGroup'-->
<!--import FederationVisualizeItem from './FederationVisualizeItem.vue'-->
<!--import { updateHomeCommunity } from '../../graphql/updateHomeCommunity'-->
<!--import Coordinates from '../input/Coordinates.vue'-->
<!--import EditableGroupableLabel from '../input/EditableGroupableLabel.vue'-->
<!--const locales = { en, de, es, fr, nl }-->
<!--export default {-->
<!-- name: 'CommunityVisualizeItem',-->
<!-- components: {-->
<!-- Coordinates,-->
<!-- EditableGroup,-->
<!-- FederationVisualizeItem,-->
<!-- EditableGroupableLabel,-->
<!-- },-->
<!-- props: {-->
<!-- item: { type: Object },-->
<!-- },-->
<!-- data() {-->
<!-- return {-->
<!-- formatDistanceToNow,-->
<!-- locale: this.$i18n.locale,-->
<!-- details: false,-->
<!-- gmsApiKey: this.item.gmsApiKey,-->
<!-- location: this.item.location,-->
<!-- originalGmsApiKey: this.item.gmsApiKey,-->
<!-- originalLocation: this.item.location,-->
<!-- }-->
<!-- },-->
<!-- computed: {-->
<!-- verified() {-->
<!-- if (!this.item.federatedCommunities || this.item.federatedCommunities.length === 0) {-->
<!-- return false-->
<!-- }-->
<!-- return (-->
<!-- this.item.federatedCommunities.filter(-->
<!-- (federatedCommunity) =>-->
<!-- new Date(federatedCommunity.verifiedAt) >= new Date(federatedCommunity.lastAnnouncedAt),-->
<!-- ).length > 0-->
<!-- )-->
<!-- },-->
<!-- icon() {-->
<!-- return this.verified ? 'check' : 'x-circle'-->
<!-- },-->
<!-- variant() {-->
<!-- return this.verified ? 'success' : 'danger'-->
<!-- },-->
<!-- lastAnnouncedAt() {-->
<!-- if (!this.item.federatedCommunities || this.item.federatedCommunities.length === 0) return ''-->
<!-- const minDate = new Date(0)-->
<!-- const lastAnnouncedAt = this.item.federatedCommunities.reduce(-->
<!-- (lastAnnouncedAt, federateCommunity) => {-->
<!-- if (!federateCommunity.lastAnnouncedAt) return lastAnnouncedAt-->
<!-- const date = new Date(federateCommunity.lastAnnouncedAt)-->
<!-- return date > lastAnnouncedAt ? date : lastAnnouncedAt-->
<!-- },-->
<!-- minDate,-->
<!-- )-->
<!-- if (lastAnnouncedAt !== minDate) {-->
<!-- return formatDistanceToNow(lastAnnouncedAt, {-->
<!-- includeSecond: true,-->
<!-- addSuffix: true,-->
<!-- locale: locales[this.locale],-->
<!-- })-->
<!-- }-->
<!-- return ''-->
<!-- },-->
<!-- createdAt() {-->
<!-- if (this.item.createdAt) {-->
<!-- return formatDistanceToNow(new Date(this.item.createdAt), {-->
<!-- includeSecond: true,-->
<!-- addSuffix: true,-->
<!-- locale: locales[this.locale],-->
<!-- })-->
<!-- }-->
<!-- return ''-->
<!-- },-->
<!-- isLocationChanged() {-->
<!-- return this.originalLocation !== this.location-->
<!-- },-->
<!-- isGMSApiKeyChanged() {-->
<!-- return this.originalGmsApiKey !== this.gmsApiKey-->
<!-- },-->
<!-- isValidLocation() {-->
<!-- return this.location && this.location.latitude && this.location.longitude-->
<!-- },-->
<!-- },-->
<!-- methods: {-->
<!-- toggleDetails() {-->
<!-- this.details = !this.details-->
<!-- },-->
<!-- handleUpdateHomeCommunity() {-->
<!-- this.$apollo-->
<!-- .mutate({-->
<!-- mutation: updateHomeCommunity,-->
<!-- variables: {-->
<!-- uuid: this.item.uuid,-->
<!-- gmsApiKey: this.gmsApiKey,-->
<!-- location: this.location,-->
<!-- },-->
<!-- })-->
<!-- .then(() => {-->
<!-- if (this.isLocationChanged && this.isGMSApiKeyChanged) {-->
<!-- this.toastSuccess(this.$t('federation.toast_gmsApiKeyAndLocationUpdated'))-->
<!-- } else if (this.isGMSApiKeyChanged) {-->
<!-- this.toastSuccess(this.$t('federation.toast_gmsApiKeyUpdated'))-->
<!-- } else if (this.isLocationChanged) {-->
<!-- this.toastSuccess(this.$t('federation.toast_gmsLocationUpdated'))-->
<!-- }-->
<!-- this.originalLocation = this.location-->
<!-- this.originalGmsApiKey = this.gmsApiKey-->
<!-- })-->
<!-- .catch((error) => {-->
<!-- this.toastError(error.message)-->
<!-- })-->
<!-- },-->
<!-- resetHomeCommunityEditable() {-->
<!-- this.location = this.originalLocation-->
<!-- this.gmsApiKey = this.originalGmsApiKey-->
<!-- },-->
<!-- },-->
<!--}-->
<!--</script>-->

36
admin/src/components/Federation/FederationVisualizeItem.vue
View File

@ -1,23 +1,43 @@
<template>
<div class="federation-visualize-item">
<b-row>
<b-col><b-icon :icon="icon" :variant="variant" class="mr-4"></b-icon></b-col>
<b-col class="ml-1">{{ item.apiVersion }}</b-col>
<b-col v-b-tooltip="item.createdAt">{{ distanceDate(item.createdAt) }}</b-col>
<b-col v-b-tooltip="item.lastAnnouncedAt">{{ distanceDate(item.lastAnnouncedAt) }}</b-col>
<b-col v-b-tooltip="item.verifiedAt">{{ distanceDate(item.verifiedAt) }}</b-col>
<b-col v-b-tooltip="item.lastErrorAt">{{ distanceDate(item.lastErrorAt) }}</b-col>
</b-row>
<BRow>
<BCol>
<variant-icon :icon="icon" :variant="variant" />
</BCol>
<BCol class="ml-1">{{ item.apiVersion }}</BCol>
<BCol>
<span v-b-tooltip="`${item.createdAt}`">
{{ distanceDate(item.createdAt) }}
</span>
</BCol>
<BCol>
<span v-b-tooltip="`${item.lastAnnouncedAt}`">
{{ distanceDate(item.lastAnnouncedAt) }}
</span>
</BCol>
<BCol>
<span v-b-tooltip="`${item.verifiedAt}`">
{{ distanceDate(item.verifiedAt) }}
</span>
</BCol>
<BCol>
<span v-b-tooltip="`${item.lastErrorAt}`">
{{ distanceDate(item.lastErrorAt) }}
</span>
</BCol>
</BRow>
</div>
</template>
<script>
import { formatDistanceToNow } from 'date-fns'
import { de, enUS as en, fr, es, nl } from 'date-fns/locale'
import VariantIcon from '@/components/VariantIcon.vue'
const locales = { en, de, es, fr, nl }
export default {
name: 'FederationVisualizeItem',
components: { VariantIcon },
props: {
item: { type: Object },
},

2
admin/src/components/NavBar.vue
View File

@ -4,7 +4,7 @@
<BNavbarBrand class="mb-2" to="/">
<img
src="../../public/img/brand/gradido_logo_w.png"
class="navbar-brand-img pl-2"
class="navbar-brand-img ps-2"
alt="..."
/>
</BNavbarBrand>

2
admin/src/components/Overlay.vue
View File

@ -46,7 +46,7 @@
{{ $t('overlay.cancel') }}
</BButton>
</BCol>
<BCol class="text-right">
<BCol class="text-end">
<slot name="submit-btn" />
</BCol>
</BRow>

2
admin/src/components/RowDetails.vue
View File

@ -1,5 +1,5 @@
<template>
<b-card class="shadow-lg pl-3 pr-3 mb-5 bg-white rounded">
<b-card class="shadow-lg ps-3 pe-3 mb-5 bg-white rounded">
<slot :name="slotName" />
<b-button size="sm" @click="$emit('row-toggle-details', row, index)">
<b-icon

10
admin/src/components/Tables/OpenCreationsTable.vue
View File

@ -21,7 +21,7 @@
<BButton
variant="danger"
size="md"
class="mr-2"
class="me-2"
@click="$emit('show-overlay', row.item, 'delete')"
>
<IBiTrash />
@ -42,7 +42,7 @@
variant="info"
size="md"
:index="0"
class="mr-2"
class="me-2"
@click="rowToggleDetails(row, 0)"
>
<IBiX v-if="row.detailsShowing" />
@ -58,7 +58,7 @@
v-if="row.item.status === 'IN_PROGRESS' && row.item.messagesCount > 0"
variant="warning"
style="color: #ffc107"
class="pl-1"
class="ps-1"
/>
</BButton>
</div>
@ -73,7 +73,7 @@
<BButton
variant="warning"
size="md"
class="mr-2"
class="me-2"
@click="$emit('show-overlay', row.item, 'deny')"
>
<IBiX />
@ -85,7 +85,7 @@
<BButton
variant="success"
size="md"
class="mr-2"
class="me-2"
@click="$emit('show-overlay', row.item, 'confirm')"
>
<IBiCheck />

8
admin/src/components/Tables/SearchUserTable.vue
View File

@ -20,7 +20,7 @@
<div class="d-flex gap-3 justify-content-end align-items-center">
<div
v-if="row.item.deletedAt"
class="mr-3 test-deleted-icon position-relative rounded-circle"
class="me-3 test-deleted-icon position-relative rounded-circle"
style="width: 40px; height: 40px"
>
<img src="../../assets/icons/circle-slash.png" class="position-absolute" />
@ -33,7 +33,7 @@
<span v-if="!row.item.deletedAt" class="d-flex gap-2">
<div
v-if="!row.item.emailChecked"
class="mr-3 rounded-circle position-relative"
class="me-3 rounded-circle position-relative"
style="background-color: #dc3545; width: 40px; height: 40px"
>
<img
@ -45,7 +45,7 @@
<div>
<img
v-if="!row.item.hasElopage"
class="mr-3 rounded-circle bg-red-dark"
class="me-3 rounded-circle bg-red-dark"
src="../../assets/icons/elopage_favicon.png"
style="background-color: #dc3545; width: 40px; height: 40px"
/>
@ -65,7 +65,7 @@
</template>
<template #row-details="row">
<BCard ref="rowDetails" class="shadow-lg pl-3 pr-3 mb-5 bg-white rounded">
<BCard ref="rowDetails" class="shadow-lg ps-3 pe-3 mb-5 bg-white rounded">
<BTabs content-class="mt-3">
<BTab :title="$t('creation')" active :disabled="row.item.deletedAt !== null">
<creation-formular

26
admin/src/components/Tables/StatisticTable.vue
View File

@ -5,8 +5,8 @@
<BThead>
<BTr>
<BTh />
<BTh class="text-right">{{ $t('statistic.count') }}</BTh>
<BTh class="text-right">{{ $t('statistic.details') }}</BTh>
<BTh class="text-end">{{ $t('statistic.count') }}</BTh>
<BTh class="text-end">{{ $t('statistic.details') }}</BTh>
</BTr>
</BThead>
<BTbody>
@ -14,7 +14,7 @@
<BTd>
<b>{{ $t('statistic.totalUsers') }}</b>
</BTd>
<BTd class="text-right">
<BTd class="text-end">
{{ props.statistics.totalUsers }}
</BTd>
<BTd></BTd>
@ -23,7 +23,7 @@
<BTd>
<b>{{ $t('statistic.activeUsers') }}</b>
</BTd>
<BTd class="text-right">
<BTd class="text-end">
{{ props.statistics.activeUsers }}
</BTd>
<BTd></BTd>
@ -32,7 +32,7 @@
<BTd>
<b>{{ $t('statistic.deletedUsers') }}</b>
</BTd>
<BTd class="text-right">
<BTd class="text-end">
{{ props.statistics.deletedUsers }}
</BTd>
<BTd></BTd>
@ -41,11 +41,11 @@
<BTd>
<b>{{ $t('statistic.totalGradidoCreated') }}</b>
</BTd>
<BTd class="text-right">
<BTd class="text-end">
<!-- {{ $n(props.statistics.totalGradidoCreated, 'decimal') }} {{ $t('GDD') }}-->
4500
</BTd>
<BTd class="text-right">
<BTd class="text-end">
{{ props.statistics.totalGradidoCreated }}
</BTd>
</BTr>
@ -53,19 +53,19 @@
<BTd>
<b>{{ $t('statistic.totalGradidoDecayed') }}</b>
</BTd>
<BTd class="text-right">
<BTd class="text-end">
{{ $n(parseFloat(props.statistics.totalGradidoDecayed), 'decimal') }} {{ $t('GDD') }}
</BTd>
<BTd class="text-right">{{ props.statistics.totalGradidoDecayed }}</BTd>
<BTd class="text-end">{{ props.statistics.totalGradidoDecayed }}</BTd>
</BTr>
<BTr>
<BTd>
<b>{{ $t('statistic.totalGradidoAvailable') }}</b>
</BTd>
<BTd class="text-right">
<BTd class="text-end">
{{ $n(parseFloat(props.statistics.totalGradidoAvailable), 'decimal') }} {{ $t('GDD') }}
</BTd>
<BTd class="text-right">
<BTd class="text-end">
{{ props.statistics.totalGradidoAvailable }}
</BTd>
</BTr>
@ -73,11 +73,11 @@
<BTd>
<b>{{ $t('statistic.totalGradidoUnbookedDecayed') }}</b>
</BTd>
<BTd class="text-right">
<BTd class="text-end">
{{ $n(parseFloat(props.statistics.totalGradidoUnbookedDecayed), 'decimal') }}
{{ $t('GDD') }}
</BTd>
<BTd class="text-right">{{ props.statistics.totalGradidoUnbookedDecayed }}</BTd>
<BTd class="text-end">{{ props.statistics.totalGradidoUnbookedDecayed }}</BTd>
</BTr>
</BTbody>
</BTableSimple>

22
admin/src/components/VariantIcon.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<IBiCheck v-if="props.icon === 'check'" class="icon-variant" />
<IBiXCircle v-if="props.icon === 'x-circle'" class="icon-variant" />
<IBiPersonFill v-if="props.icon === 'person-fill'" class="icon-variant" />
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
icon: { type: String, default: '' },
variant: { type: String, default: 'success' },
})
const color = ref(`var(--bs-${props.variant}`)
</script>
<style scoped lang="scss">
.icon-variant {
color: v-bind('color');
}
</style>

7
admin/src/main.js
View File

@ -29,6 +29,10 @@ const app = createApp(App)
app.use(router)
app.use(store)
i18n.global.locale.value =
store.state.moderator && store.state.moderator.language ? store.state.moderator.language : 'en'
app.use(i18n)
app.use(PortalVue)
app.use(createBootstrap())
@ -39,7 +43,4 @@ app.mixin(toasters)
addNavigationGuards(router, store, apolloProvider.defaultClient, i18n)
i18n.locale =
store.state.moderator && store.state.moderator.language ? store.state.moderator.language : 'en'
app.mount('#app')

6
admin/src/pages/CreationConfirm.vue
View File

@ -4,11 +4,11 @@
<user-query v-model="query" class="mb-2 mt-2" :placeholder="$t('user_memo_search')" />
<p class="mb-2">
<input v-model="noHashtag" type="checkbox" class="noHashtag" />
<span v-b-tooltip="$t('no_hashtag_tooltip')" class="ml-2">{{ $t('no_hashtag') }}</span>
<span v-b-tooltip="$t('no_hashtag_tooltip')" class="ms-2">{{ $t('no_hashtag') }}</span>
</p>
<p v-if="showResubmissionCheckbox" class="mb-4">
<input v-model="hideResubmissionModel" type="checkbox" class="hideResubmission" />
<span v-b-tooltip="$t('hide_resubmission_tooltip')" class="ml-2">
<span v-b-tooltip="$t('hide_resubmission_tooltip')" class="ms-2">
{{ $t('hide_resubmission') }}
</span>
</p>
@ -82,7 +82,7 @@
<p>{{ $t(overlayQuestion) }}</p>
</template>
<template #submit-btn>
<BButton size="md" :variant="overlayIcon" class="m-3 text-right" @click="overlayEvent">
<BButton size="md" :variant="overlayIcon" class="m-3 text-end" @click="overlayEvent">
{{ $t(overlayBtnText) }}
</BButton>
</template>

13
admin/src/pages/FederationVisualize.vue
View File

@ -9,20 +9,13 @@
@click="refetch"
>
<IBiArrowClockwise />
<!-- <b-icon-->
<!-- icon="arrow-clockwise"-->
<!-- font-scale="2"-->
<!-- :animation="animation"-->
<!-- data-test="federation-communities-refresh-btn"-->
<!-- @click="$apollo.queries.allCommunities.refresh()"-->
<!-- ></b-icon>-->
</BButton>
</div>
<BListGroup>
<BRow>
<BCol cols="1" class="ml-1">{{ $t('federation.verified') }}</BCol>
<BCol class="ml-3">{{ $t('federation.url') }}</BCol>
<BCol class="ml-3">{{ $t('federation.name') }}</BCol>
<BCol cols="1" class="ms-1">{{ $t('federation.verified') }}</BCol>
<BCol class="ms-3">{{ $t('federation.url') }}</BCol>
<BCol class="ms-3">{{ $t('federation.name') }}</BCol>
<BCol cols="2">{{ $t('federation.lastAnnouncedAt') }}</BCol>
<BCol cols="2">{{ $t('federation.createdAt') }}</BCol>
</BRow>

28
admin/src/pages/Overview.vue
View File

@ -11,7 +11,6 @@
<BCardText>
<BLink to="creation-confirm">
<h1>{{ openCreations }}</h1>
<h1>Layout test</h1>
</BLink>
</BCardText>
</BCard>
@ -32,30 +31,31 @@
</div>
</template>
<script setup>
import { adminListContributions } from '../graphql/adminListContributions'
import { ref, computed, onMounted } from 'vue'
import { adminListContributions } from '@/graphql/adminListContributions'
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { useQuery } from '@vue/apollo-composable'
import { BCard, BCardText, BLink } from 'bootstrap-vue-next'
import { useAppToast } from '@/composables/useToast'
const store = useStore()
const statusFilter = ref(['IN_PROGRESS', 'PENDING'])
const { result, error } = useQuery(adminListContributions, {
const { toastError } = useAppToast()
const { result, onResult, onError } = useQuery(adminListContributions, {
statusFilter: statusFilter.value,
hideResubmission: true,
})
const openCreations = computed(() => result.value?.adminListContributions.contributionCount || 0)
onMounted(() => {
if (result.value) {
store.commit('setOpenCreations', openCreations.value)
}
if (error.value) {
// store.dispatch('toastError', error.value.message)
}
onResult(({ data }) => {
store.commit('setOpenCreations', data.adminListContributions.contributionCount)
})
onError((error) => {
toastError(error.message)
})
const openCreations = computed(() => result.value?.adminListContributions.contributionCount || 0)
</script>

2
admin/src/router/guards.js
View File

@ -14,7 +14,7 @@ const addNavigationGuards = (router, store, apollo, i18n) => {
.then((result) => {
const moderator = result.data.verifyLogin
if (moderator.roles?.length) {
i18n.locale = moderator.language
i18n.global.locale.value = moderator.language
store.commit('moderator', moderator)
next({ path: '/' })
} else {

2
frontend/src/assets/scss/custom/gradido-custom/_buttons-forms.scss
View File

@ -5,7 +5,7 @@ $input-btn-padding-x: 0.75rem ;
$input-btn-line-height: $shape-height-base ;
$input-btn-focus-width: 0 ;
$input-btn-focus-color: rgba($component-active-bg, 1) ;
$input-btn-focus-box-shadow: none ;
$input-btn-focus-box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);
$input-btn-padding-y-sm: 0.25rem ;
$input-btn-padding-x-sm: 0.5rem ;
$input-btn-line-height-sm: $shape-height-sm ;

2
frontend/src/assets/scss/custom/gradido-custom/_buttons.scss
View File

@ -17,7 +17,7 @@ $btn-box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%) ;
$btn-hover-box-shadow: 0 7px 14px rgb(50 50 93 / 10%), 0 3px 6px rgb(0 0 0 / 8%) ;
$btn-focus-box-shadow: $btn-hover-box-shadow ;
$btn-focus-width: $input-btn-focus-width ;
$btn-active-box-shadow: none;
$btn-active-box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);;
$btn-hover-translate-y: -1px ;

2
frontend/src/assets/scss/custom/gradido-custom/_custom-forms.scss
View File

@ -6,7 +6,7 @@ $custom-control-indicator-size: 1.25rem ;
$custom-control-indicator-bg: $input-bg ;
$custom-control-indicator-border-width: 1px ;
$custom-control-indicator-border-color: $input-border-color ;
$custom-control-indicator-box-shadow: none ;
$custom-control-indicator-box-shadow: 0 0 0 0 rgb(255 255 255 / 0%); ;
$custom-control-indicator-focus-box-shadow: $custom-control-indicator-box-shadow ;
$custom-control-indicator-hover-color: $component-hover-color ;
$custom-control-indicator-hover-bg: $component-hover-bg ;

2
frontend/src/assets/scss/custom/gradido-custom/_datepicker.scss
View File

@ -13,7 +13,7 @@ $datepicker-disabled-old-new-color: $gray-500 ;
$datepicker-header-cell-border-radius: $border-radius ;
$datepicker-active-color: $white ;
$datepicker-active-background: $primary ;
$datepicker-active-box-shadow: none ;
$datepicker-active-box-shadow: 0 0 0 0 rgb(255 255 255 / 0%); ;
$datepicker-range-background: $primary ;
$datepicker-range-cell-focused-background: color.adjust($datepicker-range-background, $lightness: -5%);
$datepicker-range-color: $white ;

4
frontend/src/assets/scss/custom/gradido-custom/_input.scss
View File

@ -23,13 +23,13 @@ $input-focus-alternative-box-shadow: 0 4px 6px rgb(50 50 93 / 11%),0 1px 3px rgb
$input-color: $gray-600 ;
$input-border-color: #cad1d7 ;
$input-border-width: $input-btn-border-width ;
$input-box-shadow: none ; // 0 1px 3px 0 $gray-400 ;
$input-box-shadow: 0 0 0 0 rgb(255 255 255 / 0%); // 0 1px 3px 0 $gray-400 ;
$input-focus-bg: $white ;
$input-focus-border-color: rgb(50 151 211 / 25%) ;
$input-focus-color: $input-color ;
$input-focus-width: 0 ;
$input-focus-box-shadow: none ; // 0 1px 3px 0 $gray-500 ;
$input-focus-box-shadow: 0 0 0 0 rgb(255 255 255 / 0%); // 0 1px 3px 0 $gray-500 ;
$input-placeholder-color: $gray-500 ;
$input-focus-placeholder-color: $gray-500 ;

8
frontend/src/assets/scss/gradido-template.scss
View File

@ -42,7 +42,7 @@ html > body {
}
.app-box-shadow {
box-shadow: 20pt 20pt 50pt 0 #3838384f;
box-shadow: 20pt 20pt 50pt 0 #3838384f !important;
}
/* Navbar */
@ -280,7 +280,7 @@ a:hover,
}
.gradido-border-radius {
border-radius: 26px;
border-radius: 26px!important;
overflow: hidden;
}
@ -341,3 +341,7 @@ a:hover,
.text-color-gdd-yellow {
color: rgb(197 141 56);
}
.gdd-toaster-body {
color: rgb(255 255 255);
}

5
frontend/src/components/Auth/AuthFooter.vue
View File

@ -16,18 +16,15 @@
</div>
</BCol>
<BCol class="col-12 col-md-12 col-lg-6 mt-4 mb-4 mt-lg-0 mb-lg-0">
<div class="d-flex align-items-center ms-3 ms-lg-0 text-lg-right pt-1">
<div class="d-flex align-items-center ms-3 ms-lg-0 text-lg-end pt-1">
{{ $t('followUs') }}
<BLink href="https://www.facebook.com/groups/Gradido/" target="_blank">
<!-- <b-icon-facebook class="ml-3 me-3 c-grey" font-scale="1"></b-icon-facebook>-->
<IBiFacebook class="ms-3 me-3 c-grey" />
</BLink>
<BLink href="https://twitter.com/gradido" target="_blank">
<!-- <b-icon-twitter class="me-3 c-grey" font-scale="1"></b-icon-twitter>-->
<IBiTwitterX class="me-3 c-grey" font-scale="1" />
</BLink>
<BLink href="https://www.youtube.com/c/GradidoNet" target="_blank">
<!-- <b-icon-youtube class="me-3 c-grey" font-scale="1"></b-icon-youtube>-->
<IBiYoutube class="me-3 c-grey" font-scale="1" />
</BLink>

14
frontend/src/components/ClipboardCopy.vue
View File

@ -4,13 +4,13 @@
<div>
<label>{{ $t('gdd_per_link.copy-link') }}</label>
<div
class="pointer text-center bg-secondary gradido-border-radius p-3"
class="copy-link-card pointer text-center gradido-border-radius p-3"
data-test="copyLink"
@click="copyLink"
>
{{ link }}
<div>
<BButton class="p-4">
<BButton class="p-4 gradido-border-radius">
<IBiLink45deg />
</BButton>
</div>
@ -19,13 +19,13 @@
<div class="mt-5">
<label>{{ $t('gdd_per_link.copy-link-with-text') }}</label>
<div
class="pointer text-center bg-secondary gradido-border-radius p-3"
class="copy-link-card pointer text-center gradido-border-radius p-3"
data-test="copyLinkWithText"
@click="copyLinkWithText"
>
{{ linkText }}
<div>
<BButton class="p-4">
<BButton class="p-4 gradido-border-radius">
<IBiLink45deg />
</BButton>
</div>
@ -51,8 +51,12 @@ const props = defineProps({
const { copyLink, copyLinkWithText, linkText, canCopyLink } = useCopyLinks({ ...props })
</script>
<style>
<style lang="scss">
.svg {
filter: brightness(0) invert(1);
}
.copy-link-card {
background-color: $secondary !important;
}
</style>

2
frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue
View File

@ -14,7 +14,7 @@
<BCol>
<BButton type="reset" variant="secondary">{{ $t('form.cancel') }}</BButton>
</BCol>
<BCol class="text-right">
<BCol class="text-end">
<BButton type="submit" variant="gradido" :disabled="disabled">
{{ $t('form.reply') }}
</BButton>

2
frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
View File

@ -20,7 +20,7 @@
</BCol>
</BRow>
</div>
<div v-else-if="isNotModerator" class="text-right pe-4 pe-lg-0 is-not-moderator">
<div v-else-if="isNotModerator" class="text-end pe-4 pe-lg-0 is-not-moderator">
<BRow class="mb-3">
<BCol cols="10">
<div class="fw-bold" data-test="username">{{ storeName.username }}</div>

4
frontend/src/components/Contributions/ContributionForm.vue
View File

@ -12,7 +12,7 @@
:state="dataFieldMeta.valid"
:locale="$i18n.locale"
:max="getMaximalDate"
:min="minimalDate"
:min="minimalDate.toISOString().slice(0, 10)"
class="mb-4 bg-248"
reset-value=""
:label-no-date-selected="$t('contribution.noDateSelected')"
@ -69,7 +69,7 @@
{{ $t('form.cancel') }}
</BButton>
</BCol>
<BCol cols="12" lg="6" class="text-right mt-4 mt-lg-0">
<BCol cols="12" lg="6" class="text-end mt-4 mt-lg-0">
<BButton
block
type="submit"

117
frontend/src/components/Contributions/ContributionList.vue
View File

@ -26,7 +26,7 @@
</div>
<BPagination
v-if="isPaginationVisible"
v-model="currentPage"
:model-value="currentPage"
class="mt-3"
pills
size="lg"
@ -34,70 +34,73 @@
:total-rows="contributionCount"
align="center"
:hide-ellipsis="true"
@update:model-value="currentPage = $event"
/>
</div>
</template>
<script>
import ContributionListItem from '@/components/Contributions/ContributionListItem'
<script setup>
import { ref, computed, watch } from 'vue'
import ContributionListItem from '@/components/Contributions/ContributionListItem.vue'
export default {
name: 'ContributionList',
components: {
ContributionListItem,
const props = defineProps({
items: {
type: Array,
required: true,
},
props: {
items: {
type: Array,
required: true,
},
contributionCount: {
type: Number,
required: true,
},
showPagination: {
type: Boolean,
required: true,
},
pageSize: { type: Number, default: 25 },
allContribution: {
type: Boolean,
required: false,
default: false,
},
contributionCount: {
type: Number,
required: true,
},
data() {
return {
currentPage: 1,
messages: [],
}
showPagination: {
type: Boolean,
required: true,
},
computed: {
isPaginationVisible() {
return this.showPagination && this.pageSize < this.contributionCount
},
pageSize: {
type: Number,
default: 25,
},
watch: {
currentPage() {
this.updateListContributions()
},
},
methods: {
updateListContributions() {
this.$emit('update-list-contributions', {
currentPage: this.currentPage,
pageSize: this.pageSize,
})
window.scrollTo(0, 0)
},
updateContributionForm(item) {
this.$emit('update-contribution-form', item)
},
deleteContribution(item) {
this.$emit('delete-contribution', item)
},
updateStatus(id) {
this.$emit('update-status', id)
},
allContribution: {
type: Boolean,
required: false,
default: false,
},
})
const emit = defineEmits([
'update-list-contributions',
'update-contribution-form',
'delete-contribution',
'update-status',
])
const currentPage = ref(1)
const messages = ref([])
const isPaginationVisible = computed(() => {
return props.showPagination && props.pageSize < props.contributionCount
})
watch(currentPage, () => {
updateListContributions()
})
const updateListContributions = () => {
emit('update-list-contributions', {
currentPage: currentPage.value,
pageSize: props.pageSize,
})
window.scrollTo(0, 0)
}
const updateContributionForm = (item) => {
emit('update-contribution-form', item)
}
const deleteContribution = (item) => {
emit('delete-contribution', item)
}
const updateStatus = (id) => {
emit('update-status', id)
}
</script>

36
frontend/src/components/Contributions/ContributionListItem.vue
View File

@ -13,22 +13,14 @@
color="#fff"
class="fw-bold"
></avatar>
<BAvatar v-else rounded="lg" :variant="variant" size="4em">
<IBiTrash v-if="deletedAt" />
<IBiXCircle v-else-if="deniedAt" />
<IBiCheck v-else-if="confirmedAt" />
<IBiQuestion v-else-if="status === 'IN_PROGRESS'" />
<IBiBellFill v-else style="width: 36px; height: 36px" />
<BAvatar v-else rounded="lg" :variant="variant" size="4.55em">
<variant-icon :icon="icon" variant="white" />
</BAvatar>
</BCol>
<BCol>
<div v-if="firstName" class="me-3 fw-bold">
{{ firstName }} {{ lastName }}
<IBiTrash v-if="deletedAt" />
<IBiXCircle v-else-if="deniedAt" />
<IBiCheck v-else-if="confirmedAt" />
<IBiQuestion v-else-if="status === 'IN_PROGRESS'" />
<IBiBellFill v-else />
<variant-icon :icon="icon" variant="white" />
</div>
<div class="small">
{{ $d(new Date(contributionDate), 'short') }}
@ -51,8 +43,7 @@
{{ $t('creation') }} {{ $t('(') }}{{ amount / 20 }} {{ $t('h') }}{{ $t(')') }}
</div>
<div v-if="status === 'DENIED' && allContribution" class="fw-bold">
<!-- <b-icon icon="x-circle" variant="danger"></b-icon>-->
<IBiXCircle />
<variant-icon icon="x-circle" variant="danger" />
{{ $t('contribution.alert.denied') }}
</div>
<div v-if="status === 'DELETED'" class="small">
@ -60,9 +51,9 @@
</div>
<div v-else class="fw-bold">{{ $filters.GDD(amount) }}</div>
</BCol>
<BCol cols="12" md="1" lg="1" class="text-right align-items-center">
<BCol cols="12" md="1" lg="1" class="text-end align-items-center">
<div v-if="messagesCount > 0 && !moderatorId" @click="visible = !visible">
<collapse-icon class="text-right" :visible="visible" />
<collapse-icon class="text-end" :visible="visible" />
</div>
</BCol>
</BRow>
@ -217,6 +208,14 @@ const variant = computed(() => {
return 'primary'
})
const icon = computed(() => {
if (props.deletedAt) return 'trash'
if (props.deniedAt) return 'x-circle'
if (props.confirmedAt) return 'check'
if (props.status === 'IN_PROGRESS') return 'question'
return 'bell-fill'
})
const date = computed(() => props.createdAt)
const collapseId = computed(() => 'collapse' + String(props.id))
@ -280,3 +279,10 @@ function updateStatus(id) {
const emit = defineEmits(['delete-contribution', 'close-all-open-collapse', 'update-status'])
</script>
<style lang="scss" scoped>
:deep(.b-avatar-custom > svg) {
width: 2.5em;
height: 2.5em;
}
</style>

1
frontend/src/components/DecayInformations/CollapseLinksList.vue
View File

@ -21,7 +21,6 @@
{{ buttonText }}
</BButton>
<div class="text-center">
<!-- <b-icon v-if="pending" icon="three-dots" animation="cylon" font-scale="4"></b-icon>-->
<IBiThreeDots v-if="pending" animation="cylon" font-scale="4" />
</div>
</div>

9
frontend/src/components/DecayInformations/DecayInformation-Decay.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="decayinformation-decay">
<div class="mb-3">
<div class="mb-3 d-flex align-items-center">
<IBiDropletHalf class="me-2" />
<b>{{ $t('decay.calculation_decay') }}</b>
</div>
@ -42,3 +42,10 @@ export default {
},
}
</script>
<style scoped lang="scss">
:deep(svg.me-2) {
width: 1rem;
height: 1rem;
}
</style>

10
frontend/src/components/DecayInformations/DecayInformation-DecayStartblock.vue
View File

@ -12,7 +12,7 @@
<BCol offset="1" cols="11">
<BRow>
<BCol cols="5">
<div class="text-right">
<div class="text-end">
<div>{{ $t('decay.decay_introduced') }}</div>
</div>
</BCol>
@ -28,7 +28,7 @@
<!-- Decay-->
<BRow>
<BCol cols="5" class="text-right">{{ $t('decay.decay') }}</BCol>
<BCol cols="5" class="text-end">{{ $t('decay.decay') }}</BCol>
<BCol cols="7">{{ $filters.GDD(decay.decay) }}</BCol>
</BRow>
</BCol>
@ -46,17 +46,17 @@
<BCol offset="1" cols="11">
<BRow>
<!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
<BCol cols="5" class="text-right">{{ $t(`decay.types.${typeId.toLowerCase()}`) }}</BCol>
<BCol cols="5" class="text-end">{{ $t(`decay.types.${typeId.toLowerCase()}`) }}</BCol>
<BCol cols="7">{{ $filters.GDD(amount) }}</BCol>
</BRow>
<!-- Decay-->
<BRow>
<BCol cols="5" class="text-right">{{ $t('decay.decay') }}</BCol>
<BCol cols="5" class="text-end">{{ $t('decay.decay') }}</BCol>
<BCol cols="7">{{ $filters.GDD(decay.decay) }}</BCol>
</BRow>
<!-- Total-->
<BRow>
<BCol cols="5" class="text-right">{{ $t('decay.total') }}</BCol>
<BCol cols="5" class="text-end">{{ $t('decay.total') }}</BCol>
<BCol cols="7">
<b>{{ $filters.GDD(Number(amount) + Number(decay.decay)) }}</b>
</BCol>

10
frontend/src/components/DecayInformations/DecayInformation-Long.vue
View File

@ -14,7 +14,7 @@
<BCol cols="6" lg="4" md="6" sm="6">
<div>{{ $t('decay.last_transaction') }}</div>
</BCol>
<BCol offset="0" class="text-right me-0">
<BCol offset="0" class="text-end me-0">
<div>
<span>
{{ $d(new Date(decay.start), 'long') }}
@ -29,7 +29,7 @@
<BCol cols="6" lg="4" md="6" sm="6">
<div>{{ $t('decay.old_balance') }}</div>
</BCol>
<BCol offset="0" class="text-right me-0">
<BCol offset="0" class="text-end me-0">
{{ $filters.GDD(previousBalance) }}
</BCol>
</BRow>
@ -39,7 +39,7 @@
<BCol cols="6" lg="3" md="6" sm="6">
<div>{{ $t('decay.decay') }}</div>
</BCol>
<BCol offset="0" class="text-right me-0">
<BCol offset="0" class="text-end me-0">
{{ $filters.GDD(decay.decay) }}
</BCol>
</BRow>
@ -54,7 +54,7 @@
{{ $t(`decay.types.${typeId.toLowerCase()}`) }}
</BCol>
<!-- eslint-enable @intlify/vue-i18n/no-dynamic-keys-->
<BCol offset="0" class="text-right me-0">
<BCol offset="0" class="text-end me-0">
{{ $filters.GDD(amount) }}
</BCol>
</BRow>
@ -63,7 +63,7 @@
<BCol cols="6" lg="3" md="6" sm="6">
<div>{{ $t('decay.new_balance') }}</div>
</BCol>
<BCol offset="0" class="text-right me-0">
<BCol offset="0" class="text-end me-0">
<b>{{ $filters.GDD(balance) }}</b>
</BCol>
</BRow>

6
frontend/src/components/GddSend/TransactionConfirmationLink.vue
View File

@ -14,8 +14,8 @@
</BRow>
<BRow class="mt-5 pe-3 text-color-gdd-yellow h3">
<BCol cols="2" class="text-right">
<b-icon class="text-color-gdd-yellow" icon="droplet-half"></b-icon>
<BCol cols="2" class="text-end">
<variant-icon icon="droplet-half" variant="gold" />
</BCol>
<BCol>{{ $t('advanced-calculation') }}</BCol>
</BRow>
@ -41,7 +41,7 @@
{{ $t('back') }}
</BButton>
</BCol>
<BCol cols="12" md="6" lg="6" class="text-lg-right">
<BCol cols="12" md="6" lg="6" class="text-lg-end">
<BButton
block
class="send-button"

4
frontend/src/components/GddSend/TransactionConfirmationSend.vue
View File

@ -24,7 +24,7 @@
</BRow>
<BRow class="mt-5 text-color-gdd-yellow h3">
<BCol cols="2" class="text-right">
<BCol cols="2" class="text-end">
<IBiDropletHalf />
</BCol>
<BCol>{{ $t('advanced-calculation') }}</BCol>
@ -51,7 +51,7 @@
{{ $t('back') }}
</BButton>
</BCol>
<BCol cols="12" md="6" lg="6" class="text-lg-right">
<BCol cols="12" md="6" lg="6" class="text-lg-end">
<BButton
block
variant="gradido"

13
frontend/src/components/GddSend/TransactionForm.vue
View File

@ -9,7 +9,7 @@
:model-value="radioSelected"
@update:model-value="radioSelected = $event"
>
<BRow class="mb-4">
<BRow class="mb-4 gap-5">
<BCol>
<BRow class="bg-248 gradido-border-radius position-relative">
<BFormRadio
@ -118,7 +118,7 @@
{{ $t('form.reset') }}
</BButton>
</BCol>
<BCol cols="12" md="6" lg="6" class="text-lg-right">
<BCol cols="12" md="6" lg="6" class="text-lg-end">
<BButton block type="submit" variant="gradido">
{{ $t('form.check_now') }}
</BButton>
@ -284,6 +284,8 @@ label {
margin-right: 0;
margin-bottom: 0;
position: relative;
display: flex !important;
justify-content: space-between;
> input {
position: absolute;
@ -293,3 +295,10 @@ label {
}
}
</style>
<style scoped>
:deep(label.form-check-label) {
width: 100%;
cursor: pointer;
}
</style>

25
frontend/src/components/GddTransactionList.vue
View File

@ -1,16 +1,14 @@
<template>
<div class="gdd-transaction-list">
<div class="list-group">
<div v-if="!transactions" class="test-no-transactionlist text-right">
<!-- <b-icon icon="exclamation-triangle" class="me-2" variant="danger"></b-icon>-->
<IBiExclamationTriangle class="me-2" />
<div v-if="!transactions" class="test-no-transactionlist text-end">
<variant-icon icon="exclamation-triangle" variant="danger" class="me-2" />
<small>
{{ $t('error.no-transactionlist') }}
</small>
</div>
<div v-if="transactionCount < 0" class="test-empty-transactionlist text-right">
<!-- <b-icon icon="exclamation-triangle" class="me-2" variant="danger"></b-icon>-->
<IBiExclamationTriangle class="me-2" />
<div v-if="transactionCount < 0" class="test-empty-transactionlist text-end">
<variant-icon icon="exclamation-triangle" variant="danger" class="me-2" />
<small>{{ $t('error.empty-transactionlist') }}</small>
</div>
@ -55,9 +53,9 @@
</div>
</div>
</div>
<b-pagination
<BPagination
v-if="isPaginationVisible"
v-model="currentPage"
:model-value="currentPage"
class="mt-3"
pills
size="lg"
@ -65,10 +63,10 @@
:total-rows="transactionCount"
align="center"
:hide-ellipsis="true"
></b-pagination>
@update:model-value="currentPage = $event"
/>
<div v-if="transactionCount <= 0" class="mt-4 text-center">
<b-icon v-if="pending" icon="three-dots" animation="cylon"></b-icon>
<IBiThreeDots v-if="pending" />
<div v-else>{{ $t('transaction.nullTransactions') }}</div>
</div>
</div>
@ -133,11 +131,6 @@ export default {
</script>
<style>
collaps-icon {
width: 95%;
position: absolute;
}
.el-table .cell {
padding-left: 0;
padding-right: 0;

3
frontend/src/components/GdtTransactionList.vue
View File

@ -29,7 +29,7 @@
</div>
<BPagination
v-if="transactionGdtCount > pageSize"
v-model="currentPage"
:model-value="currentPage"
class="mt-3"
pills
size="lg"
@ -37,6 +37,7 @@
:total-rows="transactionGdtCount"
align="center"
:hide-ellipsis="true"
@update:model-value="currentPage = $event"
/>
</div>
</template>

10
frontend/src/components/Inputs/InputTextarea.vue
View File

@ -9,8 +9,8 @@
:placeholder="placeholder"
:state="meta.valid"
trim
rows="4"
max-rows="4"
:rows="4"
:max-rows="4"
:disabled="disabled"
no-resize
@update:modelValue="currentValue = $event"
@ -53,3 +53,9 @@ const { value: currentValue, errorMessage, meta } = useField(props.name, props.r
const labelFor = computed(() => `${props.name}-input-field`)
</script>
<style lang="scss" scoped>
:deep(.form-control) {
height: unset;
}
</style>

45
frontend/src/components/Inputs/InputUsername.vue
View File

@ -4,31 +4,32 @@
<BFormGroup :label="$t('form.username')" :description="$t('settings.usernameInfo')">
<BInputGroup>
<BFormInput
v-bind="ariaInput"
:id="labelFor"
:model-value="currentValue"
:model-value="usernameValue"
:name="name"
:placeholder="placeholder"
type="text"
:state="validated ? valid : false"
:state="usernameMeta.valid"
autocomplete="off"
data-test="username"
@update:modelValue="updateValue"
@update:modelValue="usernameValue = $event"
/>
<BButton size="md" text="Button" variant="secondary" append @click="emitSetIsEdit">
<IBiXCircle style="height: 17px; width: 17px" />
</BButton>
</BInputGroup>
<BFormInvalidFeedback v-bind="ariaMsg">
<div v-if="showAllErrors">
<span v-for="error in errors" :key="error">
{{ error }}
<br />
</span>
</div>
<div v-else>
{{ errors?.[0] }}
</div>
<BFormInvalidFeedback v-if="usernameError || usernameErrors.length" force-show>
<template #default>
<div v-if="props.showAllErrors">
<span v-for="error in usernameErrors" :key="error">
{{ error }}
<br />
</span>
</div>
<div v-else>
{{ usernameErrors?.[0] }}
</div>
</template>
</BFormInvalidFeedback>
</BFormGroup>
</div>
@ -43,7 +44,7 @@ import {
BFormInvalidFeedback,
} from 'bootstrap-vue-next'
import { ref, computed, watch, defineProps, defineEmits } from 'vue'
import { useForm } from 'vee-validate'
import { useField, useForm } from 'vee-validate'
const props = defineProps({
isEdit: { type: Boolean, default: false },
@ -59,8 +60,13 @@ const props = defineProps({
const currentValue = ref(props?.modelValue)
const { errors, valid, validated, ariaInput, ariaMsg } = useForm({
initialValues: currentValue.value,
const {
meta: usernameMeta,
errors: usernameErrors,
value: usernameValue,
errorMessage: usernameError,
} = useField(props.name, props.rules, {
initialValue: currentValue,
})
const emit = defineEmits(['update:modelValue', 'set-is-edit'])
@ -70,9 +76,4 @@ const labelFor = computed(() => `${props.name}-input-field`)
const emitSetIsEdit = (bool) => {
emit('set-is-edit', bool)
}
const updateValue = (e) => {
currentValue.value = e
emit('update:modelValue', e)
}
</script>

2
frontend/src/components/LanguageSwitch2.vue
View File

@ -47,6 +47,7 @@ import { useAppToast } from '@/composables/useToast'
import locales from '@/locales/'
import { onMounted, ref, computed } from 'vue'
import { updateUserInfos } from '@/graphql/mutations'
import { setLocale as setValidationI18nLocale } from '@vee-validate/i18n'
const store = useStore()
const { t, locale } = useI18n()
@ -68,6 +69,7 @@ const saveLocale = async (newLocale) => {
if (locale.value === newLocale) return
setLocale(newLocale)
setValidationI18nLocale(newLocale)
if (store.state.gradidoID) {
try {
await mutate({ locale: newLocale })

4
frontend/src/components/Overview/CommunityNews.vue
View File

@ -25,8 +25,8 @@
</BRow>
<BRow class="my-5">
<BCol cols="12">
<div class="text-lg-right">
<BCol cols="12" class="d-flex">
<div class="ms-auto">
<BButton v-if="item.url" variant="gradido" :href="item.url" target="_blank">
{{ item.button }}
</BButton>

2
frontend/src/components/Status.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="gdd-status">
<div class="p-0 gdd-status-div">
<b-icon v-if="pending" icon="three-dots" animation="cylon" class="test-pending-icon"></b-icon>
<IBiThreeDots v-if="pending" animation="cylon" font-scale="4" class="test-pending-icon" />
<div v-else>
{{ pending || balance === null ? $t('em-dash') : $n(balance, 'decimal') }} {{ statusText }}
</div>

6
frontend/src/components/Template/ContentHeader/GddAmount.vue
View File

@ -24,11 +24,7 @@
<BRow>
<BCol cols="9">
<!-- <b-icon-->
<!-- icon="layers"-->
<!-- class="me-3 gradido-global-border-color-accent d-none d-lg-inline"-->
<!-- ></b-icon>-->
<IBiLayers class="me-3 gradido-global-border-color-accent" />
<IBiLayers class="me-3 gradido-global-border-color-accent d-none d-lg-inline" />
<span v-if="hideAmount" class="fw-bold gradido-global-color-accent">
{{ $t('asterisks') }}
</span>

18
frontend/src/components/Template/ContentHeader/GdtAmount.vue
View File

@ -19,11 +19,7 @@
</BRow>
<BRow>
<BCol cols="9">
<!-- <b-icon-->
<!-- icon="layers"-->
<!-- class="me-3 gradido-global-border-color-accent d-none d-lg-inline"-->
<!-- ></b-icon>-->
<IBiLayers />
<IBiLayers class="me-3 gradido-global-border-color-accent d-none d-lg-inline" />
<span v-if="hideAmount" class="fw-bold gradido-global-color-accent">
{{ t('asterisks') }}
</span>
@ -32,14 +28,12 @@
</span>
</BCol>
<BCol cols="3" class="border-start border-dark">
<!-- <b-icon-->
<!-- :icon="hideAmount ? 'eye-slash' : 'eye'"-->
<!-- class="me-3 gradido-global-border-color-accent pointer hover-icon"-->
<!-- @click="updateHideAmountGDT"-->
<!-- ></b-icon>-->
<button class="transparent-button" @click="updateHideAmountGDT">
<IBiEyeSlash v-if="hideAmount" />
<IBiEye v-else />
<IBiEyeSlash
v-if="hideAmount"
class="me-3 gradido-global-border-color-accent pointer hover-icon"
/>
<IBiEye v-else class="me-3 gradido-global-border-color-accent pointer hover-icon" />
</button>
</BCol>
</BRow>

4
frontend/src/components/Template/RightSide/LastContributions.vue
View File

@ -2,8 +2,8 @@
<div class="last-contributions d-none d-lg-block">
<BRow class="mb-5">
<BCol class="h3">{{ $t('contribution.lastContribution') }}</BCol>
<BCol cols="1" class="text-right">
<b-icon icon="three-dots-vertical"></b-icon>
<BCol cols="1" class="text-end">
<IBiThreeDotsVertical />
</BCol>
</BRow>
</div>

5
frontend/src/components/Template/RightSide/LastTransactions.vue
View File

@ -2,9 +2,6 @@
<div class="rightside-last-transactions d-none d-lg-block">
<BRow class="mb-3">
<BCol class="h3">{{ $t('transaction.lastTransactions') }}</BCol>
<!-- <BCol cols="1" class="text-right">
<b-icon icon="three-dots-vertical"></b-icon>
</BCol> -->
</BRow>
<div v-for="(transaction, index) in transactions" :key="transaction.id">
@ -38,7 +35,7 @@
<div class="small">
{{ $filters.GDD(transaction.amount) }}
</div>
<div class="small ms-3 text-right">
<div class="small ms-3 text-end">
{{ $d(new Date(transaction.balanceDate), 'short') }}
</div>
</div>

11
frontend/src/components/Transaction.vue
View File

@ -8,7 +8,9 @@
variant="light"
size="3em"
:class="getLinesByType.iconclasses"
/>
>
<variant-icon :icon="getLinesByType.icon" :variant="getLinesByType.iconColor" />
</BAvatar>
</BCol>
<BCol>
<div>
@ -26,8 +28,8 @@
<div class="small mb-2">{{ $t('gdt.credit') }}</div>
<div class="fw-bold">{{ getLinesByType.credittext }}</div>
</BCol>
<BCol cols="12" md="1" lg="1" class="text-right">
<collapse-icon class="text-right" :visible="visible" />
<BCol cols="12" md="1" lg="1" class="text-end">
<collapse-icon class="text-end" :visible="visible" />
</BCol>
</BRow>
@ -80,6 +82,7 @@ const getLinesByType = computed(() => {
return {
icon: 'heart',
iconclasses: 'gradido-global-color-accent',
iconColor: '4',
description: t('gdt.contribution'),
descriptiontext: n(props.amount, 'decimal') + ' €',
credittext: n(props.gdt, 'decimal') + ' GDT',
@ -89,6 +92,7 @@ const getLinesByType = computed(() => {
return {
icon: 'person-check',
iconclasses: 'gradido-global-color-accent',
iconColor: '4',
description: t('gdt.recruited-member'),
descriptiontext: '5%',
credittext: n(props.amount, 'decimal') + ' GDT',
@ -98,6 +102,7 @@ const getLinesByType = computed(() => {
return {
icon: 'gift',
iconclasses: 'gradido-global-color-accent',
iconColor: '4',
description: t('gdt.gdt-received'),
descriptiontext: props.comment,
credittext: n(props.gdt, 'decimal') + ' GDT',

5
frontend/src/components/TransactionLinks/TransactionLink.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="transaction-link gradido-custom-background">
<BRow :class="validLink ? '' : 'bg-muted text-light'" class="mb-2 pt-2 pb-2">
<BRow :class="validLink ? '' : 'bg-muted text-dark'" class="mb-2 pt-2 pb-2">
<BCol cols="1">
<type-icon color="text-danger" icon="link45deg" class="pt-4 ps-2" />
<variant-icon icon="link45deg" variant="danger" class="pt-4 ps-2" />
</BCol>
<BCol cols="11">
<BRow>
@ -88,6 +88,7 @@ import DateRow from '../TransactionRows/DateRow'
import DecayRow from '../TransactionRows/DecayRow'
import AppModal from '@/components/AppModal'
import FigureQrCode from '@/components/QrCode/FigureQrCode'
import VariantIcon from '@/components/VariantIcon.vue'
const props = defineProps({
holdAvailableAmount: { type: String, required: true },

2
frontend/src/components/TransactionRows/AmountAndNameRow.vue
View File

@ -2,7 +2,7 @@
<div class="amount-and-name-row">
<BRow>
<BCol cols="5">
<div class="text-right">
<div class="text-end">
<span class="gdd-transaction-list-item-amount">
{{ $filters.GDD(amount) }}
</span>

5
frontend/src/components/TransactionRows/CollapseIcon.vue
View File

@ -1,10 +1,5 @@
<template>
<div class="collapse-icon">
<!-- <b-icon-->
<!-- :icon="visible ? 'arrow-up-circle' : 'arrow-down-circle'"-->
<!-- :class="visible ? 'text-black' : 'text-muted'"-->
<!-- class="h1"-->
<!-- />-->
<IBiArrowUpCircle v-if="visible" class="text-black h1" />
<IBiArrowDownCircle v-else class="text-muted h1" />
</div>

2
frontend/src/components/TransactionRows/DateRow.spec.js
View File

@ -32,7 +32,7 @@ describe('DateRow', () => {
})
it('shows the expiration text', () => {
expect(wrapper.find('div.text-right').text()).toBe('form.date')
expect(wrapper.find('div.text-end').text()).toBe('form.date')
})
it.skip('shows the date in long format', () => {

2
frontend/src/components/TransactionRows/DateRow.vue
View File

@ -2,7 +2,7 @@
<div class="date-row">
<BRow>
<BCol cols="5">
<div class="text-right">
<div class="text-end">
{{ text }}
</div>
</BCol>

3
frontend/src/components/TransactionRows/DecayRow.vue
View File

@ -2,8 +2,7 @@
<div class="decay-row">
<BRow v-if="decay">
<BCol cols="5">
<div class="text-right">
<!-- <b-icon icon="droplet-half" height="15" class="mb-1" />-->
<div class="text-end">
<IBiDropletHalf height="15" class="mb-1" />
</div>
</BCol>

2
frontend/src/components/TransactionRows/DurationRow.vue
View File

@ -4,7 +4,7 @@
<BCol cols="6" lg="4" md="6" sm="6">
<div>{{ $t('decay.past_time') }}</div>
</BCol>
<BCol offset="0" class="text-right me-0">
<BCol offset="0" class="text-end me-0">
<span v-if="duration">{{ duration }}</span>
</BCol>
</BRow>

2
frontend/src/components/TransactionRows/LinkCountRow.vue
View File

@ -2,7 +2,7 @@
<div class="link-count-row">
<BRow>
<BCol cols="5">
<div class="text-right">{{ $t('gdd_per_link.links_count') }}</div>
<div class="text-end">{{ $t('gdd_per_link.links_count') }}</div>
</BCol>
<BCol cols="7">
<div class="gdd-transaction-list-link-count">{{ count }}</div>

2
frontend/src/components/TransactionRows/MemoRow.vue
View File

@ -2,7 +2,7 @@
<div class="memo-row">
<BRow>
<BCol cols="5">
<div class="text-right">{{ $t('form.memo') }}</div>
<div class="text-end">{{ $t('form.memo') }}</div>
</BCol>
<BCol cols="7">
<div class="gdd-transaction-list-message">{{ memo }}</div>

21
frontend/src/components/Transactions/TransactionCreation.vue
View File

@ -1,8 +1,10 @@
<template>
<div class="transaction-slot-creation">
<BRow class="align-items-center" @click="visible = !visible">
<div class="transaction-slot-creation" @click="visible = !visible">
<BRow class="align-items-center">
<BCol cols="3" lg="2" md="2">
<b-avatar icon="gift" variant="success" :size="42"></b-avatar>
<BAvatar :size="42">
<variant-icon icon="gift" variant="success" />
</BAvatar>
</BCol>
<BCol>
<div class="fw-bold">{{ linkedUser.firstName }} {{ linkedUser.lastName }}</div>
@ -13,11 +15,11 @@
<div class="small mb-2">{{ $t('decay.types.receive') }}</div>
<div class="fw-bold">{{ $filters.GDD(amount) }}</div>
</BCol>
<BCol cols="12" md="1" lg="1" class="text-right">
<collapse-icon class="text-right" :visible="visible" />
<BCol cols="12" md="1" lg="1" class="text-end">
<collapse-icon class="text-end" :visible="visible" />
</BCol>
</BRow>
<BCollapse v-model="visible" class="pb-4 pt-lg-3">
<BCollapse :model-value="visible" class="pb-4 pt-lg-3">
<decay-information
:type-id="typeId"
:decay="decay"
@ -84,3 +86,10 @@ export default {
},
}
</script>
<style lang="scss" scoped>
:deep(.b-avatar-custom > svg) {
height: 2em;
width: 2em;
}
</style>

20
frontend/src/components/Transactions/TransactionDecay.vue
View File

@ -2,14 +2,13 @@
<div class="transaction-slot-decay" @click="visible = !visible">
<BRow class="text-color-gdd-yellow align-items-center">
<BCol cols="1">
<!-- <type-icon color="text-color-gdd-yellow" icon="droplet-half" />-->
<IBiDropletHalf />
<variant-icon icon="droplet-half" variant="gold" />
</BCol>
<BCol>
{{ $t('decay.decay_since_last_transaction') }}
</BCol>
<BCol cols="12" md="1" lg="1" class="text-right">
<collapse-icon class="text-right" :visible="visible" />
<BCol cols="12" md="1" lg="1" class="text-end">
<collapse-icon class="text-end" :visible="visible" />
</BCol>
</BRow>
@ -24,7 +23,6 @@
</template>
<script>
import CollapseIcon from '../TransactionRows/CollapseIcon'
// import TypeIcon from '../TransactionRows/TypeIcon'
import DecayInformationDecay from '../DecayInformations/DecayInformation-Decay'
export default {
@ -60,3 +58,15 @@ export default {
},
}
</script>
<style scoped lang="scss">
:deep(.collapse.show) {
padding-top: 3rem;
padding-bottom: 1.5rem;
}
:deep(.col-1 > svg.icon-variant) {
width: 1.5rem;
height: 1.5rem;
}
</style>

17
frontend/src/components/Transactions/TransactionLinkSummary.vue
View File

@ -1,8 +1,10 @@
<template>
<div class="transaction-slot-link" @click="showTransactionLinks">
<BRow class="align-items-center">
<BCol cols="3" lg="2" md="2">
<BAvatar icon="link" variant="light" :size="42"></BAvatar>
<BCol id="transaction-link-summary-avatar" cols="3" lg="2" md="2">
<BAvatar icon="link" variant="light" :size="42">
<variant-icon icon="link" />
</BAvatar>
</BCol>
<BCol>
<div>{{ $t('gdd_per_link.links_sum') }}</div>
@ -12,8 +14,8 @@
<div class="small mb-2">{{ $t('send_per_link') }}</div>
<div class="fw-bold">{{ $filters.GDD(amount) }}</div>
</BCol>
<BCol cols="12" md="1" lg="1" class="text-right">
<collapse-icon class="text-right" :visible="visible" />
<BCol cols="12" md="1" lg="1" class="text-end">
<collapse-icon class="text-end" :visible="visible" />
</BCol>
</BRow>
<BCollapse :model-value="visible">
@ -107,3 +109,10 @@ async function updateListTransactionLinks() {
}
}
</script>
<style lang="scss" scoped>
:deep(.b-avatar-custom > svg) {
height: 2em;
width: 2em;
}
</style>

11
frontend/src/components/Transactions/TransactionReceive.vue
View File

@ -26,16 +26,11 @@
</div>
<div v-if="linkId" class="small">
{{ $t('via_link') }}
<b-icon
icon="link45deg"
variant="muted"
class="m-mb-1"
:title="$t('gdd_per_link.redeemed-title')"
/>
<variant-icon icon="link45deg" variant="muted" class="m-mb-1" />
</div>
</BCol>
<BCol cols="12" md="1" lg="1" class="text-right">
<collapse-icon class="text-right" :visible="visible" />
<BCol cols="12" md="1" lg="1" class="text-end">
<collapse-icon class="text-end" :visible="visible" />
</BCol>
</BRow>
<BCollapse class="pb-4 pt-lg-3" :model-value="visible">

12
frontend/src/components/Transactions/TransactionSend.vue
View File

@ -25,17 +25,11 @@
</div>
<div v-if="linkId" class="small">
{{ $t('via_link') }}
<!-- <b-icon-->
<!-- icon="link45deg"-->
<!-- variant="muted"-->
<!-- class="m-mb-1"-->
<!-- :title="$t('gdd_per_link.redeemed-title')"-->
<!-- />-->
<IBiLink45deg variant="muted" class="m-mb-1" :title="$t('gdd_per_link.redeemed-title')" />
<variant-icon icon="link45deg" variant="muted" class="m-mb-1" />
</div>
</BCol>
<BCol cols="12" md="1" lg="1" class="text-right">
<collapse-icon class="text-right" :visible="visible" />
<BCol cols="12" md="1" lg="1" class="text-end">
<collapse-icon class="text-end" :visible="visible" />
</BCol>
</BRow>
<BCollapse :model-value="visible" class="pb-4 pt-lg-3">

8
frontend/src/components/UserSettings/UserData.vue
View File

@ -1,8 +1,8 @@
<template>
<b-card id="userdata_form" class="card-border-radius card-background-gray">
<div>
<BRow class="mb-4 text-right">
<BCol class="text-right">
<BRow class="mb-4 text-end">
<BCol class="text-end">
<a
class="cursor-pointer"
@click="showUserData ? (showUserData = !showUserData) : cancelEdit()"
@ -44,9 +44,9 @@
</BCol>
</BRow>
<BRow v-if="!showUserData" class="text-right">
<BRow v-if="!showUserData" class="text-end">
<BCol>
<div ref="submitButton" class="text-right">
<div ref="submitButton" class="text-end">
<b-button
:variant="loading ? 'light' : 'success'"
type="submit"

15
frontend/src/components/UserSettings/UserLanguage.vue
View File

@ -1,15 +1,18 @@
<template>
<b-card id="formuserlanguage" class="card-border-radius card-background-gray">
<div>
<BRow class="mb-4 text-right">
<BCol class="text-right">
<BRow class="mb-4 text-end">
<BCol class="text-end">
<a
class="cursor-pointer"
@click="showLanguage ? (showLanguage = !showLanguage) : cancelEdit()"
>
<span class="pointer me-3">{{ $t('settings.language.changeLanguage') }}</span>
<b-icon v-if="showLanguage" class="pointer ms-3" icon="pencil"></b-icon>
<b-icon v-else icon="x-circle" class="pointer ms-3" variant="danger"></b-icon>
<variant-icon
class="pointer ms-3"
:icon="showLanguage ? 'pencil' : 'x-circle'"
:variant="showLanguage ? 'primary' : 'danger'"
/>
</a>
</BCol>
</BRow>
@ -41,9 +44,9 @@
</BCol>
</BRow>
<BRow class="text-right">
<BRow class="text-end">
<BCol>
<div ref="submitButton" class="text-right">
<div ref="submitButton" class="text-end">
<b-button
:variant="loading ? 'light' : 'success'"
type="submit"

22
frontend/src/components/UserSettings/UserName.vue
View File

@ -22,9 +22,9 @@
<BCol class="col-12">
<input-username
:model-value="username"
:name="$t('form.username')"
name="username"
:placeholder="$t('form.username-placeholder')"
:show-all-errors="true"
show-all-errors
:unique="true"
:rules="rules"
:is-edit="isEdit"
@ -34,14 +34,18 @@
/>
</BCol>
<BCol class="col-12">
<div v-if="!username" class="alert" data-test="username-alert">
<div
v-if="!store.state.username"
class="alert gradido-border-radius"
data-test="username-alert"
>
{{ $t('settings.username.no-username') }}
</div>
</BCol>
</BRow>
<BRow v-if="newUsername" class="text-right">
<BRow v-if="newUsername" class="text-end">
<BCol>
<div ref="submitButton" class="text-right">
<div ref="submitButton" class="text-end">
<BButton
:variant="disabled(errors) ? 'light' : 'success'"
type="submit"
@ -75,7 +79,7 @@ const { toastError, toastSuccess } = useAppToast()
const { t } = useI18n()
const isEdit = ref(false)
const username = ref(store.state.username || '123')
const username = ref(store.state.username || '')
const usernameUnique = ref(false)
const rules = {
required: true,
@ -86,14 +90,12 @@ const rules = {
usernameUnique: true,
}
const { handleSubmit, errors } = useForm({
initialValues: username.value,
})
const { handleSubmit, errors, values } = useForm()
const { mutate: updateUserInfo } = useMutation(updateUserInfos)
const onSubmit = handleSubmit(async () => {
try {
await updateUserInfo({ alias: username.value })
await updateUserInfo({ alias: values.username })
store.commit('username', username.value)
toastSuccess(t('settings.username.change-success'))
} catch (error) {

8
frontend/src/components/UserSettings/UserPassword.vue
View File

@ -1,8 +1,8 @@
<template>
<BCard id="change_pwd" class="card-border-radius card-background-gray">
<div>
<BRow class="mb-4 text-right">
<BCol class="text-right">
<BRow class="mb-4 text-end">
<BCol class="text-end">
<BButton
class="change-password-form-opener"
data-test="open-password-change-form"
@ -35,9 +35,9 @@
:register="register"
@update:modelValue="form.newPassword = $event"
/>
<BRow class="text-right">
<BRow class="text-end">
<BCol>
<div class="text-right">
<div class="text-end">
<BButton
type="submit"
:variant="invalid ? 'light' : 'success'"

18
frontend/src/components/UserSettings/UserSettingsSwitch.vue
View File

@ -5,7 +5,8 @@
name="check-button"
:disabled="disabled"
switch
@change="onChange"
:model-value="props.initialValue"
@update:model-value="onChange"
/>
</div>
</template>
@ -37,16 +38,15 @@ const isDisabled = computed(() => {
const { mutate: updateUserData } = useMutation(updateUserInfos)
const onChange = async () => {
const onChange = async (evtPayload) => {
if (isDisabled.value) return
const variables = []
variables[props.attrName] = value.value
variables[props.attrName] = evtPayload
try {
await updateUserData({ variables })
store.commit(props.attrName, value.value)
emit('valueChanged', value.value)
toastSuccess(value.value ? props.enabledText : props.disabledText)
await updateUserData({ ...variables })
store.commit(props.attrName, evtPayload)
emit('value-changed', evtPayload)
toastSuccess(evtPayload ? props.enabledText : props.disabledText)
} catch (error) {
value.value = props.initialValue
toastError(error.message)
@ -59,5 +59,5 @@ const onClick = () => {
}
}
const emit = defineEmits(['valueChanged'])
const emit = defineEmits(['value-changed'])
</script>

35
frontend/src/components/VariantIcon.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<IBiCheck v-if="props.icon === 'check'" class="icon-variant" />
<IBiXCircle v-if="props.icon === 'x-circle'" class="icon-variant" />
<IBiLink45deg v-if="props.icon === 'link45deg'" class="icon-variant" />
<IBiLink v-if="props.icon === 'link'" class="icon-variant" />
<IBiDropletHalf v-if="props.icon === 'droplet-half'" class="icon-variant" />
<IBiTrash v-if="props.icon === 'trash'" class="icon-variant" />
<IBiQuestion v-if="props.icon === 'question'" class="icon-variant" />
<IBiBellFill v-if="props.icon === 'bell-fill'" class="icon-variant" />
<IBiExclamationTriangle v-if="props.icon === 'exclamation-triangle'" class="icon-variant" />
<IBiHeart v-if="props.icon === 'heart'" class="icon-variant" />
<IBiPersonCheck v-if="props.icon === 'person-check'" class="icon-variant" />
<IBiGift v-if="props.icon === 'gift'" class="icon-variant" />
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
icon: { type: String, default: '' },
variant: { type: String, default: 'gray-dark' },
})
const color = ref(`var(--bs-${props.variant})`)
</script>
<style scoped lang="scss">
:root {
--bs-gold: #c58d38;
}
.icon-variant {
color: v-bind('color');
}
</style>

16
frontend/src/layouts/AuthLayout.vue
View File

@ -29,12 +29,8 @@
<div class="h1 mb-0">{{ communityName }}</div>
<div class="mb-0">{{ $t('1000thanks') }}</div>
</BCol>
<BCol cols="3" class="text-right d-none d-sm-none d-md-inline">
<BAvatar
src="/img/brand/gradido_coin●.png"
size="6rem"
variant="transparent"
></BAvatar>
<BCol cols="3" class="text-end d-none d-sm-none d-md-inline">
<BAvatar src="/img/brand/gradido_coin●.png" size="6rem" />
</BCol>
</BRow>
<BCard ref="pageFontSize" no-body class="border-0 mt-4 gradido-custom-background">
@ -42,7 +38,7 @@
<BCol cols="10">
<language-switch-2 class="ms-3" />
</BCol>
<BCol cols="2" class="text-right">
<BCol cols="2" class="text-end">
<div id="popover-target-1" class="pointer">
<BImg src="/img/svg/type.svg" width="19" class="svg-type"></BImg>
</div>
@ -119,7 +115,7 @@ export default {
}
</script>
<style lang="scss">
<style lang="scss" scoped>
/* left */
.left-content-box {
width: 40%;
@ -170,4 +166,8 @@ export default {
.login-size-controller {
background-color: #212529;
}
:deep(.b-avatar.text-bg-secondary) {
background-color: transparent !important;
}
</style>

98
frontend/src/layouts/templates/CommunityTemplate.vue
View File

@ -1,7 +1,7 @@
<template>
<contribution-info>
<template #contribute>
<div show fade variant="secondary" class="text-dark">
<div class="text-dark">
<div>
<h3>{{ $t('contribution.formText.yourContribution') }}</h3>
{{ $t('contribution.formText.bringYourTalentsTo') }}
@ -13,79 +13,71 @@
</div>
</template>
<template #contributions>
<div show fade variant="secondary" class="text-dark">
<div class="text-dark">
<h4 class="alert-heading">{{ $t('community.myContributions') }}</h4>
<p>
{{ $t('contribution.alert.myContributionNoteList') }}
</p>
<ul>
<li>
<!-- <b-icon icon="bell-fill" variant="primary"></b-icon>-->
<IBiBellFill />
{{ $t('contribution.alert.pending') }}
</li>
<li>
<!-- <b-icon icon="question" variant="205"></b-icon>-->
<IBiQuestion />
{{ $t('contribution.alert.in_progress') }}
</li>
<li>
<!-- <b-icon icon="check" variant="success"></b-icon>-->
<IBiCheck />
{{ $t('contribution.alert.confirm') }}
</li>
<li>
<!-- <b-icon icon="x-circle" variant="warning"></b-icon>-->
<IBiXCircle />
{{ $t('contribution.alert.denied') }}
</li>
<li>
<!-- <b-icon icon="trash" variant="danger"></b-icon>-->
<IBiTrash />
{{ $t('contribution.alert.deleted') }}
<li v-for="descriptionData in contributionInfoDescriptions" :key="descriptionData.icon">
<variant-icon :icon="descriptionData.icon" :variant="descriptionData.variant" />
{{ descriptionData.description }}
</li>
</ul>
</div>
</template>
<template #community>
<div show fade variant="secondary" class="text-dark">
<div class="text-dark">
<h4 class="alert-heading">{{ $t('navigation.community') }}</h4>
<p>
{{ $t('contribution.alert.communityNoteList') }}
</p>
<ul>
<li>
<!-- <b-icon icon="bell-fill" variant="primary"></b-icon>-->
<IBiBellFill />
{{ $t('contribution.alert.pending') }}
</li>
<li>
<!-- <b-icon icon="question" variant="205"></b-icon>-->
<IBiQuestion />
{{ $t('contribution.alert.in_progress') }}
</li>
<li>
<!-- <b-icon icon="check" variant="success"></b-icon>-->
<IBiCheck />
{{ $t('contribution.alert.confirm') }}
</li>
<li>
<!-- <b-icon icon="x-circle" variant="warning"></b-icon>-->
<IBiXCircle />
{{ $t('contribution.alert.denied') }}
</li>
<template
v-for="descriptionData in contributionInfoDescriptions"
:key="descriptionData.icon"
>
<li v-if="descriptionData.icon !== 'trash'">
<variant-icon :icon="descriptionData.icon" :variant="descriptionData.variant" />
{{ descriptionData.description }}
</li>
</template>
</ul>
</div>
</template>
</contribution-info>
</template>
<script>
<script setup>
import ContributionInfo from '@/components/Template/RightSide/ContributionInfo.vue'
import { useI18n } from 'vue-i18n'
export default {
name: 'CommunityTemplate',
components: {
ContributionInfo,
const { t } = useI18n()
const contributionInfoDescriptions = [
{
icon: 'bell-fill',
variant: 'primary',
description: t('contribution.alert.pending'),
},
}
{
icon: 'question',
variant: '205',
description: t('contribution.alert.in_progress'),
},
{
icon: 'check',
variant: 'success',
description: t('contribution.alert.confirm'),
},
{
icon: 'x-circle',
variant: 'warning',
description: t('contribution.alert.denied'),
},
{
icon: 'trash',
variant: 'danger',
description: t('contribution.alert.deleted'),
},
]
</script>

2
frontend/src/locales/de.json
View File

@ -187,6 +187,7 @@
"gddCreationTime": "Das Feld {_field_} muss eine Zahl zwischen {min} und {max} mit höchstens einer Nachkommastelle sein",
"gddSendAmount": "Das Feld {_field_} muss eine Zahl zwischen {min} und {max} mit höchstens zwei Nachkommastellen sein",
"is-not": "Du kannst dir selbst keine Gradidos überweisen",
"requiredField": "{fieldName} ist ein Pflichtfeld",
"username-allowed-chars": "Der Nutzername darf nur aus Buchstaben (ohne Umlaute), Zahlen, Binde- oder Unterstrichen bestehen.",
"username-hyphens": "Binde- oder Unterstriche müssen zwischen Buchstaben oder Zahlen stehen.",
"username-unique": "Der Nutzername ist bereits vergeben.",
@ -221,7 +222,6 @@
"redeem": "Einlösen",
"redeemed": "Erfolgreich eingelöst! Deinem Konto wurden {n} GDD gutgeschrieben.",
"redeemed-at": "Der Link wurde bereits am {date} eingelöst.",
"redeemed-title": "eingelöst",
"redeemlink-error": "Dieser Einlöse-Link ist nicht vollständig.",
"to-login": "Log dich ein",
"to-register": "Registriere ein neues Konto.",

2
frontend/src/locales/en.json
View File

@ -187,6 +187,7 @@
"gddCreationTime": "The field {_field_} must be a number between {min} and {max} with at most one decimal place.",
"gddSendAmount": "The {_field_} field must be a number between {min} and {max} with at most two digits after the decimal point",
"is-not": "You cannot send Gradidos to yourself",
"requiredField": "The {fieldName} field is required",
"username-allowed-chars": "The username may only contain letters, numbers, hyphens or underscores.",
"username-hyphens": "Hyphens or underscores must be in between letters or numbers.",
"username-unique": "This username is already taken.",
@ -221,7 +222,6 @@
"redeem": "Redeem",
"redeemed": "Successfully redeemed! Your account has been credited with {n} GDD.",
"redeemed-at": "The link was already redeemed on {date}.",
"redeemed-title": "redeemed",
"redeemlink-error": "This redemption link is not complete.",
"to-login": "Log in",
"to-register": "Register a new account.",

1
frontend/src/locales/es.json
View File

@ -155,6 +155,7 @@
"validation": {
"gddSendAmount": "El campo {_field_} debe ser un número entre {min} y {max} con un máximo de dos decimales",
"is-not": "No es posible transferirte Gradidos a ti mismo",
"requiredField": "El campo {fieldName} es obligatorio",
"usernmae-regex": "El nombre de usuario debe comenzar con una letra seguida de al menos dos caracteres alfanuméricos.",
"usernmae-unique": "Este nombre de usuario ya está adjudicado."
},

1
frontend/src/locales/fr.json
View File

@ -161,6 +161,7 @@
"gddCreationTime": "Le champ {_field_} doit comprendre un nombre entre {min} et {max} avec un maximum de une décimale.",
"gddSendAmount": "Le champ {_field_} doit comprendre un nombre entre {min} et {max} avec un maximum de deux chiffres après la virgule",
"is-not": "Vous ne pouvez pas vous envoyer de Gradido à vous-même",
"requiredField": "Le champ {fieldName} est obligatoire",
"usernmae-regex": "Le nom d'utilisateur doit commencer par une lettre, suivi d'au moins deux caractères alphanumériques.",
"usernmae-unique": "Ce nom d'utilisateur est déjà pris."
},

1
frontend/src/locales/nl.json
View File

@ -155,6 +155,7 @@
"validation": {
"gddSendAmount": "Het veld {_field_} moet een getal tussen {min} en {max} met maximaal twee cijfers achter de komma zijn",
"is-not": "Je kunt geen Gradidos aan jezelf overmaken",
"requiredField": "{fieldName} is verplicht",
"usernmae-regex": "De gebruikersnaam moet met een letter beginnen, waarop minimaal twee alfanumerieke tekens dienen te volgen.",
"usernmae-unique": "De gebruikersnaam is al bezet."
},

1
frontend/src/locales/tr.json
View File

@ -146,6 +146,7 @@
"validation": {
"gddSendAmount": "Bu alan {_field_} {min} {max} arasında ondalık noktadan sonra en fazla iki basamaklı bir sayı olmalıdır",
"is-not": "Gradidoları kendine gönderemezsin",
"requiredField": "{fieldName} alanı zorunludur",
"usernmae-regex": "Kullanıcı adı bir harfle başlamalı, ardından en az iki alfasayısal karakter gelmelidir.",
"usernmae-unique": "Bu kullanıcı adı zaten alınmış."
},

2
frontend/src/main.js
View File

@ -52,8 +52,6 @@ app.config.globalProperties.$filters = {
loadAllRules(i18n.global, apolloProvider.defaultClient)
loadAllRules(i18n.global, apolloProvider.defaultClient)
addNavigationGuards(router, store, apolloProvider.defaultClient)
if (!store) {

2
frontend/src/pages/Circles.vue
View File

@ -10,7 +10,7 @@
</div>
<BRow class="my-5">
<BCol cols="12">
<div class="text-lg-right">
<div class="text-lg-end">
<BButton
v-if="humhubAllowed"
:href="humhubUri"

11
frontend/src/pages/Community.vue
View File

@ -31,7 +31,7 @@
:show-pagination="true"
:page-size="pageSize"
@close-all-open-collapse="closeAllOpenCollapse"
@update-list-contributions="handleUpdateListContributions"
@update-list-contributions="handleUpdateListAllContributions"
@update-contribution-form="handleUpdateContributionForm"
@delete-contribution="handleDeleteContribution"
@update-status="updateStatus"
@ -49,8 +49,8 @@
:show-pagination="true"
:page-size="pageSizeAll"
:all-contribution="true"
@update-list-contributions="updateListAllContributions"
@update-contribution-form="updateContributionForm"
@update-list-contributions="handleUpdateListAllContributions"
@update-contribution-form="handleUpdateContributionForm"
/>
</div>
</BTab>
@ -254,7 +254,10 @@ const handleDeleteContribution = async (data) => {
const handleUpdateListAllContributions = (pagination) => {
currentPageAll.value = pagination.currentPage
pageSizeAll.value = pagination.pageSize
refetchAllContributions()
refetchAllContributions({
currentPage: currentPage.value,
pageSize: pageSize.value,
})
}
const handleUpdateListContributions = (pagination) => {

351
frontend/src/pages/ResetPassword.vue
View File

@ -1,42 +1,167 @@
<template>
<div v-if="enterData" class="resetpwd-form">
<div class="pb-5">{{ $t('site.resetPassword.heading') }}</div>
<validation-observer ref="observer" v-slot="{ handleSubmit, valid }">
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<input-password-confirmation v-model="form" />
<BRow>
<BCol cols="12" lg="6">
<b-button
block
type="submit"
:variant="valid ? 'gradido' : 'gradido-disable'"
class="mt-4"
data-test="submit-new-password-btn"
:disabled="!valid"
>
<!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
{{ $t(displaySetup.button) }}
</b-button>
</BCol>
</BRow>
</b-form>
</validation-observer>
<BForm role="form" @submit.prevent="onSubmit">
<input-password-confirmation :model-value="form" register @update:modelValue="form" />
<BRow>
<BCol cols="12" lg="6">
<BButton
block
type="submit"
:variant="formMeta.valid ? 'gradido' : 'gradido-disable'"
class="mt-4"
data-test="submit-new-password-btn"
:disabled="!formMeta.valid"
>
<!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
{{ $t(displaySetup.button) }}
</BButton>
</BCol>
</BRow>
</BForm>
</div>
<div v-else>
<message
:headline="messageHeadline"
:subtitle="messageSubtitle"
:button-text="messageButtonText"
:link-to="messageButtonLinktTo"
:link-to="messageButtonLinkTo"
/>
</div>
</template>
<script>
<!--<script>-->
<!--import { setPassword } from '@/graphql/mutations'-->
<!--import { queryOptIn } from '@/graphql/queries'-->
<!--import InputPasswordConfirmation from '@/components/Inputs/InputPasswordConfirmation'-->
<!--import Message from '@/components/Message/Message'-->
<!--const textFields = {-->
<!-- reset: {-->
<!-- title: 'settings.password.change-password',-->
<!-- text: 'settings.password.reset-password.text',-->
<!-- button: 'settings.password.change-password',-->
<!-- linkTo: '/login',-->
<!-- },-->
<!-- checkEmail: {-->
<!-- title: 'settings.password.set',-->
<!-- text: 'settings.password.set-password.text',-->
<!-- button: 'settings.password.set',-->
<!-- linkTo: '/login',-->
<!-- },-->
<!--}-->
<!--export default {-->
<!-- name: 'ResetPassword',-->
<!-- components: {-->
<!-- InputPasswordConfirmation,-->
<!-- Message,-->
<!-- },-->
<!-- data() {-->
<!-- return {-->
<!-- form: {-->
<!-- password: '',-->
<!-- passwordRepeat: '',-->
<!-- },-->
<!-- displaySetup: {},-->
<!-- showPageMessage: false,-->
<!-- messageHeadline: null,-->
<!-- messageSubtitle: null,-->
<!-- messageButtonText: null,-->
<!-- messageButtonLinkTo: null,-->
<!-- }-->
<!-- },-->
<!-- computed: {-->
<!-- enterData() {-->
<!-- return !this.showPageMessage-->
<!-- },-->
<!-- },-->
<!-- created() {-->
<!-- this.$emit('set-mobile-start', false)-->
<!-- this.setDisplaySetup()-->
<!-- },-->
<!-- methods: {-->
<!-- async onSubmit() {-->
<!-- this.$apollo-->
<!-- .mutate({-->
<!-- mutation: setPassword,-->
<!-- variables: {-->
<!-- code: this.$route.params.optin,-->
<!-- password: this.form.password,-->
<!-- },-->
<!-- })-->
<!-- .then(() => {-->
<!-- this.form.password = ''-->
<!-- this.form.passwordRepeat = ''-->
<!-- this.showPageMessage = true-->
<!-- this.messageHeadline = this.$t('message.title')-->
<!-- this.messageSubtitle = this.$route.path.includes('checkEmail')-->
<!-- ? this.$t('message.checkEmail')-->
<!-- : this.$t('message.reset')-->
<!-- this.messageButtonText = this.$t('login')-->
<!-- if (this.$route.params.code) {-->
<!-- this.messageButtonLinkTo = `/login/${this.$route.params.code}`-->
<!-- } else {-->
<!-- this.messageButtonLinkTo = '/login'-->
<!-- }-->
<!-- })-->
<!-- .catch((error) => {-->
<!-- let errorMessage-->
<!-- if (-->
<!-- error.message.match(-->
<!-- /email was sent more than ([0-9]+ hours)?( and )?([0-9]+ minutes)? ago/,-->
<!-- )-->
<!-- ) {-->
<!-- errorMessage = error.message-->
<!-- } else {-->
<!-- errorMessage = error.message-->
<!-- }-->
<!-- this.showPageMessage = true-->
<!-- this.messageHeadline = this.$t('message.errorTitle')-->
<!-- this.messageSubtitle = errorMessage-->
<!-- this.messageButtonText = this.$t('settings.password.reset')-->
<!-- this.messageButtonLinkTo = '/forgot-password/resetPassword'-->
<!-- this.toastError(errorMessage)-->
<!-- })-->
<!-- },-->
<!-- checkOptInCode() {-->
<!-- this.$apollo-->
<!-- .query({-->
<!-- query: queryOptIn,-->
<!-- variables: {-->
<!-- optIn: this.$route.params.optin,-->
<!-- },-->
<!-- })-->
<!-- .then()-->
<!-- .catch((error) => {-->
<!-- this.toastError(error.message)-->
<!-- this.$router.push('/forgot-password/resetPassword')-->
<!-- })-->
<!-- },-->
<!-- setDisplaySetup() {-->
<!-- this.checkOptInCode()-->
<!-- if (this.$route.path.includes('checkEmail')) {-->
<!-- this.displaySetup = textFields.checkEmail-->
<!-- }-->
<!-- if (this.$route.path.includes('reset-password')) {-->
<!-- this.displaySetup = textFields.reset-->
<!-- }-->
<!-- },-->
<!-- },-->
<!--}-->
<!--</script>-->
<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useLazyQuery, useMutation, useQuery } from '@vue/apollo-composable'
import { setPassword } from '@/graphql/mutations'
import { queryOptIn } from '@/graphql/queries'
import InputPasswordConfirmation from '@/components/Inputs/InputPasswordConfirmation'
import Message from '@/components/Message/Message'
import InputPasswordConfirmation from '@/components/Inputs/InputPasswordConfirmation.vue'
import Message from '@/components/Message/Message.vue'
import { useAppToast } from '@/composables/useToast'
import { useForm } from 'vee-validate'
const textFields = {
reset: {
@ -53,105 +178,89 @@ const textFields = {
},
}
export default {
name: 'ResetPassword',
components: {
InputPasswordConfirmation,
Message,
},
data() {
return {
form: {
password: '',
passwordRepeat: '',
},
displaySetup: {},
showPageMessage: false,
messageHeadline: null,
messageSubtitle: null,
messageButtonText: null,
messageButtonLinktTo: null,
}
},
computed: {
enterData() {
return !this.showPageMessage
},
},
created() {
this.$emit('set-mobile-start', false)
this.setDisplaySetup()
},
methods: {
async onSubmit() {
this.$apollo
.mutate({
mutation: setPassword,
variables: {
code: this.$route.params.optin,
password: this.form.password,
},
})
.then(() => {
this.form.password = ''
this.form.passwordRepeat = ''
const router = useRouter()
const route = useRoute()
const { t } = useI18n()
this.showPageMessage = true
this.messageHeadline = this.$t('message.title')
this.messageSubtitle = this.$route.path.includes('checkEmail')
? this.$t('message.checkEmail')
: this.$t('message.reset')
this.messageButtonText = this.$t('login')
if (this.$route.params.code) {
this.messageButtonLinktTo = `/login/${this.$route.params.code}`
} else {
this.messageButtonLinktTo = '/login'
}
})
.catch((error) => {
let errorMessage
if (
error.message.match(
/email was sent more than ([0-9]+ hours)?( and )?([0-9]+ minutes)? ago/,
)
) {
errorMessage = error.message
} else {
errorMessage = error.message
}
this.showPageMessage = true
this.messageHeadline = this.$t('message.errorTitle')
this.messageSubtitle = errorMessage
this.messageButtonText = this.$t('settings.password.reset')
this.messageButtonLinktTo = '/forgot-password/resetPassword'
this.toastError(errorMessage)
})
},
checkOptInCode() {
this.$apollo
.query({
query: queryOptIn,
variables: {
optIn: this.$route.params.optin,
},
})
.then()
.catch((error) => {
this.toastError(error.message)
this.$router.push('/forgot-password/resetPassword')
})
},
setDisplaySetup() {
this.checkOptInCode()
if (this.$route.path.includes('checkEmail')) {
this.displaySetup = textFields.checkEmail
}
if (this.$route.path.includes('reset-password')) {
this.displaySetup = textFields.reset
}
},
},
const form = ref({
password: '',
passwordRepeat: '',
})
const displaySetup = ref({})
const showPageMessage = ref(false)
const messageHeadline = ref(null)
const messageSubtitle = ref(null)
const messageButtonText = ref(null)
const messageButtonLinkTo = ref(null)
const enterData = computed(() => !showPageMessage.value)
const emit = defineEmits(['set-mobile-start'])
const { mutate: setPasswordMutation } = useMutation(setPassword)
const { load: queryOptInQuery } = useLazyQuery(queryOptIn)
const { toastError } = useAppToast()
const { meta: formMeta, values: formValues, setFieldValue } = useForm()
const onSubmit = async () => {
try {
await setPasswordMutation({
code: route.params.optin,
password: formValues.newPassword,
})
setFieldValue('newPassword', '')
setFieldValue('newPasswordRepeat', '')
showPageMessage.value = true
messageHeadline.value = t('message.title')
messageSubtitle.value = route.path.includes('checkEmail')
? t('message.checkEmail')
: t('message.reset')
messageButtonText.value = t('login')
messageButtonLinkTo.value = route.params.code ? `/login/${route.params.code}` : '/login'
} catch (error) {
const errorMessage = error.message.match(
/email was sent more than ([0-9]+ hours)?( and )?([0-9]+ minutes)? ago/,
)
? error.message
: error.message
showPageMessage.value = true
messageHeadline.value = t('message.errorTitle')
messageSubtitle.value = errorMessage
messageButtonText.value = t('settings.password.reset')
messageButtonLinkTo.value = '/forgot-password/resetPassword'
toastError(errorMessage)
}
}
const checkOptInCode = async () => {
try {
await queryOptInQuery(queryOptIn, {
optIn: route.params.optin,
})
} catch (error) {
toastError(error.message)
await router.push('/forgot-password/resetPassword')
}
}
const setDisplaySetup = () => {
checkOptInCode()
if (route.path.includes('checkEmail')) {
displaySetup.value = textFields.checkEmail
}
if (route.path.includes('reset-password')) {
displaySetup.value = textFields.reset
}
}
emit('set-mobile-start', false)
setDisplaySetup()
</script>
<style scoped>
.btn-gradido {

12
frontend/src/pages/Settings.vue
View File

@ -56,7 +56,7 @@
<hr />
<BRow>
<BCol cols="12" md="6" lg="6">{{ $t('language') }}</BCol>
<BCol cols="12" md="6" lg="6" class="text-right">
<BCol cols="12" md="6" lg="6" class="text-end">
<user-language />
</BCol>
</BRow>
@ -76,7 +76,7 @@
}}
</div>
</BCol>
<BCol cols="12" md="6" lg="6" class="text-right">
<BCol cols="12" md="6" lg="6" class="text-end">
<user-newsletter />
</BCol>
</BRow>
@ -89,7 +89,7 @@
<BCol cols="12" md="6" lg="6">
<div class="h3">{{ $t('Humhub.title') }}</div>
</BCol>
<BCol cols="12" md="6" lg="6" class="text-right">
<BCol cols="12" md="6" lg="6" class="text-end">
<user-settings-switch
:initial-value="$store.state.humhubAllowed"
:attr-name="'humhubAllowed'"
@ -120,7 +120,7 @@
<BCol cols="12" md="6" lg="6">
<div class="h3">{{ $t('GMS.title') }}</div>
</BCol>
<BCol cols="12" md="6" lg="6" class="text-right">
<BCol cols="12" md="6" lg="6" class="text-end">
<user-settings-switch
:initial-value="$store.state.gmsAllowed"
:attr-name="'gmsAllowed'"
@ -167,7 +167,7 @@
<BCol cols="12" md="6" lg="6">
<div class="h3 text-muted">{{ $t('GMS.title') }}</div>
</BCol>
<BCol cols="12" md="6" lg="6" class="text-right">
<BCol cols="12" md="6" lg="6" class="text-end">
<user-settings-switch :disabled="true" />
</BCol>
</BRow>
@ -179,7 +179,7 @@
<!-- TODO<BRow>
<BCol cols="12" md="6" lg="6">{{ $t('settings.darkMode') }}</BCol>
<BCol cols="12" md="6" lg="6" class="text-right">
<BCol cols="12" md="6" lg="6" class="text-end">
<BForm-checkbox v-model="darkMode" name="dark-mode" switch aligne></BForm-checkbox>
</BCol>
</BRow> -->

2
frontend/src/pages/UserSearch.vue
View File

@ -10,7 +10,7 @@
</div>
<BRow class="my-5">
<BCol cols="12">
<div class="text-lg-right">
<div class="text-lg-end">
<b-button variant="gradido" :href="gmsUri" target="_blank">
{{ $t('usersearch.button') }}
</b-button>

26
frontend/src/validation-rules.js
View File

@ -9,6 +9,7 @@ import es from '@vee-validate/i18n/dist/locale/es.json'
import fr from '@vee-validate/i18n/dist/locale/fr.json'
import nl from '@vee-validate/i18n/dist/locale/nl.json'
import tr from '@vee-validate/i18n/dist/locale/tr.json'
import { useI18n } from 'vue-i18n'
// Email and username regex patterns remain the same
const EMAIL_REGEX =
@ -17,14 +18,23 @@ const USERNAME_REGEX = /^(?=.{3,20}$)[a-zA-Z0-9]+(?:[_-][a-zA-Z0-9]+?)*$/
export const loadAllRules = (i18nCallback, apollo) => {
configure({
generateMessage: localize({
en,
de,
es,
fr,
nl,
tr,
}),
generateMessage: (context) => {
const { t } = i18nCallback || useI18n()
const translationKey = `form.${context.name}`
if (context.rule.name === 'required') {
// eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys
return t('form.validation.requiredField', { fieldName: t(translationKey) })
}
return localize({
en,
de,
es,
fr,
nl,
tr,
})(context)
},
validateOnBlur: true,
validateOnChange: true,
validateOnInput: false,

1
frontend/vite.config.js
View File

@ -73,6 +73,7 @@ export default defineConfig({
commonjs(),
],
css: {
extract: true,
preprocessorOptions: {
scss: {
additionalData: `@import "@/assets/scss/gradido.scss";`,