potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

fix(apps): Show message when the user doesn't have approved apps yet

Browse source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2023-04-05 09:28:23 +02:00
parent d881703386
commit e0ee9c143b
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
2 changed files with 52 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
js/src/components/core/MaterialIcon.vue
View file

@ -258,6 +258,8 @@ const icons: Record<string, () => Promise<any>> = {
import(`../../../node_modules/vue-material-design-icons/EyeOutline.vue`),
PencilOutline: () =>
import(`../../../node_modules/vue-material-design-icons/PencilOutline.vue`),
Apps: () =>
import(`../../../node_modules/vue-material-design-icons/Apps.vue`),
};
const props = withDefaults(

92
js/src/views/Settings/AppsView.vue
View file

@ -21,49 +21,56 @@
)
}}
</p>
<div
class="flex justify-between items-center rounded-lg bg-white shadow-xl my-6"
v-for="authAuthorizedApplication in authAuthorizedApplications"
:key="authAuthorizedApplication.id"
>
<div class="p-4">
<p class="text-3xl font-bold">
{{ authAuthorizedApplication.application.name }}
</p>
<a
v-if="authAuthorizedApplication.application.website"
target="_blank"
:href="authAuthorizedApplication.application.website"
>{{
urlToHostname(authAuthorizedApplication.application.website)
}}</a
>
<p>
<span v-if="authAuthorizedApplication.lastUsedAt">{{
t("Last used on {last_used_date}", {
last_used_date: formatDateString(
authAuthorizedApplication.lastUsedAt
),
})
}}</span>
<span v-else>{{ t("Never used") }}</span> ⋅
{{
t("Authorized on {authorization_date}", {
authorization_date: formatDateString(
authAuthorizedApplication.insertedAt
),
})
}}
</p>
</div>
<div class="p-4">
<o-button
@click="() => revoke({ appTokenId: authAuthorizedApplication.id })"
variant="danger"
>{{ t("Revoke") }}</o-button
>
<div v-if="authAuthorizedApplications.length > 0">
<div
class="flex justify-between items-center rounded-lg bg-white shadow-xl my-6"
v-for="authAuthorizedApplication in authAuthorizedApplications"
:key="authAuthorizedApplication.id"
>
<div class="p-4">
<p class="text-3xl font-bold">
{{ authAuthorizedApplication.application.name }}
</p>
<a
v-if="authAuthorizedApplication.application.website"
target="_blank"
:href="authAuthorizedApplication.application.website"
>{{
urlToHostname(authAuthorizedApplication.application.website)
}}</a
>
<p>
<span v-if="authAuthorizedApplication.lastUsedAt">{{
t("Last used on {last_used_date}", {
last_used_date: formatDateString(
authAuthorizedApplication.lastUsedAt
),
})
}}</span>
<span v-else>{{ t("Never used") }}</span> ⋅
{{
t("Authorized on {authorization_date}", {
authorization_date: formatDateString(
authAuthorizedApplication.insertedAt
),
})
}}
</p>
</div>
<div class="p-4">
<o-button
@click="
() => revoke({ appTokenId: authAuthorizedApplication.id })
"
variant="danger"
>{{ t("Revoke") }}</o-button
>
</div>
</div>
</div>
<EmptyContent v-else icon="apps" inline>
{{ t("No apps authorized yet") }}
</EmptyContent>
</section>
</div>
</template>
@ -82,6 +89,7 @@ import RouteName from "../../router/name";
import { IUser } from "@/types/current-user.model";
import { formatDateString } from "@/filters/datetime";
import { Notifier } from "@/plugins/notifier";
import EmptyContent from "@/components/Utils/EmptyContent.vue";
const { t } = useI18n({ useScope: "global" });
@ -94,7 +102,7 @@ const { result: authAuthorizedApplicationsResult } = useQuery<{
const authAuthorizedApplications = computed(
() =>
authAuthorizedApplicationsResult.value?.loggedUser
?.authAuthorizedApplications
?.authAuthorizedApplications ?? []
);
const urlToHostname = (url: string | undefined): string | null => {