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"
} }
} }

105
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" /> <BaseForm :schema="schema" @submit="login">
</label> <FormField
</div> name="username"
<div class=""> :label="t('username')"
<input icon="mdi:account-circle"
id="login-username" class="mb-4"
v-model="form.username" >
class="text-gray-700 rounded py-2 px-4" <TextInput name="username" type="text" :placeholder="t('username')" />
type="text" </FormField>
placeholder="username"
/> <FormField
</div> name="password"
</div> :label="t('password')"
<div class="flex items-center mb-6"> icon="mdi:lock"
<div class="w-1/6"> class="mb-4"
<label class="pl-3" for="login-password"> >
<Icon name="mdi:lock" size="2em" class="text-gray-400" /> <TextInput
</label> name="password"
</div> type="password"
<div class=""> :placeholder="t('password')"
<input />
id="login-password" </FormField>
v-model="form.password"
class="text-gray-700 rounded py-2 px-4" <YButton type="submit" block>
type="password" {{ t('login') }}
placeholder="******************" </YButton>
/> </BaseForm>
</div> </main>
</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
</button>
</div>
</div>
</form>
</div>
</template> </template>
<style>
#__nuxt {
@apply min-h-screen flex;
}
</style>