Feature/update login UI (#716)

* cleanup signin UI

* add timeout

Co-authored-by: Hayden <hay-kot@pm.me>
This commit is contained in:
Hayden 2021-10-02 12:18:01 -08:00 committed by GitHub
parent 4bdba9f3af
commit bd8882ec44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 26 deletions

View File

@ -8,8 +8,10 @@ RUN yarn install \
--prefer-offline \
--frozen-lockfile \
--non-interactive \
--production=false
--production=false \
# https://github.com/docker/build-push-action/issues/471
--network-timeout 1000000
RUN yarn build
RUN rm -rf node_modules && \

View File

@ -1,30 +1,25 @@
<template>
<v-footer color="primary lighten-1" padless app>
<v-footer color="primary" padless app>
<v-row justify="center" align="center" dense no-gutters>
<v-col class="primary py-2 text-center white--text" cols="12">
<v-btn dark icon href="https://github.com/hay-kot/mealie" target="_blank">
<v-col class="py-2 text-center white--text" cols="12">
<v-btn color="white" icon href="https://github.com/hay-kot/mealie" target="_blank">
<v-icon>
{{ $globals.icons.github }}
</v-icon>
</v-btn>
{{ new Date().getFullYear() }} <strong>Mealie</strong>
{{ new Date().getFullYear() }} <strong> Mealie </strong>
</v-col>
</v-row>
</v-footer>
</template>
<script lang="ts">
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api";
export default defineComponent({
setup() {
return {};
},
data: () => ({
links: ["Home", "About Us", "Team", "Services", "Blog", "Contact Us"],
}),
});
</script>
<style scoped>
</style>

View File

@ -1,8 +1,6 @@
<template>
<v-app dark>
<TheSnackbar />
<AppHeader :menu="false"> </AppHeader>
<v-main>
<v-scroll-x-transition>
<Nuxt />
@ -16,11 +14,10 @@
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api";
import AppFooter from "@/components/Layout/AppFooter.vue";
import AppHeader from "@/components/Layout/AppHeader.vue";
import TheSnackbar from "~/components/Layout/TheSnackbar.vue";
export default defineComponent({
components: { AppHeader, AppFooter, TheSnackbar },
components: { AppFooter, TheSnackbar },
setup() {
return {};
},

View File

@ -1,12 +1,13 @@
<template>
<v-container fill-height fluid class="d-flex justify-center align-start">
<v-card color="background d-flex flex-column align-center " flat width="600px">
<v-container fill-height fluid class="d-flex justify-center align-center">
<v-card color="background d-flex flex-column align-center" flat width="600px">
<svg
id="bbc88faa-5a3b-49cf-bdbb-6c9ab11be594"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 728 754.88525"
style="max-height: 300px"
style="max-height: 200px"
class="mt-2"
>
<rect
x="514.67011"
@ -147,7 +148,7 @@
<ellipse cx="659.69176" cy="616.02594" rx="2.00365" ry="1.00183" fill="#e6e6e6" />
<ellipse cx="664.42232" cy="619.57385" rx="2.00365" ry="1.00183" fill="#e6e6e6" />
</svg>
<v-card-title class="headline justify-center"> Mealie Login </v-card-title>
<v-card-title class="headline justify-center"> Sign In To Mealie </v-card-title>
<BaseDivider />
<v-card-text>
<v-form @submit.prevent="authenticate()">
@ -157,7 +158,6 @@
rounded
autofocus
class="rounded-lg"
prepend-icon="mdi-account"
name="login"
label="Email or Username"
type="text"
@ -168,17 +168,21 @@
filled
rounded
class="rounded-lg"
prepend-icon="mdi-lock"
name="password"
label="Password"
type="password"
/>
<v-btn :loading="loggingIn" color="primary" type="submit" large rounded class="rounded-xl" block>
{{ $t("user.login") }}
</v-btn>
<v-checkbox class="ml-2 mt-n4" label="Remember Me"></v-checkbox>
<v-card-actions class="justify-center">
<div class="max-button">
<v-btn :loading="loggingIn" color="primary" type="submit" large rounded class="rounded-xl" block>
{{ $t("user.login") }}
</v-btn>
</div>
</v-card-actions>
</v-form>
</v-card-text>
<v-btn v-if="allowSignup" class="mx-auto" text to="/register"> {{ $t("user.register") }} </v-btn>
<v-btn v-if="allowSignup" rounded class="mx-auto" text to="/register"> {{ $t("user.register") }} </v-btn>
<v-btn v-else class="mx-auto" text disabled> {{ $t("user.invite-only") }} </v-btn>
</v-card>
</v-container>
@ -221,3 +225,10 @@ export default defineComponent({
},
});
</script>
<style lang="css">
.max-button {
width: 300px;
}
</style>