mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/portal.git
synced 2026-08-19 04:23:59 +00:00
436 lines
48 KiB
Vue
436 lines
48 KiB
Vue
<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, you’re 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, you’re 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>
|