77 lines
2.0 KiB
Vue
77 lines
2.0 KiB
Vue
<template>
|
|
<q-layout>
|
|
<q-page-container>
|
|
<q-page class="flex bg-image flex-center">
|
|
<q-card
|
|
v-bind:style="$q.screen.lt.sm ? { width: '80%' } : { width: '30%' }"
|
|
>
|
|
<q-card-section>
|
|
<q-img fit="scale-down" src="~assets/oysqn_logo.png" />
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<div class="text-center q-pt-sm">
|
|
<div class="col text-h6">Log in</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<q-form class="q-gutter-md">
|
|
<q-input
|
|
v-model="email"
|
|
label="E-Mail"
|
|
type="email"
|
|
color="darkblue"
|
|
filled
|
|
></q-input>
|
|
<q-input
|
|
v-model="password"
|
|
label="Password"
|
|
type="password"
|
|
color="darkblue"
|
|
filled
|
|
></q-input>
|
|
<q-btn
|
|
type="submit"
|
|
@click="login($router, email, password)"
|
|
label="Login"
|
|
color="primary"
|
|
></q-btn>
|
|
<!-- <q-btn
|
|
type="button"
|
|
@click="register"
|
|
color="secondary"
|
|
label="Register"
|
|
flat
|
|
></q-btn> -->
|
|
</q-form>
|
|
</q-card-section>
|
|
<q-card-section><GoogleOauthComponent /></q-card-section>
|
|
</q-card>
|
|
</q-page>
|
|
</q-page-container>
|
|
</q-layout>
|
|
</template>
|
|
|
|
<style>
|
|
.bg-image {
|
|
background-image: url('/src/assets/oys_lighthouse.jpg');
|
|
background-repeat: no-repeat;
|
|
background-position-x: center;
|
|
background-size: cover;
|
|
/* background-image: linear-gradient(
|
|
135deg,
|
|
#ed232a 0%,
|
|
#ffffff 75%,
|
|
#14539a 100%
|
|
); */
|
|
}
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { login } from 'boot/appwrite';
|
|
import GoogleOauthComponent from 'src/components/GoogleOauthComponent.vue';
|
|
|
|
const email = ref('');
|
|
const password = ref('');
|
|
</script>
|