From bd8882ec4483e83b7c4a3271dd6923b79b75961d Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sat, 2 Oct 2021 12:18:01 -0800
Subject: [PATCH] Feature/update login UI (#716)

* cleanup signin UI

* add timeout

Co-authored-by: Hayden <hay-kot@pm.me>
---
 frontend/Dockerfile                      |  6 +++--
 frontend/components/Layout/AppFooter.vue | 15 ++++--------
 frontend/layouts/basic.vue               |  5 +---
 frontend/pages/login.vue                 | 31 ++++++++++++++++--------
 4 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 0e797dc80b2d..69ea80b91faf 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -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 && \
diff --git a/frontend/components/Layout/AppFooter.vue b/frontend/components/Layout/AppFooter.vue
index bc5a9276c2fa..510a47431cc6 100644
--- a/frontend/components/Layout/AppFooter.vue
+++ b/frontend/components/Layout/AppFooter.vue
@@ -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>
\ No newline at end of file
diff --git a/frontend/layouts/basic.vue b/frontend/layouts/basic.vue
index 7493beaabbf7..7b739166a902 100644
--- a/frontend/layouts/basic.vue
+++ b/frontend/layouts/basic.vue
@@ -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 {};
   },
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
index 416b964b29c8..d3e6d6448c15 100644
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -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>
\ No newline at end of file