login-register page improvements

rslvn · Jun 10, 2020 · 6644318 · 6644318
1 parent 75fcf59
commit 6644318
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -49,8 +49,8 @@ See the [Features](#features) for more functionalities
 
 | | | |
 |:-------------------------:|:-------------------------:|:-------------------------:|
-|<img width="1604" alt="" src="https://firebasestorage.googleapis.com/v0/b/nuxt-ts-firebase-auth-ssr.appspot.com/o/github%2Fprofile.png?alt=media&token=d650a96f-a7de-47ae-8666-78d730ff28fd"> |  <img width="1604" alt="" src="https://firebasestorage.googleapis.com/v0/b/nuxt-ts-firebase-auth-ssr.appspot.com/o/github%2Flightbox.png?alt=media&token=853b84a1-454c-48ff-a560-e6a740402b1b">|<img width="1604" alt="" src="https://firebasestorage.googleapis.com/v0/b/nuxt-ts-firebase-auth-ssr.appspot.com/o/github%2Fcrop.png?alt=media&token=e3d72dca-08c4-444e-b02d-b81ce8667101">|
-|<img width="1604" alt="" src="https://firebasestorage.googleapis.com/v0/b/nuxt-ts-firebase-auth-ssr.appspot.com/o/github%2Flogin.png?alt=media&token=00b53ac5-27ca-49f3-8104-165d32e56d7d">  |  <img width="1604" alt="screen shot 2017-08-07 at 12 18 15 pm" src="https://firebasestorage.googleapis.com/v0/b/nuxt-ts-firebase-auth-ssr.appspot.com/o/github%2Fregister.png?alt=media&token=aa2c9807-b456-41f3-a7ea-12eacb239e7e">||
+|<img width="1604" alt="Profile" src="https://firebasestorage.googleapis.com/v0/b/nuxt-ts-firebase-auth-ssr.appspot.com/o/github%2Fprofile.png?alt=media&token=b14fd223-1248-44bc-8f9f-92f45273c716"> |  <img width="1604" alt="Ligthbox" src="https://firebasestorage.googleapis.com/v0/b/nuxt-ts-firebase-auth-ssr.appspot.com/o/github%2Flightbox.png?alt=media&token=347fe927-f425-49dd-8d2b-05c626de48cf">|<img width="1604" alt="Ligthbox view" src="https://firebasestorage.googleapis.com/v0/b/nuxt-ts-firebase-auth-ssr.appspot.com/o/github%2Flightbox-view.png?alt=media&token=d6e31892-c0cb-4708-9b9f-d53d52644e9e">|
+|<img width="1604" alt="Crop" src="https://firebasestorage.googleapis.com/v0/b/nuxt-ts-firebase-auth-ssr.appspot.com/o/github%2Fcrop.png?alt=media&token=d547fe2e-fe51-4904-8e22-f3c4a6d6e886">  |  <img width="1604" alt="login" src="https://firebasestorage.googleapis.com/v0/b/nuxt-ts-firebase-auth-ssr.appspot.com/o/github%2Flogin.png?alt=media&token=08d3333c-d54f-495a-937b-fa178d22b21d">|<img width="1604" alt="register" src="https://firebasestorage.googleapis.com/v0/b/nuxt-ts-firebase-auth-ssr.appspot.com/o/github%2Fregister.png?alt=media&token=2cd96b4d-3f34-4a4c-a4a5-0de7b72c3d6a">|
 
 ## DETAILED DOCUMENTATION
 > Coming soon

diff --git a/src/components/form/LoginForm.vue b/src/components/form/LoginForm.vue
@@ -12,6 +12,8 @@
           rules="required|email"
           vid="email"
           :disabled="!!email"
+          label-position="on-border"
+          class="has-margin-5"
         />
 
         <BInputWithValidation
@@ -21,6 +23,8 @@
           :placeholder="$t('common.field.passwordPlaceHolder')"
           rules="required"
           vid="password"
+          label-position="on-border"
+          class="has-margin-5"
         />
 
         <RememberMe v-if="showRememberMe" :value="rememberMe"/>

diff --git a/src/components/form/RegisterForm.vue b/src/components/form/RegisterForm.vue
@@ -11,6 +11,8 @@
           :placeholder="$t('common.field.namePlaceHolder')"
           rules="required|min:4"
           vid="name"
+          label-position="on-border"
+          class="has-margin-5"
         />
 
         <BInputWithValidation
@@ -20,6 +22,8 @@
           input-type="email"
           rules="required|email"
           vid="email"
+          label-position="on-border"
+          class="has-margin-5"
         />
 
         <BInputWithValidation
@@ -29,6 +33,8 @@
           input-type="password"
           rules="required|min:4|confirmed:confirmPassword"
           vid="password"
+          label-position="on-border"
+          class="has-margin-5"
         />
 
         <BInputWithValidation
@@ -38,6 +44,8 @@
           input-type="password"
           rules="required"
           vid="confirmPassword"
+          label-position="on-border"
+          class="has-margin-5"
         />
 
         <div class="buttons">

diff --git a/src/components/form/SocialLogin.vue b/src/components/form/SocialLogin.vue
@@ -9,6 +9,7 @@
         <b-button v-for="provider in providers" :key="provider.providerType" :type="provider.colorType"
                   :icon-left="provider.icon"
                   expanded outlined
+                  class="has-margin-bottom-15"
                   @click="submit(provider.providerType)">
           {{ $t('form.social.loginWith',getLangProviderOption(provider.providerType)) }}
         </b-button>

diff --git a/src/layouts/default.vue b/src/layouts/default.vue
@@ -11,12 +11,13 @@
     <div class="container ">
       <div class="columns">
         <div class="column">
-          <nuxt class="has-margin-5-mobile has-margin-5-tablet"/>
+          <nuxt
+            class="has-margin-left-5-mobile has-margin-right-5-mobile has-margin-left-5-tablet has-margin-right-5-tablet"/>
         </div>
       </div>
     </div>
-    <footer class="has-margin-top-10">
-      <div class="container is-gapless">
+    <footer>
+      <div class="container">
         <div class="columns is-vcentered">
           <div class="column">
             <AppFooter/>

diff --git a/src/pages/login.vue b/src/pages/login.vue
@@ -1,15 +1,15 @@
 <template>
   <section class="section">
-    <div class="container is-fullhd">
-      <div class="columns is-centered">
+    <div class="container">
+      <div class="columns is-flex">
 
-        <div class="column is-half">
+        <div class="column">
           <SocialLogin :title="$t('form.social.title.login')" :remember-me="rememberMe" :providers="providers"
                        :callback="noCallback"
                        :reauthenticate="false"/>
         </div>
 
-        <div class="column is-half">
+        <div class="column">
           <LoginForm :remember-me="rememberMe" :sign-in-with-email="handleSignInWithEmail" :callback="noCallback"/>
         </div>
 

diff --git a/src/pages/register.vue b/src/pages/register.vue
@@ -1,15 +1,15 @@
 <template>
   <section class="section">
-    <div class="container is-fullhd">
-      <div class="columns is-centered">
+    <div class="container">
+      <div class="columns">
 
-        <div class="column is-half">
+        <div class="column">
           <SocialLogin :title="$t('form.social.title.register')" :remember-me="rememberMe" :providers="providers"
                        :callback="noCallback"
                        :reauthenticate="false"/>
         </div>
 
-        <div class="column is-half">
+        <div class="column">
           <RegisterForm :sign-up-with-email="handleSignUpWithEmail"/>
         </div>