nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-05-01 20:05:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

login refactor

Browse Source
This commit is contained in:
Čarodej
2022-01-10 09:09:20 +01:00
parent ead4f65e1a
commit 0d8f1b64a7
7 changed files with 303 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/Auth/AuthButton.vue
+15 -82
View File
@@ -1,21 +1,27 @@
<template>
<button class="button outline hover-text-theme hover-border-theme">
<span class="text-label">{{ text }}</span>
<span v-if="loading" class="icon">
<FontAwesomeIcon icon="sync-alt" class="sync-alt svg-color-theme"/>
</span>
<span v-if="! loading && icon" class="icon">
<FontAwesomeIcon :icon="icon" class="svg-color-theme"/>
<button class="group flex items-center border-2 border-black rounded-lg inline-block mx-auto px-7 py-2.5 whitespace-nowrap">
<span class="font-extrabold text-lg pr-1">
{{ text }}
</span>
<refresh-cw-icon v-if="loading" size="20" class="vue-feather text-theme -mr-1 sync-alt"/>
<chevron-right-icon v-if="! loading && icon" size="20" class="vue-feather text-theme -mr-1"/>
</button>
</template>
<script>
import { ChevronRightIcon, RefreshCwIcon } from 'vue-feather-icons'
export default {
name: 'AuthContent',
props: ['loading', 'icon', 'text'],
props: [
'loading',
'icon',
'text'
],
components: {
ChevronRightIcon,
RefreshCwIcon,
},
data() {
return {
isVisible: false,
@@ -28,79 +34,6 @@
</script>
<style scoped lang="scss">
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.button {
cursor: pointer;
border-radius: 8px;
text-decoration: none;
padding: 12px 32px;
display: inline-block;
margin-left: 15px;
margin-right: 15px;
white-space: nowrap;
@include transition(150ms);
background: transparent;
.text-label {
@include transition(150ms);
@include font-size(17);
font-weight: 800;
line-height: 0;
}
.icon {
margin-left: 12px;
@include font-size(16);
}
&.solid {
background: $theme;
border: 2px solid $theme;
.text-label {
color: white;
}
}
&.outline {
border: 2px solid $text;
.text-label {
color: $text;
}
.icon {
path {
fill: inherit;
}
}
&:hover {
border-color: inherit;
.text-label {
color: inherit;
}
}
}
}
.dark {
.button {
&.outline {
background: $dark_mode_background;
border-color: $dark_mode_text_primary;
.text-label {
color: $dark_mode_text_primary;
}
}
}
}
.sync-alt {
animation: spin 1s linear infinite;
resources/js/components/Auth/SocialiteAuthenticationButtons.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<div class="wrapper flex flex-row w-1/2 ml-2">
<div class="w-1/3 grid justify-items-center items-center cursor-pointer">
<facebook-icon @click="socialiteRedirect('facebook')" />
<facebook-icon @click="socialiteRedirect('facebook')" />
</div>
<div class="w-1/3 grid justify-items-center items-center cursor-pointer">
@@ -9,7 +9,7 @@
</div>
<div class="w-1/3 grid justify-items-center items-center cursor-pointer">
<h1 @click="socialiteRedirect('google')">G</h1>
<span @click="socialiteRedirect('google')" class="font-semibold text-3xl">G</span>
</div>
</div>
</template>
resources/js/views/Auth/ForgottenPassword.vue
+1 -1
View File
@@ -10,7 +10,7 @@
<ValidationObserver @submit.prevent="forgottenPassword" ref="forgotten_password" v-slot="{ invalid }"
tag="form" class="form inline-form">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
<ValidationProvider tag="div" mode="passive" class="input-wrapper mr-4" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="recoverEmail" :placeholder="$t('page_login.placeholder_email')" type="email"
class="focus-border-theme"
resources/js/views/Auth/SignIn.vue
+2 -2
View File
@@ -10,7 +10,7 @@
<ValidationObserver @submit.prevent="logIn" ref="log_in" v-slot="{ invalid }" tag="form"
class="form inline-form">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
<ValidationProvider tag="div" mode="passive" class="input-wrapper mr-4" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="loginEmail" :placeholder="$t('page_login.placeholder_email')" type="email"
class="focus-border-theme"
@@ -43,7 +43,7 @@
<ValidationObserver @submit.prevent="singIn" ref="sign_in" v-slot="{ invalid }" tag="form"
class="form inline-form">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="User Password" rules="required"
<ValidationProvider tag="div" mode="passive" class="input-wrapper mr-4" name="User Password" rules="required"
v-slot="{ errors }">
<input v-model="loginPassword" :placeholder="$t('page_sign_in.placeholder_password')"
type="password"
resources/js/views/Auth/SignUp.vue
+1 -1
View File
@@ -58,7 +58,7 @@
<router-link :to="{name: 'DynamicPage', params: {slug: 'terms-of-service'}}" target="_blank" class="text-theme">{{ termsOfService.title }}</router-link>
<router-link :to="{name: 'DynamicPage', params: {slug: 'privacy-policy'}}" target="_blank" class="text-theme">{{ privacyPolicy.title }}</router-link>
</i18n>
<AuthButton icon="chevron-right" :text="$t('page_registration.button_create_account')" :loading="isLoading" :disabled="isLoading"/>
<AuthButton class="mt-6" icon="chevron-right" :text="$t('page_registration.button_create_account')" :loading="isLoading" :disabled="isLoading"/>
</div>
</ValidationObserver>
resources/js/views/Auth/SocialiteCallback.vue
+5 -5
View File
@@ -1,7 +1,5 @@
<template>
<div>
<Spinner/>
</div>
<Spinner/>
</template>
<script>
@@ -9,7 +7,9 @@ import Spinner from '/resources/js/components/FilesView/Spinner'
export default {
name: 'SocialiteCallback',
components: {Spinner},
components: {
Spinner
},
created () {
axios
.get(`/api${this.$route.fullPath}`)
@@ -21,7 +21,7 @@ export default {
// Go to files page
this.$router.push({name: 'Files'})
})
.catch((error) => {
.catch(() => {
this.$isSomethingWrong()