Merge pull request #86 from familytree365/refactor-show-and-login

Refactored show and login page
liberu-genealogy · Sep 10, 2021 · db69a9e · db69a9e
2 parents 18530c2 + d4fb5b2
commit db69a9e
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 25 deletions.
diff --git a/pages/login.vue b/pages/login.vue
@@ -1,22 +1,59 @@
 <template>
-  <login-form action="Login" route="login" @success="init" />
-  <!-- <auth-form
-    action="Login"
-    icon="user"
-    endpoint="login"
-    :payload="payload"
-    @success="init"
-  >
-    <email v-model="payload.email" />
-    <password v-model="payload.password" />
-    <remember v-model="payload.remember" v-if="!isWebview" />
-    <template v-slot:footer>
-      <nuxt-link class="is-pulled-right" :to="{ name: 'password.email' }">
-        {{ "Forgot password" }}
-      </nuxt-link>
-      <div class="is-clearfix" />
-    </template>
-  </auth-form> -->
+    <auth-form action="Login"
+        icon="user"
+        endpoint="login"
+        :payload="payload"
+        @success="init">
+        <email v-model="payload.email"/>
+        <password v-model="payload.password"/>
+        <remember v-model="payload.remember"
+            v-if="!isWebview"/>
+        <template v-slot:footer>
+            <nuxt-link class="mt-1 is-pulled-right"
+                :to="{ name: 'password.email' }">
+                {{ i18n('Forgot password') }}
+            </nuxt-link>
+            <div class="is-clearfix"/>
+            <label for="">Login With</label>
+            <div class="mt-4 columns">
+                <div class="column">
+                <button class="button is-dark"
+                        :class="{ 'is-loading': loading }"
+                        type="button"
+                        @click.prevent="socialLogin('github')">
+                        <span class="icon is-small">
+                            <fa :icon="['fab', 'github']"/>
+                        </span>
+                        <span>{{ i18n('Github') }}</span>
+                </button>
+                </div>
+
+                <div class="column">
+                <button class="button is-light is-outline"
+                        :class="{ 'is-loading': loading }"
+                        type="button"
+                        @click.prevent="socialLogin('google')">
+                        <span class="icon is-small">
+                            <fa :icon="['fab', 'google']"/>
+                        </span>
+                        <span>{{ i18n('Google') }}</span>
+                </button>
+                </div>
+
+                <div class="column">
+                <button class="button is-info"
+                        :class="{ 'is-loading': loading }"
+                        type="button"
+                        @click.prevent="socialLogin('facebook')">
+                        <span class="icon is-small">
+                            <fa :icon="['fab', 'facebook']"/>
+                        </span>
+                        <span>{{ i18n('Facebook') }}</span>
+                </button>
+                </div>
+            </div>  
+        </template>
+    </auth-form>
 </template>
 
 <script>
@@ -53,12 +90,23 @@ export default {
     //   remember: false,
     // }),
 
+    data: () => ({
+        errors: new Errors(),
+        payload: {
+            email: '',
+            password: '',
+            remember: false,
+            device_name: '',
+        },
+        loading: false,
+    }),
     // watch: {
     //   remember(value) {
     //     console.log(value);
     //   },
     // },
 
+
     computed: {
       ...mapState(["meta"]),
       ...mapGetters(["isWebview"]),

diff --git a/pages/trees/show.vue b/pages/trees/show.vue
@@ -1,11 +1,12 @@
 <template>
     <div>
         <v-select
-        label="name"
-        v-model="selected_option"
-        :reduce="person => person.id"
-        :options="persons"
-        @input="setSelected"/>
+            label="name"
+            v-model="selected_option"
+            :reduce="person => person.id"
+            :options="persons"
+            @input="setSelected"
+        />
         <div id="tree"/>
         <button id="saveButton">
             Export my PNG
@@ -24,8 +25,10 @@ import { sampleData } from './data';
 
 const d3 = { ...d3Base, tip: d3Tip() };
 Array.prototype.remove = function () {
-    let what; const a = arguments; let L = a.length; let
-        ax;
+    let what; 
+    const a = arguments; 
+    let L = a.length; 
+    let ax;
     while (L && this.length) {
         what = a[--L];
         while ((ax = this.indexOf(what)) !== -1) {