mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
omair saleh
307 lines
41 KiB
Vue
307 lines
41 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col p-r-0">
|
|
<div class="scrollable">
|
|
<div class="row no-margin">
|
|
<div class="col">
|
|
<div class="row animated fadeInDownBig">
|
|
<div class="col">
|
|
<div class="row" v-show="step === 1">
|
|
<div class="col">
|
|
<div class="row m-b-30">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col p-l-50">
|
|
<p class="bold fs-12 text-success">To start, how may we address you?</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row animated fadeInUpBig">
|
|
<div class="col bg-white b-b b-t b-grey animated" :class="[{'shake': $v.parameters.name.$error}]" :style="[$v.parameters.name.$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">
|
|
<span class="input-group-addon no-border">
|
|
<i class="fa fa-id-badge fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>
|
|
</span>
|
|
<input v-model="parameters.name" placeholder="Full Name (as per IC)" 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.name" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-30 animated fadeInUpBig">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col p-l-50">
|
|
<p class="bold fs-12 text-success">Select an account type from one of the options below</p>
|
|
</div>
|
|
</div>
|
|
<div class="row text-center fs-10">
|
|
<div class="col p-l-50">
|
|
<div class="row">
|
|
<div class="col-auto p-r-0">
|
|
<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 === 2, 'text-primary': parameters.type === 2, 'b-grey': parameters.type !== 2 }" @click="parameters.type = 2">
|
|
<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 === 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 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-30" v-show="parameters.type === 2">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col p-l-50">
|
|
<p class="bold fs-12 text-success">What is your organization name?</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row animated fadeInUpBig">
|
|
<div class="col bg-white b-b b-t b-grey animated" :class="[{'shake': $v.parameters.company_name.$error}]" :style="[$v.parameters.company_name.$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">
|
|
<span class="input-group-addon no-border">
|
|
<i class="fa fa-id-badge fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>
|
|
</span>
|
|
<input v-model="parameters.company_name" placeholder="Your Company Name" 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.company_name" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-30 align-items-center">
|
|
<div class="col-auto p-l-0 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="nextStep()">Next <i class="fa fa-chevron-right fs-13"></i></div>
|
|
</div>
|
|
<div class="col animated fadeInRightBig slow">
|
|
<small class="font-lato muted fs-10 pointer" @click="$store.dispatch('toggleSection', {name: 'registrationForm', status: false})" style=" letter-spacing: 2px; ">I already have an account</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row animated fadeInUpBig" v-show="step === 2">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col p-l-50">
|
|
<p class="bold fs-12 text-success">To help us server you better, please provide us with your contact information</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col bg-white b-b b-t b-grey animated" :class="[{'shake': $v.parameters.phone.$error}]" :style="[$v.parameters.phone.$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">
|
|
<span class="input-group-addon no-border">
|
|
<i class="fa fa-mobile fs-16 fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>
|
|
</span>
|
|
<input v-model="parameters.phone" placeholder="Phone Number" 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.phone" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col bg-white b-b b-t b-grey animated" :class="[{'shake': $v.parameters.wechat_id.$error}]" :style="[$v.parameters.wechat_id.$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">
|
|
<span class="input-group-addon no-border">
|
|
<i class="fa fa-weixin fa-fw p-l-15 p-t-20" style="padding-right: 22px;margin-left: -4px;"></i>
|
|
</span>
|
|
<input v-model="parameters.wechat_id" placeholder="wechat_id ID" 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.wechat_id" 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">
|
|
<div class="col p-l-50">
|
|
<p class="bold fs-12 text-success">Finally, Help us secure your account</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col bg-white b-b b-t b-grey animated" :class="[{'shake': $v.parameters.password.$error}]" :style="[$v.parameters.password.$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">
|
|
<span class="input-group-addon no-border">
|
|
<i class="fa fa-lock fs-16 fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>
|
|
</span>
|
|
<input type="password" v-model="parameters.password" placeholder="Password" 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.password" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col bg-white b-b b-t b-grey animated" :class="[{'shake': $v.parameters.confirm_password.$error}]" :style="[$v.parameters.confirm_password.$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">
|
|
<span class="input-group-addon no-border">
|
|
<i class="fa fa-lock fa-fw p-l-15 p-t-20" style="padding-right: 22px;margin-left: -4px;"></i>
|
|
</span>
|
|
<input type="password" v-model="parameters.confirm_password" placeholder="Confirm password" 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.confirm_password" 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 p-l-0 animated fadeInLeftBig slow">
|
|
<a>
|
|
<div class="b-t b-b b-r b-success bg-success all-caps text-white p-t-15 p-b-15 p-l-50 p-r-50 bold font-lato pointer pointer" @click="submit(route('api.account.authentication.registration'), 'post', section, false, false)" style="letter-spacing: 8px;"><i class="fa fa-check fs-13"></i> Complete</div>
|
|
</a>
|
|
</div>
|
|
<div class="col animated fadeInRightBig slow">
|
|
<small class="font-lato muted fs-10 pointer" @click="step = 1" style=" letter-spacing: 2px; ">Go Back</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { required, email, sameAs, requiredIf, numeric } from "vuelidate/lib/validators";
|
|
import request from '../../../mixins/requestMixin'
|
|
|
|
export default {
|
|
props: {
|
|
section:{
|
|
type: String,
|
|
required: true
|
|
},
|
|
email: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
rules () {
|
|
return this.step === 1 ? {
|
|
name: {required},
|
|
type: {required},
|
|
company_name: { required: requiredIf(() => {
|
|
return this.parameters.type === 2;
|
|
})
|
|
},
|
|
phone: {},
|
|
wechat_id: {},
|
|
password: {},
|
|
confirm_password: {}
|
|
|
|
}
|
|
: {
|
|
name: {required},
|
|
type: {required},
|
|
company_name: {
|
|
required: this.type === 2
|
|
},
|
|
phone: { required, numeric },
|
|
wechat_id: {},
|
|
password: { required },
|
|
confirm_password: { sameAsPassword: sameAs('password') }
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
step: 1,
|
|
parameters: {
|
|
email: this.email,
|
|
name: '',
|
|
type: 2,
|
|
company_name: '',
|
|
phone: '',
|
|
wechat_id: '',
|
|
password: '',
|
|
confirm_password: ''
|
|
}
|
|
};
|
|
},
|
|
validations() {
|
|
return {
|
|
parameters: this.rules
|
|
}
|
|
},
|
|
watch: {
|
|
'email': function() {
|
|
this.parameters.email = this.email;
|
|
}
|
|
},
|
|
methods:{
|
|
nextStep(){
|
|
if(this.validate()){
|
|
this.$v.$reset();
|
|
this.step += 1;
|
|
}
|
|
},
|
|
successHandler(response){
|
|
localStorage.setItem('user-token', response.payload.access_token);
|
|
this.$store.dispatch('userAuthentication', {access_token: response.payload.access_token});
|
|
|
|
this.error = '';
|
|
this.$store.dispatch('toggleSection', {name: 'loginSuccess', status: true})
|
|
setTimeout(function(){
|
|
window.location.href = response.payload.redirect_url;
|
|
}, 2000);
|
|
},
|
|
errorHandler(error){
|
|
|
|
}
|
|
},
|
|
mixins: [request]
|
|
}
|
|
|
|
</script> |