create Socialite Login/Register

resources/js/components/Auth/SocialiteAuthenticationButtons.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="wrapper">
+        <div class="icon-wrapper">
+            <facebook-icon  @click="socialite('facebook')" class="icon"/>
+            <github-icon @click="socialite('github')" class="icon"/>
+            <h1 @click="socialite('google')" class="icon">G</h1>
+        </div>
+    </div>
+</template>
+
+<script>
+import { FacebookIcon, GithubIcon  } from 'vue-feather-icons'
+
+export default {
+    name:'SocialiteAuthenticationButtons',
+    components: {
+        FacebookIcon,
+        GithubIcon,
+    },
+    methods: {
+        socialite(provider) {
+
+            this.isLoading = true
+
+            axios
+                .get(`/api/socialite/${provider}/redirect`)
+                .then((response) => {
+                    if(response.data.url) {
+                        window.location.href = response.data.url
+                    }                
+                })
+                .catch(() => this.$isSomethingWrong())
+        },
+    }
+    
+}
+</script>
+
+<style lang="scss" scoped>
+
+.wrapper {
+    display: flex;
+    justify-content: center;
+    margin: 50px 0px 0px 0px;
+
+    .icon-wrapper {
+        width: 200px;
+        display: flex;
+        align-content: center;
+        justify-content: space-between;
+
+        .icon { 
+            align-self: center;
+            cursor: pointer;
+        }
+    }
+}
+
+</style>

resources/js/routes/routesAuth.js

@@ -1,4 +1,13 @@
 const routesAuth = [
+	{
+		name: 'SocialiteCallback',
+		path: '/socialite/:provider/callback',
+		component: () =>
+			import(/* webpackChunkName: "chunks/email-verified" */ '../views/Auth/SocialiteCallback'),
+		meta: {
+			requiresAuth: false
+		},
+	},
 	{
 		name: 'SuccessfullyVerified',
 		path: '/successfully-verified',

resources/js/views/Auth/SignIn.vue

@@ -22,6 +22,8 @@
                             :disabled="isLoading" />
             </ValidationObserver>
 
+            <SocialiteAuthenticationButtons/>
+
             <span v-if="config.userRegistration" class="additional-link">
                 {{ $t('page_login.registration_text') }}
                 <router-link class="text-theme" :to="{name: 'SignUp'}">
@@ -151,6 +153,7 @@
 <script>
     import AuthContentWrapper from '/resources/js/components/Auth/AuthContentWrapper'
 	import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
+    import SocialiteAuthenticationButtons from '/resources/js/components/Auth/SocialiteAuthenticationButtons'
 	import AuthContent from '/resources/js/components/Auth/AuthContent'
 	import AuthButton from '/resources/js/components/Auth/AuthButton'
 	import Spinner from '/resources/js/components/FilesView/Spinner'
@@ -162,10 +165,11 @@
 	export default {
         name: 'SignIn',
         components: {
-			Headline,
+            Headline,
             AuthContentWrapper,
             ValidationProvider,
             ValidationObserver,
+            SocialiteAuthenticationButtons,
             AuthContent,
             AuthButton,
             Spinner,

resources/js/views/Auth/SignUp.vue

@@ -62,6 +62,8 @@
                 </div>
             </ValidationObserver>
 
+            <SocialiteAuthenticationButtons/>
+
             <span class="additional-link">{{ $t('page_registration.have_an_account') }}
                 <router-link :to="{name: 'SignIn'}" class="text-theme">
                     {{ $t('page_forgotten_password.password_remember_button') }}
@@ -78,6 +80,7 @@
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import AuthContent from '/resources/js/components/Auth/AuthContent'
     import AuthButton from '/resources/js/components/Auth/AuthButton'
+    import SocialiteAuthenticationButtons from '/resources/js/components/Auth/SocialiteAuthenticationButtons'
     import {required} from 'vee-validate/dist/rules'
     import {mapGetters} from 'vuex'
     import {events} from '/resources/js/bus'
@@ -86,6 +89,7 @@
     export default {
         name: 'SignUp',
         components: {
+            SocialiteAuthenticationButtons,
             AuthContentWrapper,
             ValidationProvider,
             ValidationObserver,

resources/js/views/Auth/SocialiteCallback.vue

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <Spinner/>
+    </div>
+</template>
+
+<script>
+import Spinner from '/resources/js/components/FilesView/Spinner'
+
+export default {
+    name: 'SocialiteCallback',
+    components: {Spinner},
+    created () {
+        axios
+            .get(`/api${this.$route.fullPath}`)
+            .then(() => {
+
+                // Set login state
+                this.$store.commit('SET_AUTHORIZED', true)
+
+                // Go to files page
+                this.$router.push({name: 'Files'})
+            })
+            .catch((error) => {
+                
+                this.$isSomethingWrong()
+
+                this.$router.push({name: 'Homepage'})
+            })              
+    }
+    
+}
+</script>

resources/js/views/User/Password.vue

@@ -1,6 +1,6 @@
 <template>
     <PageTab>
-        <PageTabGroup>
+        <PageTabGroup v-if="! user.data.attributes.socialite_account">
             <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="form block-form">
                 <FormLabel>{{ $t('user_password.title') }}</FormLabel>
                 <div class="block-wrapper">
@@ -32,7 +32,7 @@
                 </div>
             </ValidationObserver>
         </PageTabGroup>
-        <PageTabGroup class="form block-form">
+        <PageTabGroup  v-if="! user.data.attributes.socialite_account" class="form block-form">
             <FormLabel icon="smartphone">{{ $t('2fa.settings.title') }}</FormLabel>
             <div class="block-wrapper">
 				<div class="input-wrapper">