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"
},
"dependencies": {
"@vee-validate/yup": "^4.10.8",
"vee-validate": "^4.10.8"
}
}

105
pages/login.vue
View file

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