Untitled
unknown
html
2 years ago
2.6 kB
9
Indexable
<script setup lang="ts"> import { api } from 'src/boot/axios'; import { ref } from 'vue'; const password = ref(''); const username = ref(''); const loginShite = async () => { let res = await api.post('https://nocturna.ngrok.dev/api/auth/register', { username: username.value, password: password.value, }); console.log(res); }; </script> <template> <h1 class="text-center">Login</h1> <q-page class="column items-center justify-evenly"> <div class="md:flex md:items-center q-pa-xl bg-dark" id="wrapper"> <form class="w-full max-w-sm"> <div class="md:flex md:items-center mb-6"> <div class="md:w-2/3"> <q-input v-model="username" class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" label="Username" /> </div> </div> <div class="md:flex md:items-center mb-6"> <div class="md:w-2/3"> <q-input v-model="password" class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-password" type="password" label="Password" /> </div> </div> <div class="md:flex md:items-center"> <br /> <div class="md:w-1/3"></div> <div class="md:w-2/3"> <button class="shadow bg-positive hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button" @click="loginShite" > Log in </button> </div> </div> </form> </div> </q-page> </template> <style lang="scss" scoped> #wrapper { border: 4px solid $dark-page; box-shadow: 20px 22px 4.3px 0px rgba(0, 0, 0, 0.25) inset; filter: drop-shadow(33px 29px 4.300000190734863px rgba(0, 0, 0, 0.52)); } h1 { background-image: url('../assets/banners/main/banner-main.svg'); background-repeat: no-repeat; background-position: center; color: $dark; margin-top: 20px; height: 125px; width: 427px; font-size: 4.5rem; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; } </style>
Editor is loading...
Leave a Comment