Files
portal/resources/assets/vue/components/authentication/sections/LoginSectionComponent.vue
T
2021-07-10 23:16:22 +08:00

436 lines
48 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="row">
<div class="col p-r-0">
<transition-component key="2" group enter-class="animated fadeInRightBig faster" leave-class="animated fadeOutUpBig" v-show="!$store.getters.isLoading('loginSection')">
<!-- <div class="row" key="1" v-show="!$store.getters.isShowing('loginForm') && !$store.getters.isShowing('registrationForm')">-->
<!-- <div class="col p-r-0">-->
<!-- <div class="row m-l-0">-->
<!-- <div class="col p-l-50">-->
<!-- <h5 class="font-lato light animated fadeInRightBig slow" style=" line-height: 50px; letter-spacing: 5px; ">Hi There!</h5>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="row m-l-0 m-b-20 animated fadeInRightBig slow">-->
<!-- <div class="col p-l-50">-->
<!-- <p class="muted font-lato light lh-25" style="letter-spacing: 2px; ">Enter your email address to <b>register</b>/<b>login</b>.</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="row no-margin">-->
<!-- <div class="col">-->
<!-- <div class="row m-b-20 animated fadeInUpBig fast" v-if="error">-->
<!-- <div class="col p-l-50">-->
<!-- <small class="bold fs-10 text-danger">{{error}}</small>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="row animated fadeInDownBig">-->
<!-- <div class="col b-t b-b b-grey animated" :class="[{'shake': $v.parameters.email.$error}]" :style="[$v.parameters.email.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">-->
<!-- <div class="row align-items-center">-->
<!-- <div class="col pl-md-0 pr-md-0 bg-white">-->
<!-- <div class="input-group transparent b-grey b-t b-b">-->
<!-- <span class="input-group-addon no-border">-->
<!-- <i class="fa fa-user-o fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>-->
<!-- </span>-->
<!-- <input placeholder="My Email Address" v-model.trim="parameters.email" class="form-control no-border bg-white p-t-35 p-b-35 p-l-0 p-r-0">-->
<!-- <validation-error-component :validator="$v.parameters.email" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="row m-t-30 align-items-center">-->
<!-- <div class="col-auto animated fadeInLeftBig slow">-->
<!-- <div class="b-t b-b b-r b-primary bg-transparent all-caps text-primary p-t-15 p-b-15 p-l-50 p-r-50 bold font-lato pointer" style="letter-spacing: 8px;" @click="submit(route('api.account.authentication.authenticate.email.check'), 'post', section, false, false)">Next <i class="fa fa-chevron-right fs-13"></i></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="row" key="2" v-show="$store.getters.isShowing('loginForm')" >-->
<!-- <div class="col all-caps">-->
<!-- <div class="row m-l-0">-->
<!-- <div class="col p-l-50">-->
<!-- <h5 class="font-lato light lh-40 animated fadeInLeftBig slow" style="letter-spacing: 5px; ">Welcome Back!</h5>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="row m-l-0 m-b-20 animated fadeInRightBig slow">-->
<!-- <div class="col p-l-50">-->
<!-- <p class="muted font-lato light lh-25" style="letter-spacing: 2px; ">Looks like you already have an account with us.</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <login-form-component section="loginSection" :email="parameters.email"></login-form-component>-->
<!-- </div>-->
<!-- </div>-->
<!-- The first step -->
<div class="col bg-light" key="3" v-show="!$store.getters.isShowing('registrationForm')">
<div class="login d-flex align-items-center py-5">
<!-- content-->
<div class="container">
<div class="row">
<div class="col-lg-10 col-xl-7 mx-auto">
<div class="mb-4 text-center">
<!--begin::Logo-->
<img
src="/images/cief-dark.png"
class="w-50 mb-4 py-2"
alt="img"
/>
<!--end::Logo-->
<h3 class="bold text-danger-dark ">Register Your Account!</h3>
<p class="bold text-muted mb-4">If you are new user.</p>
</div>
<form>
<div class="form-group mb-3">
<input id="inputEmail" type="email"
placeholder="Email address"
required="" autofocus=""
class="form-control border-0 shadow-sm px-4">
</div>
<div class="form-group mb-3">
<input id="inputPassword" type="password"
placeholder="Password" required=""
class="form-control border-0 shadow-sm px-4 text-primary">
</div>
<div class="form-group clearfix">
<div
class="checkbox-custom pull-left">
<input type="checkbox" id="inputCheckbox" name="remember">
<label for="inputCheckbox" class="fs-10 text-capitalize p-l-10"
style="vertical-align: middle;">
Click here to accept our <span class="text-danger">
Terms & Privacy Policy
</span></label>
</div>
</div>
<!--begin::Action-->
<div class="text-center pt-4">
<button type="submit"
class="btn btn-danger btn-lg mb-4 shadow-sm text-uppercase bold">
Sign up
</button>
<div class="mb-4 text-center text-muted fs-10">
<span>or</span>
<span>sign up with</span>
</div>
<div class="social">
<a class="btn btn-rounded" href="#">
<i class="fa fa-facebook-f" aria-hidden="true"></i>
</a>
<a class="btn btn-rounded" href="#">
<i class="fa fa-google" aria-hidden="true"></i>
</a>
<a class="btn btn-rounded" href="#">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</div>
<div
class="text-center justify-content-between mt-5">
<p class="fs-12">Already have an account?
<a href="#" class="text-danger bold">Login here</a></p>
</div>
</div>
<!--end::Action-->
</form>
</div>
</div>
</div><!-- End -->
</div>
</div><!-- End -->
<!-- The second step -->
<div class="col bg-light" key="3" v-show="!$store.getters.isShowing('registrationForm')">
<div class="login d-flex align-items-center py-5">
<!-- content-->
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto">
<div class="mb-4 text-center">
<h3 class="bold fs-15 text-danger-dark">Welcome on board, youre just 5 minutes
away from your order</h3>
<p class="bold text-muted mb-4">Please fill in the form below:</p>
<!--begin::account type-->
<p class="bold fs-12 text-secondary">Select an account type</p>
<div class="row justify-content-center">
<div class="col-auto mb-3">
<div class="b-a b-grey bg-white p-t-20 p-b-20 p-l-45 p-r-45 pointer"
:class="{ 'b-primary': parameters.type === 1, 'text-primary': parameters.type === 1, 'b-grey': parameters.type !== 1 }"
@click="parameters.type = 1">
<div class="m-b-15">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="45" height="45"
viewBox="0 0 172 172"
style=" fill:#000000;">
<g fill="none" fill-rule="nonzero" stroke="none"
stroke-width="1" stroke-linecap="butt"
stroke-linejoin="miter" stroke-miterlimit="10"
stroke-dasharray="" stroke-dashoffset="0"
font-family="none" font-weight="none" font-size="none"
text-anchor="none" style="mix-blend-mode: normal">
<path d="M0,172v-172h172v172z" fill="none"></path>
<g>
<path
d="M163.9375,5.375h-94.0625v43h-17.46875l-34.9375,13.4375v108.84375h61.8125v-4.03125h84.65625z"
fill="#ffffff"></path>
<path
d="M163.9375,170.65625c-2.28438,0 -4.03125,-1.74687 -4.03125,-4.03125v-157.21875h-86v157.21875c0,2.28438 -1.74688,4.03125 -4.03125,4.03125c-2.28437,0 -4.03125,-1.74687 -4.03125,-4.03125v-161.25c0,-2.28438 1.74688,-4.03125 4.03125,-4.03125h94.0625c2.28438,0 4.03125,1.74687 4.03125,4.03125v161.25c0,2.28438 -1.74687,4.03125 -4.03125,4.03125z"
fill="#444b54"></path>
<path
d="M120.9375,170.65625h-8.0625c-2.28437,0 -4.03125,-1.74687 -4.03125,-4.03125v-24.1875c0,-2.28438 1.74688,-4.03125 4.03125,-4.03125h8.0625c2.28437,0 4.03125,1.74687 4.03125,4.03125v24.1875c0,2.28438 -1.74688,4.03125 -4.03125,4.03125zM48.375,170.65625h-8.0625c-2.28437,0 -4.03125,-1.74687 -4.03125,-4.03125v-24.1875c0,-2.28438 1.74688,-4.03125 4.03125,-4.03125h8.0625c2.28438,0 4.03125,1.74687 4.03125,4.03125v24.1875c0,2.28438 -1.74687,4.03125 -4.03125,4.03125zM17.46875,170.65625c-2.28437,0 -4.03125,-1.74687 -4.03125,-4.03125v-104.8125c0,-1.6125 1.075,-3.225 2.55312,-3.7625l34.9375,-13.4375c2.01563,-0.80625 4.43437,0.26875 5.24062,2.28438c0.80625,2.01563 -0.26875,4.43437 -2.28438,5.24062l-32.38437,12.49688v101.99063c0,2.28438 -1.74687,4.03125 -4.03125,4.03125z"
fill="#444b54"></path>
<path
d="M139.75,65.84375c-0.26875,0 -0.5375,0 -0.80625,-0.13438c-0.26875,0 -0.5375,-0.13437 -0.80625,-0.26875c-0.26875,-0.13438 -0.40312,-0.26875 -0.67187,-0.40313c-0.26875,-0.13437 -0.40312,-0.26875 -0.67187,-0.5375c-0.80625,-0.80625 -1.20938,-1.74687 -1.20938,-2.82187c0,-0.26875 0,-0.5375 0.13438,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40312 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40312 0.5375,-0.67187c0.26875,-0.26875 0.40313,-0.40312 0.67188,-0.5375c0.26875,-0.13437 0.40313,-0.26875 0.67188,-0.40312c0.26875,-0.13437 0.5375,-0.13437 0.80625,-0.26875c1.34375,-0.26875 2.6875,0.13438 3.62813,1.075c0.13437,0.13438 0.40312,0.40312 0.5375,0.67188c0.13438,0.26875 0.26875,0.40312 0.40312,0.67188c0.13438,0.26875 0.13438,0.5375 0.26875,0.80625c0,0.26875 0.13438,0.5375 0.13438,0.80625c0,1.075 -0.40313,2.15 -1.20938,2.82187c-0.13437,0.13438 -0.40312,0.40313 -0.5375,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c-0.5375,0.26875 -0.80625,0.26875 -1.075,0.26875zM112.875,61.8125c0,-2.28438 1.74688,-4.03125 4.03125,-4.03125v0c2.28437,0 4.03125,1.74687 4.03125,4.03125v0c0,2.28437 -1.74688,4.03125 -4.03125,4.03125v0c-2.28437,0 -4.03125,-1.74688 -4.03125,-4.03125zM94.0625,65.84375c-1.075,0 -2.15,-0.40313 -2.82187,-1.20937c-0.80625,-0.67188 -1.20938,-1.74688 -1.20938,-2.82188c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13437,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40312 0.40312,-0.67187c0.13437,-0.26875 0.26875,-0.40312 0.5375,-0.67187c0.94062,-0.94063 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13437 0.40312,0.26875 0.5375,0.5375c0.13438,0.13437 0.40313,0.40312 0.5375,0.67188c0.13437,0.26875 0.26875,0.40312 0.40313,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,1.075 -0.40312,2.15 -1.20937,2.82187c-0.13438,0.13438 -0.40313,0.40313 -0.5375,0.5375c-0.26875,0.13437 -0.40313,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c-0.5375,-0.13438 -0.80625,-0.13438 -1.075,-0.13438zM139.75,45.6875c-0.26875,0 -0.5375,0 -0.80625,-0.13437c-0.26875,0 -0.5375,-0.13438 -0.80625,-0.26875c-0.26875,-0.13438 -0.40312,-0.26875 -0.67187,-0.40312c-0.26875,-0.13438 -0.40312,-0.26875 -0.67187,-0.5375c-0.13438,-0.13437 -0.40312,-0.40312 -0.5375,-0.67187c-0.13437,-0.26875 -0.26875,-0.40312 -0.40312,-0.67187c-0.13437,-0.26875 -0.13437,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13437,-0.5375 -0.13437,-0.80625c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13438,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.26875,-0.26875 0.40312,-0.40313 0.67188,-0.5375c0.26875,-0.13438 0.40312,-0.26875 0.67188,-0.40313c0.26875,-0.13438 0.5375,-0.13438 0.80625,-0.26875c1.34375,-0.26875 2.6875,0.13437 3.62813,1.075c0.80625,0.80625 1.20938,1.74688 1.20938,2.82188c0,0.26875 0,0.5375 -0.13438,0.80625c0,0.26875 -0.13437,0.5375 -0.26875,0.80625c-0.13437,0.26875 -0.26875,0.5375 -0.40312,0.67187c-0.13437,0.26875 -0.26875,0.40312 -0.5375,0.67188c-0.13438,0.13438 -0.40313,0.40312 -0.5375,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13437 -0.5375,0.13437 -0.80625,0.26875c-0.13438,0.40313 -0.40313,0.40313 -0.67188,0.40313zM112.875,41.65625c0,-2.28437 1.74688,-4.03125 4.03125,-4.03125v0c2.28437,0 4.03125,1.74688 4.03125,4.03125v0c0,2.28438 -1.74688,4.03125 -4.03125,4.03125v0c-2.28437,0 -4.03125,-1.74687 -4.03125,-4.03125zM94.0625,45.6875c-1.075,0 -2.15,-0.40312 -2.82187,-1.20938c-0.80625,-0.67187 -1.20938,-1.74687 -1.20938,-2.82187c0,-1.075 0.40313,-2.15 1.20938,-2.82187c0.94062,-0.94063 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13438 0.5375,0.26875 0.67188,0.40313c0.26875,0.13437 0.40313,0.26875 0.5375,0.5375c0.80625,0.80625 1.20938,1.74688 1.20938,2.82188c0,1.075 -0.40312,2.15 -1.20938,2.82187c-0.13437,0.13437 -0.40312,0.40312 -0.5375,0.5375c-0.26875,0.13438 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c-0.26875,-0.13437 -0.5375,-0.13437 -0.80625,-0.13437zM139.75,86c-0.26875,0 -0.5375,0 -0.80625,-0.13438c-0.26875,0 -0.5375,-0.13437 -0.80625,-0.26875c-0.26875,-0.13438 -0.40312,-0.26875 -0.67187,-0.40313c-0.26875,-0.13437 -0.40312,-0.26875 -0.67187,-0.5375c-0.13438,-0.13438 -0.40312,-0.40313 -0.5375,-0.5375c-0.13437,-0.26875 -0.26875,-0.40313 -0.40312,-0.67187c-0.13437,-0.26875 -0.13437,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13437,-0.5375 -0.13437,-0.80625c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13438,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.26875,-0.26875 0.40312,-0.40313 0.67188,-0.5375c0.26875,-0.13438 0.40312,-0.26875 0.67188,-0.40313c0.26875,-0.13438 0.5375,-0.13438 0.80625,-0.26875c0.5375,-0.13438 1.075,-0.13438 1.6125,0c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13438 0.5375,0.26875 0.67188,0.40313c0.26875,0.13437 0.40312,0.26875 0.5375,0.5375c0.13438,0.13438 0.40312,0.40312 0.5375,0.67188c0.13437,0.26875 0.26875,0.40312 0.40312,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,1.075 -0.40312,2.15 -1.20937,2.82188c-0.80625,0.94062 -1.88125,1.34375 -2.95625,1.34375zM112.875,81.96875c0,-2.28437 1.74688,-4.03125 4.03125,-4.03125v0c2.28437,0 4.03125,1.74688 4.03125,4.03125v0c0,2.28437 -1.74688,4.03125 -4.03125,4.03125v0c-2.28437,0 -4.03125,-1.74688 -4.03125,-4.03125zM94.0625,86c-1.075,0 -2.15,-0.40313 -2.82187,-1.20937c-0.13437,-0.13438 -0.40313,-0.40313 -0.5375,-0.5375c-0.13437,-0.26875 -0.26875,-0.40312 -0.40313,-0.67187c-0.13437,-0.26875 -0.13437,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13437,-0.5375 -0.13437,-0.80625c0,-1.075 0.40312,-2.15 1.20938,-2.82188c0.94062,-0.94062 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13438 0.5375,0.26875 0.67188,0.40313c0.26875,0.13437 0.40313,0.26875 0.5375,0.5375c0.80625,0.80625 1.20938,1.74688 1.20938,2.82188c0,0.26875 0,0.5375 -0.13437,0.80625c0,0.26875 -0.13437,0.5375 -0.26875,0.80625c-0.13437,0.26875 -0.26875,0.5375 -0.40313,0.67188c-0.13437,0.26875 -0.26875,0.40313 -0.5375,0.5375c-0.13437,0.13438 -0.40312,0.40313 -0.5375,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c0,-0.13437 -0.26875,-0.13437 -0.5375,-0.13437z"
fill="#71c2ff"></path>
<g fill="#71c2ff">
<path
d="M139.75,106.15625c-1.075,0 -2.15,-0.40313 -2.82188,-1.20938c-0.13437,-0.13437 -0.40312,-0.40312 -0.5375,-0.5375c-0.13438,-0.26875 -0.26875,-0.40312 -0.40312,-0.67187c-0.13438,-0.26875 -0.13438,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13438,-0.5375 -0.13438,-0.80625c0,-0.26875 0,-0.5375 0.13438,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c1.47813,-1.47812 4.16563,-1.47812 5.64375,0c0.13438,0.13437 0.40312,0.40312 0.5375,0.67188c0.13437,0.26875 0.26875,0.40312 0.40312,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,0.26875 0,0.5375 -0.13437,0.80625c0,0.26875 -0.13438,0.5375 -0.26875,0.80625c-0.13438,0.26875 -0.26875,0.5375 -0.40312,0.67188c-0.13438,0.26875 -0.26875,0.40313 -0.5375,0.5375c-0.67187,0.80625 -1.74688,1.20938 -2.82188,1.20938zM112.875,102.125c0,-2.28437 1.74688,-4.03125 4.03125,-4.03125v0c2.28437,0 4.03125,1.74688 4.03125,4.03125v0c0,2.28437 -1.74688,4.03125 -4.03125,4.03125v0c-2.28437,0 -4.03125,-1.74688 -4.03125,-4.03125zM94.0625,106.15625c-1.075,0 -2.15,-0.40313 -2.82187,-1.20938c-0.80625,-0.67187 -1.20938,-1.74687 -1.20938,-2.82187c0,-1.075 0.40313,-2.15 1.20938,-2.82187c0.94062,-0.94063 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13437 0.40313,0.26875 0.5375,0.5375c0.80625,0.80625 1.20938,1.74688 1.20938,2.82187c0,1.075 -0.40312,2.15 -1.20938,2.82187c-0.13437,0.13438 -0.40312,0.40313 -0.5375,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40313c-0.26875,0.13437 -0.5375,0.13437 -0.80625,0.26875c-0.26875,-0.13438 -0.5375,-0.13438 -0.80625,-0.13438z"></path>
</g>
<g fill="#71c2ff">
<path
d="M139.75,126.3125c-1.075,0 -2.15,-0.40313 -2.82188,-1.20938c-0.13437,-0.13437 -0.40312,-0.40312 -0.5375,-0.5375c-0.13438,-0.26875 -0.26875,-0.40312 -0.40312,-0.67187c-0.13438,-0.26875 -0.13438,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13438,-0.5375 -0.13438,-0.80625c0,-0.26875 0,-0.5375 0.13438,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c1.47813,-1.47812 4.16563,-1.47812 5.64375,0c0.80625,0.80625 1.20938,1.74687 1.20938,2.82187c0,0.26875 0,0.5375 -0.13438,0.80625c0,0.26875 -0.13437,0.5375 -0.26875,0.80625c-0.13437,0.26875 -0.26875,0.5375 -0.40312,0.67188c-0.13437,0.26875 -0.26875,0.40313 -0.5375,0.5375c-0.5375,0.94062 -1.6125,1.34375 -2.6875,1.34375zM112.875,122.28125c0,-2.28437 1.74688,-4.03125 4.03125,-4.03125v0c2.28437,0 4.03125,1.74688 4.03125,4.03125v0c0,2.28437 -1.74688,4.03125 -4.03125,4.03125v0c-2.28437,0 -4.03125,-1.74688 -4.03125,-4.03125zM94.0625,126.3125c-1.075,0 -2.15,-0.40313 -2.82187,-1.20938c-0.80625,-0.67187 -1.20938,-1.74687 -1.20938,-2.82187c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13437,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13437,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.94062,-0.94063 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13437 0.40312,0.26875 0.5375,0.5375c0.13438,0.13437 0.40313,0.40313 0.5375,0.67188c0.13437,0.26875 0.26875,0.40313 0.40313,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,1.075 -0.40312,2.15 -1.20937,2.82187c-0.94063,0.67188 -2.01562,1.075 -3.09063,1.075z"></path>
</g>
<g fill="#71c2ff">
<path
d="M139.75,146.46875c-1.075,0 -2.15,-0.40312 -2.82188,-1.20937c-0.13437,-0.13438 -0.40312,-0.40313 -0.5375,-0.5375c-0.13438,-0.26875 -0.26875,-0.40312 -0.40312,-0.67187c-0.13438,-0.26875 -0.13438,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13438,-0.5375 -0.13438,-0.80625c0,-0.26875 0,-0.5375 0.13438,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40312 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40312 0.5375,-0.5375c0.26875,-0.13438 0.40313,-0.40312 0.67188,-0.5375c0.26875,-0.13438 0.40313,-0.26875 0.67188,-0.40312c0.26875,-0.13438 0.5375,-0.13438 0.80625,-0.26875c1.34375,-0.26875 2.6875,0.13438 3.62813,1.075c0.13437,0.13438 0.40312,0.40313 0.5375,0.5375c0.13438,0.26875 0.26875,0.40312 0.40312,0.67188c0.13438,0.26875 0.13438,0.5375 0.26875,0.80625c0,0.26875 0.13438,0.5375 0.13438,0.80625c0,0.26875 0,0.5375 -0.13438,0.80625c0,0.26875 -0.13437,0.5375 -0.26875,0.80625c-0.13437,0.26875 -0.26875,0.5375 -0.40312,0.67188c-0.13437,0.26875 -0.26875,0.40312 -0.5375,0.5375c-0.80625,0.94063 -1.88125,1.34375 -2.95625,1.34375zM94.0625,146.46875c-1.075,0 -2.15,-0.40312 -2.82187,-1.20937c-0.80625,-0.80625 -1.20938,-1.74688 -1.20938,-2.82188c0,-1.075 0.40313,-2.15 1.20938,-2.82188c0.94062,-0.94062 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13438 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13438 0.40313,0.26875 0.5375,0.5375c0.80625,0.80625 1.20938,1.74687 1.20938,2.82187c0,1.075 -0.40312,2.15 -1.20938,2.82188c-0.13437,0.13437 -0.40312,0.40312 -0.5375,0.5375c-0.26875,0.13438 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c-0.26875,-0.13438 -0.5375,-0.13438 -0.80625,-0.13438z"></path>
</g>
<g fill="#71c2ff">
<path
d="M44.34375,86c-1.075,0 -2.15,-0.40313 -2.82187,-1.20937c-0.80625,-0.67187 -1.20938,-1.74688 -1.20938,-2.82188c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.94062,-0.94063 2.28438,-1.34375 3.62813,-1.075c0.26875,0 0.5375,0.13438 0.80625,0.26875c0.26875,0.13438 0.5375,0.26875 0.67188,0.40313c0.26875,0.13438 0.40312,0.26875 0.67188,0.5375c0.13438,0.13438 0.40312,0.40313 0.5375,0.67188c0.13437,0.26875 0.26875,0.40313 0.40312,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,1.075 -0.40312,2.15 -1.20937,2.82187c-0.13438,0.13438 -0.40312,0.40313 -0.67187,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40312c-0.26875,0.13438 -0.5375,0.13438 -0.80625,0.26875c-0.5375,-0.13437 -0.80625,-0.13437 -1.075,-0.13437z"></path>
</g>
<g fill="#71c2ff">
<path
d="M44.34375,106.15625c-1.075,0 -2.15,-0.40313 -2.82187,-1.20938c-0.80625,-0.67187 -1.20938,-1.74687 -1.20938,-2.82187c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13438,-0.5375 0.26875,-0.80625c0.13437,-0.26875 0.26875,-0.40313 0.40312,-0.67187c0.13438,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.94062,-0.94063 2.28438,-1.34375 3.62813,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13437 0.40312,0.26875 0.67188,0.5375c0.13438,0.13437 0.40312,0.40313 0.5375,0.67188c0.13437,0.26875 0.26875,0.40313 0.40312,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13437,0.5375 0.13437,0.80625c0,0.26875 0,0.5375 -0.13437,0.80625c0,0.26875 -0.13438,0.5375 -0.26875,0.80625c-0.13437,0.26875 -0.26875,0.5375 -0.40312,0.67188c-0.13438,0.26875 -0.26875,0.40312 -0.5375,0.5375c-0.13437,0.13438 -0.40312,0.40313 -0.67187,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40313c-0.26875,0.13437 -0.5375,0.13437 -0.80625,0.26875c-0.40313,-0.13438 -0.67187,-0.13438 -0.94063,-0.13438z"></path>
</g>
<g fill="#71c2ff">
<path
d="M44.34375,126.3125c-1.075,0 -2.15,-0.40313 -2.82187,-1.20938c-0.13438,-0.13437 -0.40313,-0.40312 -0.5375,-0.5375c-0.13437,-0.26875 -0.26875,-0.40312 -0.40313,-0.67187c-0.13437,-0.26875 -0.13437,-0.5375 -0.26875,-0.80625c0,-0.26875 -0.13437,-0.5375 -0.13437,-0.80625c0,-0.26875 0,-0.5375 0.13437,-0.80625c0,-0.26875 0.13437,-0.5375 0.26875,-0.80625c0.13438,-0.26875 0.26875,-0.40313 0.40313,-0.67187c0.13437,-0.26875 0.26875,-0.40313 0.5375,-0.67187c0.94062,-0.94063 2.28437,-1.34375 3.62812,-1.075c0.26875,0 0.5375,0.13437 0.80625,0.26875c0.26875,0.13437 0.5375,0.26875 0.67188,0.40312c0.26875,0.13437 0.40312,0.26875 0.67188,0.5375c0.13437,0.13437 0.40312,0.40313 0.5375,0.67188c0.13438,0.26875 0.26875,0.40313 0.40313,0.67188c0.13437,0.26875 0.13437,0.5375 0.26875,0.80625c0,0.26875 0.13438,0.5375 0.13438,0.80625c0,0.26875 0,0.5375 -0.13438,0.80625c0,0.26875 -0.13437,0.5375 -0.26875,0.80625c-0.13438,0.26875 -0.26875,0.5375 -0.40313,0.67188c-0.13437,0.26875 -0.26875,0.40312 -0.5375,0.5375c-0.13438,0.13438 -0.40312,0.40313 -0.67187,0.5375c-0.26875,0.13437 -0.40312,0.26875 -0.67187,0.40313c-0.26875,0.13437 -0.5375,0.13437 -0.80625,0.26875c-0.26875,-0.13438 -0.5375,-0.13438 -0.80625,-0.13438z"></path>
</g>
</g>
</g>
</svg>
</div>
<p class="no-margin bold">Company</p>
</div>
</div>
<div class="col-auto">
<div class="b-a b-grey bg-white p-t-20 p-b-20 p-l-45 p-r-45 pointer"
:class="{ 'b-primary': parameters.type === 0, 'text-primary': parameters.type === 0, 'b-grey': parameters.type !== 0 }"
@click="parameters.type = 0">
<div class="m-b-15">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="45" height="45"
viewBox="0 0 172 172"
style=" fill:#000000;">
<g fill="none" fill-rule="nonzero" stroke="none"
stroke-width="1" stroke-linecap="butt"
stroke-linejoin="miter" stroke-miterlimit="10"
stroke-dasharray="" stroke-dashoffset="0"
font-family="none" font-weight="`none" font-size="none"
text-anchor="none" style="mix-blend-mode: normal">
<path d="M0,172v-172h172v172z" fill="none"></path>
<g id="Layer_1">
<path
d="M116.90625,80.22188c0,17.06563 -13.84063,30.90625 -30.90625,30.90625c-17.06562,0 -30.90625,-13.84062 -30.90625,-30.90625v-36.81875l61.8125,7.39063z"
fill="#ffffff"></path>
<path
d="M135.85313,155.3375c-9.94375,-17.33437 -28.4875,-29.025 -49.85313,-29.025v0c-21.36562,0 -39.90938,11.69063 -49.85312,29.025l0.13437,4.56875h99.4375z"
fill="#dfe8f4"></path>
<path
d="M36.14688,159.36875c-0.67187,0 -1.34375,-0.13438 -2.01562,-0.5375c-1.88125,-1.075 -2.55313,-3.49375 -1.47813,-5.50937c10.88438,-19.08125 31.30938,-31.04063 53.34688,-31.04063c22.0375,0 42.4625,11.95937 53.34688,31.04063c1.075,1.88125 0.40312,4.43437 -1.47813,5.50937c-1.88125,1.075 -4.43437,0.40312 -5.50937,-1.47812c-9.54063,-16.6625 -27.27813,-27.00938 -46.35938,-27.00938c-19.08125,0 -36.81875,10.34688 -46.35937,27.00938c-0.67187,1.20937 -2.01562,2.01563 -3.49375,2.01563zM104.275,39.10313l-0.5375,-0.80625c-3.89688,-5.50937 -10.34687,-8.86875 -17.06562,-8.86875h-11.42187c-17.06563,0 -30.90625,13.84063 -30.90625,30.90625v0c0,2.28437 1.74687,4.03125 4.03125,4.03125h6.9875c0.13437,0 0.13437,0 0.26875,0c15.45313,0 31.175,0 42.4625,-10.07812v0.13437c0.5375,-0.5375 1.075,-0.94063 1.47812,-1.47812c1.47812,-1.6125 4.03125,-1.88125 5.64375,-0.40313c1.74687,1.47813 1.88125,4.16563 0.26875,5.9125c-0.67187,0.67188 -1.20938,1.20938 -1.88125,1.88125c-1.74687,1.74687 -1.075,4.70312 1.20938,5.64375v0c1.34375,0.5375 2.82187,0.80625 4.3,0.94062c2.01563,0.26875 3.62813,1.88125 3.62813,4.03125v9.1375c0,14.24375 -10.75,26.47187 -24.99375,27.4125c-15.45313,1.075 -28.4875,-11.2875 -28.62188,-26.74062c0,-2.15 -1.6125,-4.03125 -3.7625,-4.16563c-2.28438,-0.13438 -4.3,1.74688 -4.3,4.03125c0,19.21563 15.72187,34.9375 34.9375,34.9375c18.67813,0 33.99688,-14.64688 34.9375,-33.19062c0,-0.13438 0,-0.26875 0,-0.40313v-18.8125v-4.03125v-1.34375c0,-9.675 -7.25625,-17.60312 -16.6625,-18.67813z"
fill="#444b54"></path>
</g>
</g>
</svg>
</div>
<p class="no-margin bold">Personal</p>
</div>
</div>
</div>
<!--end::account type-->
</div>
<form>
<h4 class="bold border-bottom border-danger fs-12 mb-3 text-danger-dark">
Personal Details</h4>
<div class="form-group mb-3">
<label for="inputName" style="text-transform: none;">
Full Name As Per ID</label>
<input id="inputName" type="name"
required="" autofocus=""
class="form-control border-0 shadow-sm px-4">
</div>
<div class="form-row">
<div class="form-group col-md-6 mb-3">
<label for="inputPhone" style="text-transform: none;">Phone No.</label>
<input type="text" class="form-control" id="inputPhone">
</div>
<div class="form-group col-md-6 mb-3">
<label for="inputWechat" style="text-transform: none;">Wechat ID</label>
<input type="text" class="form-control" id="inputWechat">
</div>
</div>
<!--begin::Action-->
<div class="text-center pt-4">
<button type="submit"
class="btn btn-danger btn-lg mb-4 shadow-sm text-uppercase bold">
Next
</button>
</div>
<!--end::Action-->
</form>
</div>
</div>
</div><!-- End -->
</div>
</div><!-- End -->
<!-- The third step -->
<div class="col bg-light" key="3" v-show="!$store.getters.isShowing('registrationForm')">
<div class="login d-flex align-items-center py-5">
<!-- content-->
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto">
<div class="mb-4 text-center">
<h3 class="bold fs-15 text-danger-dark">Hang in there, youre just 3 minutes
away from your order</h3>
<p class="bold text-muted mb-4">Please fill in the form below:</p>
</div>
<form>
<h4 class="bold border-bottom border-danger fs-12 mb-3 text-danger-dark">Company
Details</h4>
<div class="form-group mb-3">
<label for="inputComapnyName" style="text-transform: none;">Company
Name</label>
<input id="inputComapnyName" type="company_name"
required="" autofocus=""
class="form-control border-0 shadow-sm px-4">
</div>
<div class="form-row">
<div class="form-group col-md-6 mb-3">
<label for="inputCompanyReg" style="text-transform: none;">Company
Register No.</label>
<input type="text" class="form-control" id="inputCompanyReg">
</div>
<div class="form-group col-md-6 mb-3">
<label for="inputCompanyDocument" style="text-transform: none;">Company
Register Document</label>
<div class="custom-file">
<input type="file" class="custom-file-input"
id="inputCompanyDocument" required>
<label class="custom-file-label" for="inputCompanyDocument"></label>
<div class="invalid-feedback">invalid file</div>
</div>
</div>
</div>
<div class="form-group mb-3">
<label for="inputaddress" style="text-transform: none;">Address</label>
<input id="inputaddress" type="address"
required="" autofocus=""
class="form-control border-0 shadow-sm px-4">
</div>
<div class="form-row">
<div class="form-group col-md-6 mb-3">
<label for="inputcity" style="text-transform: none;">City</label>
<input type="text" class="form-control" id="inputcity">
</div>
<div class="form-group col-md-6 mb-3">
<label for="inputState" style="text-transform: none;">State</label>
<input type="text" class="form-control" id="inputState">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 mb-3">
<label for="inputPostal" style="text-transform: none;">Postcode</label>
<input type="text" class="form-control" id="inputPostal">
</div>
<div class="form-group col-md-6 mb-3">
<label for="inputCountry" style="text-transform: none;">Country</label>
<input type="text" class="form-control" id="inputCountry">
</div>
</div>
<!--begin::Action-->
<div class="row pt-4">
<div class="col-12 d-flex justify-content-center padding-0">
<div class="col-md-6 text-left">
<button type="button"
class="btn btn-info btn-lg mb-4 shadow-sm text-uppercase bold">
Back
</button>
</div>
<div class="col-md-6 text-right">
<button type="submit"
class="btn btn-danger btn-lg mb-4 shadow-sm text-uppercase bold">
Next
</button>
</div>
</div>
</div>
<!--end::Action-->
</form>
</div>
</div>
</div><!-- End -->
</div>
</div><!-- End -->
<!-- Stop this is original form of old design don't touch -->
<div class="row m-t-30" key="3" v-show="!$store.getters.isShowing('registrationForm')" >
<div class="col all-caps">
<div class="row m-b-20 ">
<div class="col p-l-50">
<div class="row m-l-0 align-items-center justify-content-center">
<div class="col">
<h5 class="font-lato light lh-40 animated fadeInLeftBig slow" style="letter-spacing: 5px; ">Create Account</h5>
</div>
</div>
<div class="row m-l-0 animated fadeInRightBig slow">
<div class="col">
<p class="muted font-lato light lh-25" style="letter-spacing: 2px; ">Looks like you are a new user.<br>Let's create a fresh new izyim profile for you.</p>
</div>
</div>
</div>
</div>
<registration-form-component ref="registration" :email="parameters.email" section="loginSection"></registration-form-component>
</div>
</div>
</transition-component>
</div>
</div>
</template>
<script>
import { required, email } from "vuelidate/lib/validators";
import request from '../../../mixins/requestMixin'
export default {
props: {
section:{
type: String,
required: true
}
},
data() {
return {
error: '',
parameters: {
email: ''
}
};
},
validations: {
parameters: {
email: { required, email }
}
},
methods:{
successHandler(){
this.$store.dispatch('toggleSection', {name: 'loginForm', status: true})
},
errorHandler(){
this.$store.dispatch('toggleSection', {name: 'registrationForm', status: true})
}
},
mixins: [request]
}
</script>