69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
async setup() {
|
|
definePageMeta({
|
|
middleware: ['authenticate'],
|
|
});
|
|
|
|
const credentials = useState(() => ({
|
|
identifier: '',
|
|
password: '',
|
|
}));
|
|
|
|
const onSubmit = async (event:Event) => {
|
|
event.preventDefault();
|
|
|
|
const { data, error } = await useAsyncGql('login', credentials.value);
|
|
|
|
const { setMe } = useMe();
|
|
if (error.value) {
|
|
console.error('Failed to log in!');
|
|
console.error('error:', error.value);
|
|
console.error('data:', data.value);
|
|
setMe(null);
|
|
return;
|
|
}
|
|
|
|
useGqlToken({
|
|
token: data.value?.login?.jwt || null,
|
|
config: { type: 'Bearer' },
|
|
});
|
|
setMe(data.value?.login?.user || null);
|
|
navigateTo('/');
|
|
|
|
};
|
|
|
|
return () => (<div class="sbcms-admin">
|
|
<form
|
|
onSubmit={onSubmit}
|
|
>
|
|
<h1>Login</h1>
|
|
<label>
|
|
Username
|
|
<input
|
|
type="text"
|
|
value={credentials.value.identifier}
|
|
onChange={(event: Event) => {
|
|
credentials.value.identifier = (event.currentTarget as HTMLInputElement).value;
|
|
}}
|
|
/>
|
|
</label>
|
|
<label>
|
|
Password
|
|
<input
|
|
type="password"
|
|
value={credentials.value.password}
|
|
onChange={(event: Event) => {
|
|
credentials.value.password = (event.currentTarget as HTMLInputElement).value;
|
|
}}
|
|
/>
|
|
</label>
|
|
<button
|
|
type="submit"
|
|
>Log in</button>
|
|
</form>
|
|
</div>);
|
|
},
|
|
});
|