Skip to content

Instantly share code, notes, and snippets.

@nulpatrol

nulpatrol/App.vue

Created November 13, 2017 08:24
Show Gist options
  • Save nulpatrol/e68285b605fd0c1e13e1e980aba3913a to your computer and use it in GitHub Desktop.
Save nulpatrol/e68285b605fd0c1e13e1e980aba3913a to your computer and use it in GitHub Desktop.
Download ZIP
App.vue
Raw
App.vue
<template>
<div id="app" @keyup.esc="closeAllModal">
<div ref="modals">
<!-- Sign in -->
<transition name="slide-fade" mode="out-in">
<div v-if="$store.getters.signInModal" class="modal-wrap">
<div class="modal-custom" v-on-click-outside="closeSignInModal">
<span @click="closeSignInModal" class="close"></span>
<h1 class="paragraph-head">{{ $t('translation.login') }}</h1>
<p>{{ $t("translation.welcomeToKantor") }}</p>
<form data-vv-scope="loginForm" class="mt-md-4 mt-sm-2 form-horizontal container"
@submit.prevent="auth">
<div class="row justify-content-center ml-0">
<div :class="{'form-group': true }" class="col-5 pl-0">
<input data-vv-validate-on="none"
id="signup-email"
type="email"
class="form-control"
name="email"
v-model="currentUserEmail"
v-validate="validationRules.email"
:placeholder="$t('translation.email')"
@input="clearSignInError">
<span class="invalid-feedback">{{ errors.first('loginForm.email') }}</span>
</div>
</div>
<div class="row justify-content-center ml-0">
<div :class="{'form-group': true }" class="col-5 pl-0">
<input data-vv-validate-on="none"
id="signup-password"
type="password"
class="form-control"
name="password"
v-model="currentUserPassword"
v-validate="validationRules.password"
:placeholder="$t('translation.password')"
@input="clearSignInError">
<span class="invalid-feedback">{{ errors.first('loginForm.password') }}</span>
</div>
</div>
<div class="row justify-content-center align-items-center go-to-forgot">
<a href="javascript:;" class="btn btn-link custom-btn btn-link-primary" @click="showPasswordEmail">
{{ $t("translation.forgotPassword") }}?
</a>
</div>
<div class="row justify-content-center mb-md-4 ml-0">
<div class="col-md-5 pl-0">
<button type="submit" class="btn custom-btn btn-primary btn-block" :disabled="this.progress">
{{ $t("translation.login") }}
</button>
</div>
</div>
<div class="row justify-content-center align-items-center go-to-forgot">
<a href="javascript:;" class="btn btn-link custom-btn btn-link-primary" @click="openSignUpModal">
{{ $t("translation.signUp") }}
</a>
</div>
</form>
</div>
</div>
</transition>
<!-- Password email -->
<transition name="slide-fade" mode="out-in">
<div v-if="$store.getters.passwordEmailModal" class="modal-wrap">
<div class="modal-custom" v-on-click-outside="closePasswordEmail">
<span @click="closePasswordEmail" class="close"></span>
<h1 class="paragraph-head">{{ $t('translation.forgotPassword') }}</h1>
<p>{{ $t("translation.enterEmailForConfirmationEmail") }}</p>
<form data-vv-scope="passwordEmailForm" class="mt-md-4 mt-sm-2 form-horizontal container" @submit.prevent="passwordEmail">
<div class="row justify-content-center ml-0">
<div class="form-group col-5 pl-0">
<input data-vv-validate-on="none"
id="forgot-form-email"
type="email"
class="form-control"
name="email"
v-model="currentUserEmail"
v-validate="validationRules.email"
:placeholder="$t('translation.email')"
:title="$t('translation.email')"
@input="clearPasswordEmailError">
<span class="invalid-feedback">
{{ errors.first('passwordEmailForm.email') }}
</span>
</div>
</div>
<div class="row justify-content-center mb-md-4 ml-0">
<div class="col-md-5 pl-0">
<button type="submit" class="btn custom-btn btn-primary btn-block" :disabled="this.progress">
{{ $t("translation.send") }}
</button>
</div>
</div>
<div class="row justify-content-center align-items-center go-to-signin">
<p>{{ $t("translation.notYetRegistred") }} </p>
<button class="btn btn-link custom-btn btn-link-primary" @click.prevent="openSignUpModal">
{{ $t("translation.signUp") }}
</button>
</div>
</form>
</div>
</div>
</transition>
<!-- Sign up -->
<transition name="slide-fade" mode="out-in">
<div v-if="$store.getters.signUpModal" class="modal-wrap">
<div class="modal-custom" v-on-click-outside="closeSignUpModal">
<span @click="closeSignUpModal" class="close"></span>
<h1 class="paragraph-head">{{ $t('translation.register') }}</h1>
<p>{{ $t("translation.signUpInfo") }}</p>
<form autocomplete="off" data-vv-scope="registerForm" class="form-horizontal container mt-md-4 mt-sm-2" @submit.prevent="register">
<div class="row ml-0 justify-content-center">
<div class="col-5 pl-0 mb-4">
<input :title="$t('translation.firstName')"
:placeholder="$t('translation.firstName')"
data-vv-validate-on="none"
id="first_name"
type="text"
class="form-control"
name="first_name"
v-model="currentUserFirstName"
v-validate="validationRules.name"
@input="clearError">
<span class="invalid-feedback">{{ errors.first('registerForm.first_name') }}</span>
</div>
<div class="col-5 pl-0 mb-4">
<input data-vv-validate-on="none" id="last_name" type="text" class="form-control" name="last_name" v-model="currentUserLastName"
v-validate="validationRules.name" @input="clearError" :placeholder="$t('translation.lastName')">
<span class="invalid-feedback">{{ errors.first('registerForm.last_name') }}</span>
</div>
</div>
<div class="row ml-0 justify-content-center">
<div class="col-5 pl-0 mb-4">
<input data-vv-validate-on="none" id="phone" type="text" class="form-control" name="phone" v-model="currentUserPhone"
v-validate="validationRules.phone" @input="clearError" :placeholder="$t('translation.phone')">
<span class="invalid-feedback">{{ errors.first('registerForm.phone') }}</span>
</div>
<div class="col-5 pl-0 mb-4">
<input data-vv-validate-on="none" id="email" type="email" class="form-control" name="email" v-model="currentUserEmail"
v-validate="validationRules.email" @input="clearError" :placeholder="$t('translation.email')">
<span class="invalid-feedback">{{ errors.first('registerForm.email') }}</span>
</div>
</div>
<div class="row ml-0 justify-content-center">
<div class="col-5 pl-0 mb-4">
<input data-vv-validate-on="none" id="password" type="password" class="form-control" name="password" v-model="currentUserPassword"
v-validate="validationRules.password" @input="clearError" :placeholder="$t('translation.password')">
<span class="invalid-feedback">{{ errors.first('registerForm.password') }}</span>
</div>
<div class="col-5 pl-0 mb-4">
<input data-vv-validate-on="none" id="password-confirmation" type="password" class="form-control" name="passwordConfirmation"
v-model="currentUserPasswordConfirmation" @input="clearError" v-validate="validationRules.passwordConfirmation" :placeholder="$t('translation.confirmPassword')">
<span class="invalid-feedback">{{ errors.first('registerForm.passwordConfirmation') }}</span>
</div>
</div>
<div class="row ml-0 mb-md-5 justify-content-center align-items-center">
<div class="col-10 pl-0">
<input @click="clearError" data-vv-validate-on="none" v-validate="'required'" name="siteTerms" id="site-terms" class="form-control custom-input" type="checkbox" checked>
<label for="site-terms" class="custom-input-label site-terms">{{ $t("translation.confirmSiteTerms") }}</label>
<span class="invalid-feedback">{{ errors.first('registerForm.siteTerms') }}</span>
</div>
</div>
<div class="row justify-content-center mb-md-4">
<div class="col-md-5">
<button type="submit" class="btn custom-btn btn-primary btn-block" :disabled="this.progress">
{{ $t("translation.register") }}
</button>
</div>
</div>
<div class="row justify-content-center align-items-center go-to-signin">
<p>{{ $t("translation.alreadyRegistered") }} </p>
<button class="btn btn-link custom-btn btn-link-primary" @click.prevent="openSignInModal">
{{ $t("translation.clickToEnter") }}
</button>
</div>
</form>
</div>
</div>
</transition>
<!-- Confirm modal -->
<transition name="slide-fade" mode="out-in">
<div v-if="$store.getters.confirmModal" class="modal-wrap">
<div class="modal-custom modal-action" v-on-click-outside="closeConfirmModal">
<h1 class="paragraph-head">{{ $store.getters.confirmModalTitle }}</h1>
<p>{{ $store.getters.confirmModalText }}</p>
<div class="row justify-content-center align-items-center align-self-end">
<button class="btn custom-btn btn-primary" @click="closeConfirmModal">
{{ $t("translation.cancel") }}
</button>
<button class="btn custom-btn btn-transparent">
{{ $t("translation.approve") }}
</button>
</div>
</div>
</div>
</transition>
<!-- Reset password -->
<transition name="slide-fade" mode="out-in">
<div v-if="$store.getters.resetPasswordModal" class="modal-wrap">
<div class="modal-custom" v-on-click-outside="closeResetPassword2">
<span @click="closeResetPassword" class="close"></span>
<h1 class="paragraph-head">{{ $t('translation.forgotPassword') }}</h1>
<p>{{ $t("translation.enterEmailForConfirmationEmail") }}</p>
<form data-vv-scope="resetPasswordForm" class="mt-md-4 mt-sm-2 form-horizontal container" @submit.prevent="resetPassword">
<div class="row justify-content-center ml-0">
<div :class="{'form-group': true }" class="col-5 pl-0 mb-4">
<input data-vv-validate-on="none"
id="reset-email"
type="email"
class="form-control"
name="email"
v-model="currentUserEmail"
v-validate="validationRules.email"
:placeholder="$t('translation.email')"
@input="clearResetPasswordError">
<span class="invalid-feedback">{{ errors.first('resetPasswordForm.email') }}</span>
</div>
</div>
<div class="row justify-content-center ml-0">
<div :class="{'form-group': true }" class="col-5 pl-0 mb-4">
<input data-vv-validate-on="none"
id="reset-password"
type="password"
class="form-control"
name="password"
v-model="currentUserPassword"
v-validate="validationRules.password"
:placeholder="$t('translation.password')"
@input="clearResetPasswordError">
<span class="invalid-feedback">{{ errors.first('resetPasswordForm.password') }}</span>
</div>
</div>
<div class="row justify-content-center ml-0">
<div :class="{'form-group': true }" class="col-5 pl-0 mb-4">
<input data-vv-validate-on="none"
id="reset-password-confirmation"
type="password"
class="form-control"
name="passwordConfirmation"
v-model="currentUserPasswordConfirmation"
v-validate="'required|confirmed:password'"
:placeholder="$t('translation.confirmPassword')"
@input="clearResetPasswordError">
<span class="invalid-feedback">{{ errors.first('resetPasswordForm.passwordConfirmation') }}</span>
</div>
</div>
<div class="row justify-content-center mb-md-4 ml-0">
<div class="col-md-5 pl-0">
<button type="submit" class="btn custom-btn btn-primary btn-block" :disabled="this.progress">
{{ $t("translation.send") }}
</button>
</div>
</div>
<div class="row justify-content-center align-items-center go-to-signin">
<p>{{ $t("translation.notYetRegistred") }} </p>
<button class="btn btn-link custom-btn btn-link-primary" @click.prevent="openSignUpModal">
{{ $t("translation.signUp") }}
</button>
</div>
</form>
</div>
</div>
</transition>
<!-- Add collaborator modal -->
<share-modal></share-modal>
<!-- Validation -->
<transition name="slide-fade" mode="out-in">
<div v-if="$store.getters.messageModal" class="modal-wrap">
<div class="modal-custom" v-on-click-outside="closeMessageModal">
<span @click="closeMessageModal" class="close"></span>
<h1 class="paragraph-head">{{ $store.getters.messageModalTitle }}</h1>
<p>{{ $store.getters.messageModalText }}</p>
</div>
</div>
</transition>
</div>
<nav class="navbar navbar-expand-lg" role="navigation">
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="navbar-nav ml-auto">
<router-link to="/" tag="li" active-class="active" exact class="nav-item main-menu">
<router-link to="/" exact class="nav-link">
{{ $t("translation.main") }}
</router-link>
</router-link>
<li class="nav-item">
<a href="/#about" class="nav-link">
{{ $t("translation.aboutUs") }}
</a>
</li>
<li class="nav-item">
<a href="/#faq" class="nav-link">
{{ $t("translation.faq") }}
</a>
</li>
<li class="nav-item">
<a href="/#" class="nav-link">
{{ $t("translation.partners") }}
</a>
</li>
<li class="nav-item">
<a href="/#contactUs" class="nav-link">
{{ $t("translation.contactUs") }}
</a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<router-link to="/insurance/step1" tag="li" class="nav-item__insurance nav-item">
<router-link to="/insurance/step1" class="nav-link">
{{ $t("translation.insurance") }}
</router-link>
</router-link>
<router-link to="/lease/step1" tag="li" class="nav-item__lease nav-item">
<router-link to="/lease/step1" class="nav-link">
{{ $t("translation.rentalContract") }}
</router-link>
</router-link>
<router-link to="/repair/step1" tag="li" class="nav-item__repair nav-item">
<router-link to="/repair/step1" class="nav-link">
{{ $t("translation.repair") }}
</router-link>
</router-link>
<!--<li class="dropdown nav-item">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
{{ $t(`translation.${currentLang}`) }}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li @click="lang('en')">
<a href="javascript:;">{{ $t("translation.en") }}</a>
</li>
<li @click="lang('he')">
<a href="javascript:;">{{ $t("translation.he") }}</a>
</li>
</ul>
</li>
<router-link to="/login" tag="li" class="nav-item" active-class="active" v-if="!logged">
<router-link to="/login" class="nav-link">
{{ $t("translation.login") }}
</router-link>
</router-link>-->
<li class="nav-item nav-item__register" v-if="!logged">
<a href="#" class="nav-link" @click.prevent="openSignInModal">
{{ $t("translation.helloGuest") }} -
<b>{{ $t("translation.signIn") }}</b>
</a>
</li>
<li v-if="logged" class="nav-item dropdown">
<a href="javascript:;" class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="notification">22</span>
<icon name="gear"></icon>{{ $t("translation.hello") }} {{ currentUserFirstName }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<router-link v-if="isAdmin" class="dropdown-item" to="/admin/dashboard">{{ $t("translation.siteManagement") }}</router-link>
<router-link class="dropdown-item" to="/dashboard">{{ $t("translation.dashboardManagement") }}</router-link>
<router-link class="dropdown-item" to="/notifications">{{ $t("translation.systemMsg") }}</router-link>
<router-link class="dropdown-item" to="/">{{ $t("translation.shareSite") }}</router-link>
<a class="dropdown-item" href="javascript:;" @click="logout">{{ $t("translation.logout") }}</a>
</div>
</li>
</ul>
</div>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<router-link to="/" class="navbar-brand"></router-link>
</nav>
<transition name="slide-fade" mode="out-in">
<router-view></router-view>
</transition>
<div class="col-12 footer-wrap" :class=" { 'landing-page' : isLandingPage, 'lease-page' : isLeaseShowPage }">
<div class="row">
<div class="col-md-2">
<ul>
<router-link to="/" tag="li">
<router-link to="/#">עמוד הבית</router-link>
</router-link>
<li><a href="/#about">עלינו</a></li>
<li><a href="/#faq">שאלות ותשובות</a></li>
<li><a href="/#">שותפים עסקיים</a></li>
<li><a href="/#contactUs">צור קשר</a></li>
</ul>
</div>
<div class="col-md-2">
<ul>
<router-link to="/" tag="li">
<router-link to="/">{{ $t("translation.insurance") }}</router-link>
</router-link>
<template v-for="item in footerLinks[constants.TYPE_INSURANCE]">
<router-link to="/" tag="li">
<router-link :to="`/page/${item.link}`"> {{ item.name }}</router-link>
</router-link>
</template>
</ul>
</div>
<div class="col-md-2">
<ul>
<router-link to="/" tag="li">
<router-link to="/lease/step1">{{ $t("translation.lease") }}</router-link>
</router-link>
<template v-for="item in footerLinks[constants.TYPE_LEASE]">
<router-link to="/" tag="li">
<router-link :to="`/page/${item.link}`"> {{ item.name }}</router-link>
</router-link>
</template>
</ul>
</div>
<div class="col-md-2">
<ul>
<router-link to="/" tag="li">
<router-link to="/">{{ $t("translation.repair") }}</router-link>
</router-link>
<template v-for="item in footerLinks[constants.TYPE_REPAIR]">
<router-link to="/" tag="li">
<router-link :to="`/page/${item.link}`"> {{ item.name }}</router-link>
</router-link>
</template>
</ul>
</div>
<div class="col-md-2 mr-auto pr-0">
<img src="/images/logo-footer.svg" alt="">
</div>
<div class="col-md-12 text-center">
<p>כל הזכויות שמורות לרנטשור בע”מ, 2017</p>
</div>
</div>
</div>
</div>
</template>
<script type="text/babel">
import currentUserMixin from '../mixins/currentUserMixin';
import validations from '../mixins/validations';
import * as types from '../store/mutation-types';
import * as constants from '../libs/constants';
import ShareModal from '../components/lease/ShareModal.vue';
export default {
components: {
ShareModal,
},
mixins: [currentUserMixin, validations],
watch: {
currentUserRoleId() {
this.isAdmin = this.currentUserRoleId === constants.ROLE_SUPER_ADMIN;
},
},
methods: {
auth() {
this.$validator.validateAll('loginForm');
if (!this.errors.any('loginForm')) {
this.progress = true;
this.$store.dispatch('login', {
email: this.currentUserEmail,
password: this.currentUserPassword,
}).then((json) => {
this.$store.commit(types.LOGIN, { currentUserToken: json.token });
this.$store.commit(types.CURRENT_USER_ROLE_ID, {
currentUserRoleId: json.role_id,
});
this.$store.dispatch('getCurrentUser', {
success: () => {
this.progress = false;
this.closeSignInModal();
this.$router.push(this.$route.query.redirect || { name: 'dashboard' });
},
});
}).catch(() => {
this.progress = false;
this.$validator.flag('loginForm.password', { invalid: true, valid: false });
this.$validator.flag('loginForm.email', { invalid: true, valid: false });
this.errors.add({
field: 'password',
scope: 'loginForm',
msg: 'Wrong credentials or user blocked',
});
});
}
},
register() {
this.$validator.validateAll('registerForm');
if (!this.errors.any('registerForm')) {
this.$store.dispatch('register', {
first_name: this.currentUserFirstName,
last_name: this.currentUserLastName,
email: this.currentUserEmail,
phone: this.currentUserPhone,
password: this.currentUserPassword,
password_confirmation: this.currentUserPasswordConfirmation,
}).then((json) => {
if (json.status === 1) {
this.closeSignUpModal();
this.openSignInModal();
this.$store.commit(types.CURRENT_USER_OBJECT, {
currentUser: {
firstName: '',
lastName: '',
phone: '',
email: this.currentUserEmail,
password: '',
passwordConfirmation: '',
},
});
}
}).catch((json) => {
if (json.status === 0) {
this.errors.add({
field: 'email',
msg: json.error.email[0],
scope: 'registerForm',
});
this.$validator.flag('registerForm.email', { invalid: true, valid: false });
}
});
}
},
passwordEmail() {
this.$validator.validateAll('passwordEmailForm');
if (!this.errors.any('passwordEmailForm')) {
this.progress = true;
this.$store.dispatch('passwordEmail', {
email: this.currentUserEmail,
}).then(() => {
this.progress = false;
this.$store.dispatch('showMessageModal', {
title: this.$t('translation.resetLinkSentTitle'),
text: this.$t('translation.resetLinkSentText'),
});
}).catch(() => {
this.progress = false;
this.$validator.flag('passwordEmailForm.email', { invalid: true, valid: false });
this.errors.add({
field: 'email',
scope: 'passwordEmailForm',
msg: this.$t('translation.userNotExist'),
});
});
}
},
resetPassword() {
this.$validator.validateAll('resetPasswordForm');
if (!this.errors.any('resetPasswordForm')) {
this.progress = true;
this.$store.dispatch('resetPassword', {
email: this.currentUserEmail,
password: this.currentUserPassword,
password_confirmation: this.currentUserPasswordConfirmation,
token: this.$route.params.token,
}).then(() => {
this.progress = false;
this.$toast.success({
title: this.$t('translation.success'),
message: this.$t('translation.passwordHasBeenChanged'),
});
this.$router.push('/login');
}).catch(() => {
this.progress = false;
this.$validator.flag('resetPasswordForm.email', { invalid: true, valid: false });
this.errors.add({
field: 'email',
scope: 'resetPasswordForm',
msg: this.$t('translation.resetPasswordError'),
});
});
}
},
lang(data) {
localStorage.setItem('locale', data);
this.$i18n.locale = data;
this.currentLang = data;
this.$validator.setLocale(data);
},
logout() {
this.$store.dispatch('logout', {
success: () => {
this.$router.push('/');
},
});
},
clearError(event) {
this.$validator.flag(`registerForm.${event.target.name}`, { invalid: false });
this.errors.remove(event.target.name, 'registerForm');
},
clearSignInError() {
this.$validator.flag('loginForm.email', { invalid: false });
this.$validator.flag('loginForm.password', { invalid: false });
this.errors.remove('password', 'loginForm');
},
clearPasswordEmailError() {
this.$validator.flag('passwordEmailForm.email', { invalid: false });
this.errors.remove('email', 'passwordEmailForm');
},
clearResetPasswordError(event) {
this.$validator.flag(`resetPasswordForm.${event.target.name}`, { invalid: false });
this.errors.remove(event.target.name, 'resetPasswordForm');
},
closeAllModal() {
this.$store.dispatch('hideAllModal');
},
openSignUpModal() {
this.$store.dispatch('showSignUpModal');
},
closeSignUpModal() {
this.$store.dispatch('hideSignUpModal');
},
openSignInModal() {
this.$store.dispatch('showSignInModal');
},
closeSignInModal() {
this.$store.dispatch('hideSignInModal');
},
showPasswordEmail() {
this.$store.dispatch('showPasswordEmailModal');
},
closePasswordEmail() {
this.$store.dispatch('hidePasswordEmailModal');
},
showResetPassword() {
this.$store.dispatch('showResetPasswordModal');
},
closeResetPassword() {
this.$store.dispatch('hideResetPasswordModal');
},
closeResetPassword2() {
console.log('WAT??');
},
showConfirmModal() {
this.$store.dispatch('showConfirmModal', {
title: 'Remove collaborator',
text: 'Are you sure?',
});
},
closeConfirmModal() {
this.$store.dispatch('hideConfirmModal');
},
closeCollaborators() {
this.$store.dispatch('hideCollaborators');
},
closeMessageModal() {
this.$store.dispatch('hideMessageModal');
},
},
data() {
return {
constants,
currentLang: (localStorage.getItem('locale') === null) ? 'en' : localStorage.getItem('locale'),
progress: false,
isAdmin: false,
footerLinks: [],
};
},
mounted() {
this.$store.dispatch('getFooterLinks', {
success: (data) => {
this.footerLinks = data;
},
});
},
computed: {
isLandingPage() {
return (this.$route.name === 'landing');
},
isLeaseShowPage() {
return (this.$route.name === 'leaseShow');
},
},
};
</script>
<style src="cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css"></style>
<style lang="scss">
.slide-fade-enter-active {
transition: all .2s ease;
}
.slide-fade-leave-active {
transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-active {
transform: translateX(10px);
opacity: 0;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment