change login page layout and style

This commit is contained in:
wh1te909 2020-01-05 21:48:43 +00:00
parent 927ff21b6d
commit 324a6a44e5
1 changed files with 48 additions and 56 deletions

View File

@ -1,65 +1,57 @@
<template> <template>
<q-layout view="lHh Lpr lFf" class="bg-grey-9 text-white"> <div class="q-pa-md">
<div class="window-height window-width row justify-center items-center"> <div class="row text-center">
<div class="col"></div> <div class="col"></div>
<div class="col-3"> <div class="col">
<q-card dark class="bg-grey-9 shadow-10"> <h5>Tactical Techs RMM</h5>
<q-card-section class="text-center text-h5">Tactical Techs RMM</q-card-section> <q-form @submit.prevent="prompt = true" class="q-gutter-md">
<q-card-section> <q-input
<q-form @submit.prevent="prompt = true" class="q-gutter-md"> outlined
<q-input v-model="credentials.username"
dark label="Username"
outlined lazy-rules
v-model="credentials.username" :rules="[ val => val && val.length > 0 || 'This field is required']"
label="Username" />
lazy-rules
:rules="[ val => val && val.length > 0 || 'This field is required']"
/>
<q-input <q-input
dark outlined
outlined type="password"
type="password" v-model="credentials.password"
v-model="credentials.password" label="Password"
label="Password" lazy-rules
lazy-rules :rules="[ val => val && val.length > 0 || 'This field is required']"
:rules="[ val => val && val.length > 0 || 'This field is required']" />
/>
<div> <div>
<q-btn label="Login" type="submit" color="primary" class="full-width q-mt-md" /> <q-btn label="Login" type="submit" color="primary" class="full-width q-mt-md" />
</div> </div>
</q-form> </q-form>
</q-card-section>
</q-card>
</div> </div>
<div class="col"></div> <div class="col"></div>
<q-dialog v-model="prompt">
<q-card dark class="bg-grey-9" style="min-width: 400px">
<q-form @submit.prevent="onSubmit">
<q-card-section class="text-center text-h5">
Google Authenticator code
</q-card-section>
<q-card-section>
<q-input
dark
autofocus
outlined
v-model="credentials.twofactor"
:rules="[ val => val && val.length > 0 || 'This field is required']"
/>
</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn flat label="Cancel" v-close-popup />
<q-btn flat label="Submit" type="submit" />
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</div> </div>
</q-layout> <!-- 2 factor modal -->
<q-dialog v-model="prompt">
<q-card style="min-width: 400px">
<q-form @submit.prevent="onSubmit">
<q-card-section class="text-center text-h5">Google Authenticator code</q-card-section>
<q-card-section>
<q-input
autofocus
outlined
v-model="credentials.twofactor"
:rules="[ val => val && val.length > 0 || 'This field is required']"
/>
</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn flat label="Cancel" v-close-popup />
<q-btn flat label="Submit" type="submit" />
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</div>
</template> </template>
<script> <script>