mirror of
https://github.com/YunoHost/yunohost-portal.git
synced 2024-09-03 20:06:23 +02:00
add skip link
This commit is contained in:
axolotle
parent
2e90b14d0a
commit
ec02765545
7 changed files with 140 additions and 94 deletions
13
components/PageTitle.vue
Normal file
13
components/PageTitle.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
text?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h2 id="main-target" tabindex="-1" class="text-4xl font-bold mb-3">
|
||||
<slot name="default">
|
||||
{{ text }}
|
||||
</slot>
|
||||
</h2>
|
||||
</template>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
const { t } = useI18n()
|
||||
const isLoggedIn = useIsLoggedIn()
|
||||
const { userData: me } = await useUserInfo()
|
||||
|
||||
const skipLink: Ref<HTMLLinkElement | null> = ref(null)
|
||||
const colorMode = useColorMode()
|
||||
const themes = [
|
||||
'system',
|
||||
|
|
@ -68,6 +68,16 @@ async function logout() {
|
|||
<template>
|
||||
<div class="container mx-auto p-10 min-h-screen flex flex-col">
|
||||
<header class="py-10">
|
||||
<div class="h-10 -mt-10">
|
||||
<a
|
||||
id="skip-link"
|
||||
ref="skipLink"
|
||||
class="link sr-only focus:not-sr-only"
|
||||
href="#main-target"
|
||||
>{{ $t('skip_to_main_content') }}</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<slot name="header">
|
||||
<div class="flex flex-row flex-wrap items-center min-w-full">
|
||||
<NuxtLink to="/">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"app_list": "App list",
|
||||
"back_to_apps": "Go back to app list",
|
||||
"portal": "YunoHost Portal",
|
||||
"information": "Your info",
|
||||
|
|
@ -50,5 +51,6 @@
|
|||
"footerlink_edit": "Edit my profile",
|
||||
"footerlink_documentation": "Documentation",
|
||||
"footerlink_support": "Support",
|
||||
"footerlink_administration": "Administration"
|
||||
"footerlink_administration": "Administration",
|
||||
"skip_to_main_content": "Skip to main content",
|
||||
}
|
||||
|
|
|
|||
8
middleware/a11y.global.ts
Normal file
8
middleware/a11y.global.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
export default defineNuxtRouteMiddleware((to) => {
|
||||
if (!to.hash) {
|
||||
// Auto select skip link on route change
|
||||
nextTick(() => {
|
||||
document.getElementById('skip-link')?.focus()
|
||||
})
|
||||
}
|
||||
})
|
||||
103
pages/edit.vue
103
pages/edit.vue
|
|
@ -42,58 +42,65 @@ const onSubmit = handleSubmit(async (form) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<!-- {{ initialValues }} -->
|
||||
<form novalidate @submit="onSubmit">
|
||||
<div class="flex justify-between">
|
||||
<div class="w-1/3">
|
||||
<FormField name="username" :label="$t('username')" class="mb-3">
|
||||
<TextInput
|
||||
name="username"
|
||||
type="text"
|
||||
:placeholder="$t('username')"
|
||||
disabled
|
||||
class="w-full"
|
||||
/>
|
||||
</FormField>
|
||||
<div>
|
||||
<PageTitle :text="$t('footerlink_edit')" />
|
||||
|
||||
<FormField name="fullname" :label="$t('fullname')">
|
||||
<TextInput
|
||||
name="fullname"
|
||||
type="text"
|
||||
:placeholder="$t('fullname')"
|
||||
autocomplete="name"
|
||||
class="w-full"
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
<form novalidate class="my-10" @submit="onSubmit">
|
||||
<div class="sm:flex sm:justify-between">
|
||||
<div class="sm:w-1/3">
|
||||
<FormField name="username" :label="$t('username')" class="mb-3">
|
||||
<TextInput
|
||||
name="username"
|
||||
type="text"
|
||||
:placeholder="$t('username')"
|
||||
disabled
|
||||
class="w-full"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<div class="basis-1/2">
|
||||
<FormField name="mailalias" :label="$t('mail_addresses')" class="mb-10">
|
||||
<TextInputList
|
||||
<FormField name="fullname" :label="$t('fullname')">
|
||||
<TextInput
|
||||
name="fullname"
|
||||
type="text"
|
||||
:placeholder="$t('fullname')"
|
||||
autocomplete="name"
|
||||
class="w-full"
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
<div class="basis-1/2 mt-10 sm:mt-0">
|
||||
<FormField
|
||||
name="mailalias"
|
||||
type="text"
|
||||
:placeholder="$t('new_mail')"
|
||||
/>
|
||||
</FormField>
|
||||
:label="$t('mail_addresses')"
|
||||
class="mb-10"
|
||||
>
|
||||
<TextInputList
|
||||
name="mailalias"
|
||||
type="text"
|
||||
:placeholder="$t('new_mail')"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField name="mailforward" :label="$t('mail_forward')">
|
||||
<TextInputList
|
||||
name="mailforward"
|
||||
type="text"
|
||||
:placeholder="$t('new_forward')"
|
||||
/>
|
||||
</FormField>
|
||||
<FormField name="mailforward" :label="$t('mail_forward')">
|
||||
<TextInputList
|
||||
name="mailforward"
|
||||
type="text"
|
||||
:placeholder="$t('new_forward')"
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex mt-10">
|
||||
<NuxtLink to="/password" class="btn btn-primary">
|
||||
{{ $t('change_password') }}
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/" class="btn ml-auto mr-2">
|
||||
{{ $t('cancel') }}
|
||||
</NuxtLink>
|
||||
<YButton :text="$t('ok')" type="submit" variant="success" />
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex mt-10">
|
||||
<NuxtLink to="/password" class="btn btn-primary">
|
||||
{{ $t('change_password') }}
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/" class="btn ml-auto mr-2">
|
||||
{{ $t('cancel') }}
|
||||
</NuxtLink>
|
||||
<YButton :text="$t('save')" type="submit" variant="success" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const me = computed(() => {
|
|||
// ['bg-purple-500', 'text-purple-100'],
|
||||
// ['bg-rose-500', 'text-rose-100'],
|
||||
]
|
||||
if (!userData.value) return
|
||||
|
||||
return {
|
||||
...userData.value,
|
||||
apps: Object.entries(userData.value.apps).map(([id, app]) => {
|
||||
|
|
@ -41,8 +41,10 @@ const me = computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="me">
|
||||
<div id="apps" class="py-10">
|
||||
<div>
|
||||
<PageTitle :text="$t('app_list')" />
|
||||
|
||||
<div id="apps" class="my-10">
|
||||
<div v-if="!me.apps.length" class="w-2/3">
|
||||
<em>{{ t('no_apps') }}</em>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,51 +31,55 @@ const onSubmit = handleSubmit(async (form) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<form novalidate @submit="onSubmit">
|
||||
<!-- FIXME replace with accessible component -->
|
||||
<div role="alert" class="alert alert-warning mb-10">
|
||||
<Icon name="mdi:warning-outline" size="2em" />
|
||||
{{ $t('good_practices_about_user_password') }}
|
||||
</div>
|
||||
<div>
|
||||
<PageTitle :text="$t('change_password')" />
|
||||
|
||||
<div class="md:flex">
|
||||
<div class="basis-1/2 mb-10 md:mr-10">
|
||||
<FormField name="current" :label="$t('current_password')">
|
||||
<TextInput
|
||||
name="current"
|
||||
type="password"
|
||||
autocomplete="currrent-password"
|
||||
class="w-full"
|
||||
/>
|
||||
</FormField>
|
||||
<form novalidate class="my-10" @submit="onSubmit">
|
||||
<!-- FIXME replace with accessible component -->
|
||||
<div role="alert" class="alert alert-warning mb-10">
|
||||
<Icon name="mdi:warning-outline" size="2em" />
|
||||
{{ $t('good_practices_about_user_password') }}
|
||||
</div>
|
||||
|
||||
<div class="basis-1/2 md:ml-10">
|
||||
<FormField name="password" :label="$t('new_password')" class="mb-3">
|
||||
<TextInput
|
||||
name="password"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
class="w-full"
|
||||
/>
|
||||
</FormField>
|
||||
<div class="md:flex">
|
||||
<div class="basis-1/2 mb-10 md:mr-10">
|
||||
<FormField name="current" :label="$t('current_password')">
|
||||
<TextInput
|
||||
name="current"
|
||||
type="password"
|
||||
autocomplete="currrent-password"
|
||||
class="w-full"
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
<FormField name="confirmPassword" :label="$t('confirm_new_password')">
|
||||
<TextInput
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
class="w-full"
|
||||
/>
|
||||
</FormField>
|
||||
<div class="basis-1/2 md:ml-10">
|
||||
<FormField name="password" :label="$t('new_password')" class="mb-3">
|
||||
<TextInput
|
||||
name="password"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
class="w-full"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField name="confirmPassword" :label="$t('confirm_new_password')">
|
||||
<TextInput
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
class="w-full"
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex mt-10">
|
||||
<NuxtLink to="/" class="btn ml-auto mr-2">
|
||||
{{ $t('cancel') }}
|
||||
</NuxtLink>
|
||||
<YButton :text="$t('ok')" type="submit" variant="success" />
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex mt-10">
|
||||
<NuxtLink to="/" class="btn ml-auto mr-2">
|
||||
{{ $t('cancel') }}
|
||||
</NuxtLink>
|
||||
<YButton :text="$t('ok')" type="submit" variant="success" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in a new issue