YunoHost/yunohost-portal
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-portal.git synced 2024-09-03 20:06:23 +02:00
Code Issues Projects Releases Packages Wiki Activity

update Login view with form components

Browse source
This commit is contained in:
axolotle 2023-07-25 19:24:10 +02:00
parent c281a579e3
commit ccbcab1bf3
2 changed files with 54 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -30,6 +30,7 @@
"typescript": "^5.1.6" "typescript": "^5.1.6"
}, },
"dependencies": { "dependencies": {
"@vee-validate/yup": "^4.10.8",
"vee-validate": "^4.10.8" "vee-validate": "^4.10.8"
} }
} }

101
pages/login.vue
View file

@ -1,12 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import * as yup from 'yup'
definePageMeta({
layout: false,
})
const isLoggedIn = useIsLoggedIn() const isLoggedIn = useIsLoggedIn()
const form = { const { t } = useI18n()
username: '',
password: '',
}
async function login() { async function login(form) {
const { error } = await useApi('/login', { const { error } = await useApi('/login', {
method: 'POST', method: 'POST',
body: { credentials: form.username + ':' + form.password }, body: { credentials: form.username + ':' + form.password },
@ -19,54 +22,52 @@ async function login() {
// FIXME : display an error or something // FIXME : display an error or something
} }
} }
const schema = {
username: yup.string().required(),
password: yup.string().required(),
}
</script> </script>
<template> <template>
<div class="w-80 mx-auto pt-20"> <main class="w-50 m-auto">
<img class="flex-none mx-auto w-1/2 p-5" src="/assets/img/logo-white.svg" /> <img
<form method="POST" @submit.prevent="login"> class="flex-none mx-auto w-1/2 mb-10"
<div class="flex items-center mb-6"> src="/assets/img/logo-white.svg"
<div class="w-1/6">
<label class="pl-3" for="login-username">
<Icon name="mdi:account-circle" size="2em" class="text-gray-400" />
</label>
</div>
<div class="">
<input
id="login-username"
v-model="form.username"
class="text-gray-700 rounded py-2 px-4"
type="text"
placeholder="username"
/> />
</div>
</div> <BaseForm :schema="schema" @submit="login">
<div class="flex items-center mb-6"> <FormField
<div class="w-1/6"> name="username"
<label class="pl-3" for="login-password"> :label="t('username')"
<Icon name="mdi:lock" size="2em" class="text-gray-400" /> icon="mdi:account-circle"
</label> class="mb-4"
</div>
<div class="">
<input
id="login-password"
v-model="form.password"
class="text-gray-700 rounded py-2 px-4"
type="password"
placeholder="******************"
/>
</div>
</div>
<div class="flex items-center">
<div class="w-full">
<button
class="w-full bg-indigo-500 hover:bg-indigo-400 font-bold py-2 px-4 rounded"
type="submit"
> >
Connect <TextInput name="username" type="text" :placeholder="t('username')" />
</button> </FormField>
</div>
</div> <FormField
</form> name="password"
</div> :label="t('password')"
icon="mdi:lock"
class="mb-4"
>
<TextInput
name="password"
type="password"
:placeholder="t('password')"
/>
</FormField>
<YButton type="submit" block>
{{ t('login') }}
</YButton>
</BaseForm>
</main>
</template> </template>
<style>
#__nuxt {
@apply min-h-screen flex;
}
</style>