nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 08:12:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

headline refactoring in auth pages

Browse Source
This commit is contained in:
Čarodej
2021-10-25 10:33:14 +02:00
parent 3f93373f60
commit b45662942d
10 changed files with 126 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
resources/js/views/Auth/CreateNewPassword.vue
View File

@@ -3,11 +3,10 @@
<!--Create new password-->
<AuthContent name="create-new-password" :visible="true">
<img v-if="config.app_logo" class="logo mx-auto" :src="$getImage(config.app_logo)" :alt="config.app_name">
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
<h1>{{ $t('page_create_password.title') }}</h1>
<h2>{{ $t('page_create_password.subtitle') }}:</h2>
<Headline
:title="$t('page_create_password.title')"
:description="$t('page_create_password.subtitle')"
/>
<ValidationObserver @submit.prevent="createNewPassword" ref="create_new_password" v-slot="{ invalid }"
tag="form" class="form block-form create-new-password">
@@ -75,6 +74,7 @@
import AuthContent from '/resources/js/components/Auth/AuthContent'
import AuthButton from '/resources/js/components/Auth/AuthButton'
import {required} from 'vee-validate/dist/rules'
import Headline from "./Headline";
import {mapGetters} from 'vuex'
import axios from 'axios'
@@ -86,6 +86,7 @@
ValidationObserver,
AuthContent,
AuthButton,
Headline,
required,
},
computed: {

11
resources/js/views/Auth/ForgottenPassword.vue
View File

@@ -3,11 +3,10 @@
<!--Forgotten your password?-->
<AuthContent name="forgotten-password" :visible="true">
<img v-if="config.app_logo" class="logo mx-auto" :src="$getImage(config.app_logo)" :alt="config.app_name">
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
<h1>{{ $t('page_forgotten_password.title') }}</h1>
<h2>{{ $t('page_forgotten_password.subtitle') }}:</h2>
<Headline
:title="$t('page_forgotten_password.title')"
:description="$t('page_forgotten_password.subtitle')"
/>
<ValidationObserver @submit.prevent="forgottenPassword" ref="forgotten_password" v-slot="{ invalid }"
tag="form" class="form inline-form">
@@ -52,6 +51,7 @@
import AuthContent from '/resources/js/components/Auth/AuthContent'
import AuthButton from '/resources/js/components/Auth/AuthButton'
import {required} from 'vee-validate/dist/rules'
import Headline from "./Headline";
import {mapGetters} from 'vuex'
import axios from 'axios'
@@ -64,6 +64,7 @@
AuthContent,
AuthButton,
required,
Headline,
},
computed: {
...mapGetters(['config']),

50
resources/js/views/Auth/Headline.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<div>
<img v-if="config.app_logo" class="logo mx-auto" :src="$getImage(config.app_logo)" :alt="config.app_name">
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
<h1>{{ title }}</h1>
<h2>{{ description }}:</h2>
</div>
</template>
<script>
import {mapGetters} from "vuex";
export default {
name: 'Headline',
props: [
'description',
'title',
],
computed: {
...mapGetters([
'config',
])
}
}
</script>
<style lang="scss">
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.logo {
width: 120px;
margin-bottom: 20px;
}
h1 {
@include font-size(34);
font-weight: 800;
line-height: 1.2;
margin-bottom: 2px;
color: $text;
}
h2 {
@include font-size(23);
font-weight: 500;
margin-bottom: 50px;
color: $text;
}
</style>

31
resources/js/views/Auth/SignIn.vue
View File

@@ -3,14 +3,13 @@
<!--Log In by Email-->
<AuthContent name="log-in" :visible="true">
<img v-if="config.app_logo" class="logo mx-auto" :src="$getImage(config.app_logo)" :alt="config.app_name">
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
<h1>{{ $t('page_login.title') }}</h1>
<h2>{{ $t('page_login.subtitle') }}:</h2>
<Headline
:title="$t('page_login.title')"
:description="$t('page_login.subtitle')"
/>
<ValidationObserver @submit.prevent="logIn" ref="log_in" v-slot="{ invalid }" tag="form"
class="form inline-form">
class="form inline-form">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="loginEmail" :placeholder="$t('page_login.placeholder_email')" type="email"
@@ -151,24 +150,24 @@
<script>
import AuthContentWrapper from '/resources/js/components/Auth/AuthContentWrapper'
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 Spinner from '/resources/js/components/FilesView/Spinner'
import {required} from 'vee-validate/dist/rules'
import {mapGetters} from 'vuex'
import {events} from '/resources/js/bus'
import axios from 'axios'
import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
import AuthContent from '/resources/js/components/Auth/AuthContent'
import AuthButton from '/resources/js/components/Auth/AuthButton'
import Spinner from '/resources/js/components/FilesView/Spinner'
import {mapGetters} from 'vuex'
import {events} from '/resources/js/bus'
import axios from 'axios'
import Headline from "./Headline";
export default {
export default {
name: 'SignIn',
components: {
Headline,
AuthContentWrapper,
ValidationProvider,
ValidationObserver,
AuthContent,
AuthButton,
required,
Spinner,
},
computed: {

15
resources/js/views/Auth/SignUp.vue
View File

@@ -3,15 +3,12 @@
<!--Registration-->
<AuthContent name="sign-up" :visible="true">
<img v-if="config.app_logo" class="logo mx-auto" :src="$getImage(config.app_logo)" :alt="config.app_name">
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
<h1>{{ $t('page_registration.title') }}</h1>
<h2>{{ $t('page_registration.subtitle') }}:</h2>
<ValidationObserver @submit.prevent="signUp" ref="sign_up" v-slot="{ invalid }" tag="form"
class="form block-form">
<Headline
:title="$t('page_registration.title')"
:description="$t('page_registration.subtitle')"
/>
<ValidationObserver @submit.prevent="signUp" ref="sign_up" v-slot="{ invalid }" tag="form" class="form block-form">
<div class="block-wrapper">
<label>{{ $t('page_registration.label_email') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
@@ -76,6 +73,7 @@
</template>
<script>
import Headline from "./Headline";
import AuthContentWrapper from '/resources/js/components/Auth/AuthContentWrapper'
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import AuthContent from '/resources/js/components/Auth/AuthContent'
@@ -93,6 +91,7 @@
ValidationObserver,
AuthContent,
AuthButton,
Headline,
required,
},
computed: {

13
resources/js/views/Auth/SuccessfullyEmailVerified.vue
View File

@@ -1,11 +1,10 @@
<template>
<AuthContentWrapper>
<AuthContent :visible="true">
<img v-if="config.app_logo" class="logo mx-auto" :src="$getImage(config.app_logo)" :alt="config.app_name">
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
<h1>{{ $t('page_email_successfully_verified.title') }}</h1>
<h2>{{ $t('page_email_successfully_verified.subtitle') }}</h2>
<Headline
:title="$t('page_email_successfully_verified.title')"
:description="$t('page_email_successfully_verified.subtitle')"
/>
<a href="/sign-in">
<AuthButton icon="chevron-right" :text="$t('page_sign_in.button_log_in')"/>
@@ -19,7 +18,8 @@
import AuthContentWrapper from '/resources/js/components/Auth/AuthContentWrapper'
import AuthContent from '/resources/js/components/Auth/AuthContent'
import AuthButton from '/resources/js/components/Auth/AuthButton'
import {mapGetters} from 'vuex'
import Headline from "./Headline";
import {mapGetters} from 'vuex'
export default {
name: 'SuccessfullyEmailVerified',
@@ -27,6 +27,7 @@
AuthContentWrapper,
AuthContent,
AuthButton,
Headline,
},
computed: {
...mapGetters(['config']),

11
resources/js/views/Auth/SuccessfullySendEmail.vue
View File

@@ -1,11 +1,10 @@
<template>
<AuthContentWrapper>
<AuthContent :visible="true">
<img v-if="config.app_logo" class="logo mx-auto" :src="$getImage(config.app_logo)" :alt="config.app_name">
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
<h1>{{ $t('page_email_successfully_send.title') }}</h1>
<h2>{{ $t('page_email_successfully_send.subtitle') }}</h2>
<Headline
:title="$t('page_email_successfully_send.title')"
:description="$t('page_email_successfully_send.subtitle')"
/>
<span class="additional-link">
<router-link :to="{name: 'Homepage'}" class="text-theme">
@@ -21,6 +20,7 @@
import AuthContentWrapper from '/resources/js/components/Auth/AuthContentWrapper'
import AuthContent from '/resources/js/components/Auth/AuthContent'
import AuthButton from '/resources/js/components/Auth/AuthButton'
import Headline from "./Headline";
import {mapGetters} from 'vuex'
export default {
@@ -29,6 +29,7 @@
AuthContentWrapper,
AuthContent,
AuthButton,
Headline,
},
computed: {
...mapGetters(['config']),

15
resources/js/views/Shared/SharedAuthentication.vue
View File

@@ -1,11 +1,10 @@
<template>
<div id="password-view">
<AuthContent class="center" name="password" :visible="true">
<img v-if="config.app_logo" class="logo mx-auto" :src="$getImage(config.app_logo)" :alt="config.app_name">
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
<h1>{{ $t('page_shared.title') }}</h1>
<h2>{{ $t('page_shared.subtitle') }}</h2>
<Headline
:title="$t('page_shared.title')"
:description="$t('page_shared.subtitle')"
/>
<ValidationObserver @submit.prevent="authenticateProtected" ref="authenticateProtected" v-slot="{ invalid }" tag="form" class="form inline-form">
@@ -21,11 +20,12 @@
</template>
<script>
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
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 axios from "axios";
import Headline from "./Headline";
import {mapGetters} from "vuex";
import axios from "axios";
export default {
name: 'SharedAuthentication',
@@ -34,6 +34,7 @@
ValidationProvider,
AuthContent,
AuthButton,
Headline,
},
computed: {
...mapGetters([

18
resources/sass/vuefilemanager/_auth.scss vendored
View File

@@ -36,25 +36,7 @@
box-shadow: 0 10px 30px rgba(25, 54, 60, 0.2);
}
.logo {
width: 120px;
margin-bottom: 20px;
}
h1 {
@include font-size(34);
font-weight: 800;
line-height: 1.2;
margin-bottom: 2px;
color: $text;
}
h2 {
@include font-size(23);
font-weight: 500;
margin-bottom: 50px;
color: $text;
}
.block-form {
margin-left: auto;