<div class="viewport-modal">
<div class="modal-header dialog-header">
<i c8yIcon="c8y-mobile-add"></i>
<h4 translate id="modal-title">Connect smartphone</h4>
</div>
<c8y-stepper
[disableDefaultIcons]="{ edit: true, done: false }"
[customClasses]="['m-l-80', 'm-r-80', 'p-t-16 ', 'p-b-16']"
[useStepLabelsAsTitlesOnly]="true"
linear
id="modal-body"
class="inner-scroll"
>
<cdk-step [label]="connectSmartphoneTitle">
<div class="p-l-24 p-r-24">
<div
class="h4 text-center m-b-24 animated fadeInDown"
style="animation-delay: 0.3s"
>
{{ connectSmartphoneTitle | translate }}
</div>
<div class="row overflow-hidden d-flex">
<div class="col-xs-7 animated fadeInUp" style="animation-delay: 0.5s">
<p class="m-b-16 lead" translate>
Using your smartphone as a source of sensor data is a quick way to start using our IoT
platform.
</p>
<p class="m-b-16 animated fadeInUp" style="animation-delay: 0.7s" translate>
Use this wizard to connect your smartphone to our IoT platform using the Cumulocity
IoT Sensor App.
</p>
<p class="m-b-16 animated fadeInUp" style="animation-delay: 0.9s" translate>
We don't collect any personal data. The only data we retrieve from your phone is
sensor data and anonymized app usage data.
</p>
<p class="m-b-16 animated fadeInUp" style="animation-delay: 1.1s">
<span translate>
Prepare your phone and then click
<strong>Next</strong>
below.
</span>
</p>
</div>
<div class="col-xs-5 no-gutter animated fadeInUp" style="animation-delay: 0.3s">
<svg viewBox="0 0 326 362">
<style type="text/css">
.st12,
.st13 {
fill-rule: evenodd;
clip-rule: evenodd;
}
.st2 {
fill: #fff;
}
.st2,
.st6,
.st7,
.st8 {
fill-rule: evenodd;
clip-rule: evenodd;
}
.st6 {
fill: #d89e66;
}
.st7 {
fill: #2a2b2a;
}
.st8 {
fill: #373737;
}
.st12 {
fill: #f4be84;
}
.st13 {
fill: #ffe5cc;
}
</style>
<g>
<linearGradient
id="SVGID_1_"
gradientUnits="userSpaceOnUse"
x1="-133.0887"
y1="601.1531"
x2="-133.0887"
y2="600.1531"
gradientTransform="matrix(325.8 0 0 -325.8 43523.1992 195855.6719)"
>
<stop offset="0" style="stop-color: #b5eb45" />
<stop offset="1" style="stop-color: #61aa11" />
</linearGradient>
<circle
cx="162.9"
cy="162.9"
r="162.9"
style="fill-rule: evenodd; clip-rule: evenodd; fill: url(#SVGID_1_)"
/>
<g transform="translate(62.053 48.28)">
<g transform="translate(55.31 78.12)">
<defs>
<filter
id="Adobe_OpacityMaskFilter"
filterUnits="userSpaceOnUse"
x="0"
y="36.1"
width="70.4"
height="199.5"
>
<feColorMatrix
type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
/>
</filter>
</defs>
<mask
maskUnits="userSpaceOnUse"
x="0"
y="36.1"
width="70.4"
height="199.5"
id="connect-smartphone-c_2_"
>
<g style="filter: url(#Adobe_OpacityMaskFilter)">
<polygon
id="connect-smartphone-b_2_"
class="st2"
points="0,201.4 70.4,201.4 70.4,0.1 0,0.1 "
/>
</g>
</mask>
<path
d="M0,235.6V36.1l70.4,0v199.5H0z"
style="
mask: url(#connect-smartphone-c_2_);
fill-rule: evenodd;
clip-rule: evenodd;
fill: #f4be84;
"
/>
</g>
<g transform="translate(55.31 126)">
<defs>
<filter
id="Adobe_OpacityMaskFilter_1_"
filterUnits="userSpaceOnUse"
x="0.1"
y="20.1"
width="22.2"
height="167.7"
>
<feColorMatrix
type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
/>
</filter>
</defs>
<mask
maskUnits="userSpaceOnUse"
x="0.1"
y="20.1"
width="22.2"
height="167.7"
id="connect-smartphone-e_2_"
>
<g style="filter: url(#Adobe_OpacityMaskFilter_1_)">
<polygon
id="connect-smartphone-d_2_"
class="st2"
points="0.1,153.5 22.3,153.5 22.3,0.3 0.1,0.3 "
/>
</g>
</mask>
<path
d="M20,187.7l2.3-167.7H0.1v167.7H20z"
style="
mask: url(#connect-smartphone-e_2_);
fill-rule: evenodd;
clip-rule: evenodd;
fill: #d89e66;
"
/>
</g>
<path
class="st6"
d="M70.3,110.9c-2.8,0-5.2-1.3-7.3-3.4L38.6,83.1c-4.2-4.2-4.7-10.5-0.5-14.7c4.2-4.2,10.5-3.7,14.7,0.5
l24.3,24.3c4.2,4.2,4.6,10.6,0.4,14.8C75.4,110.2,73,110.9,70.3,110.9 M90,93.2c-2.9,0-5.9-0.9-8.1-3.1L59.4,64.3
C57.8,62.6,53.6,53,58,48.6c4.4-4.4,10.3-4.4,14.7,0L98,74c4.4,4.4,4.3,11.5,0,15.9C95.8,92.1,92.9,93.2,90,93.2"
/>
<path
class="st7"
d="M126.5,6.2L4.2,127.3c-5.7,5.6-5.7,14.7,0,20.3l47.3,46.8c5.7,5.6,14.9,5.6,20.5,0l122.3-121
c5.7-5.6,5.7-14.7,0-20.3L147.1,6.3C141.4,0.6,132.2,0.6,126.5,6.2"
/>
<path
class="st6"
d="M125.4,47.9c-2.7,0-5.2-1.3-7.3-3.4L93.8,20.3c-4.2-4.2-4.5-10.6-0.4-14.8c4.2-4.2,10.6-3.8,14.8,0.4
L132.5,30c4.2,4.2,4.4,10.7,0.2,14.9C130.6,47.1,128.1,47.9,125.4,47.9"
/>
<path
class="st8"
d="M129.1,4.2L6.8,125.2c-5.7,5.6-5.7,14.7,0,20.3L54,192.3c5.7,5.6,14.9,5.6,20.5,0l122.3-121
c5.7-5.6,5.7-14.7,0-20.3L149.6,4.2C143.9-1.4,134.7-1.4,129.1,4.2"
/>
<path
class="st7"
d="M50.3,157.5c0,4.9-3.9,8.8-8.8,8.8s-8.8-3.9-8.8-8.8c0-4.9,3.9-8.8,8.8-8.8S50.3,152.6,50.3,157.5
M185.2,38.1c-0.5-0.5-1.2-0.5-1.7,0l12.2,12.3c0.5-0.5,0.5-1.2,0-1.7L185.2,38.1z M120.7,12.9c-0.5-0.5-1.2-0.5-1.6,0l-5.6,5.6
c-0.5,0.5-0.5,1.2,0,1.6L120.7,12.9z M166.7,34.5c1,1,2.6,1,3.6,0c1-1,1-2.6,0-3.6c-1-1-2.6-1-3.6,0
C165.7,32,165.7,33.6,166.7,34.5"
/>
<path
d="M80.5,176.3c0,0-57.9-55.6-57.8-55.7L125.3,15.2c0.1-0.1,0.3-0.1,0.4,0l59.1,57L80.5,176.3z"
style="fill-rule: evenodd; clip-rule: evenodd; fill: #1776bf"
/>
<polygon
points="29.2,113.7 22.7,120.6 80.5,176.3 87.2,170 "
style="fill-rule: evenodd; clip-rule: evenodd; fill: #176878"
/>
<path
d="M176.8,80.2l7.9-8l-59.5-57.4c-0.1-0.1-0.3-0.1-0.4,0l-7.9,7.6L176.8,80.2z"
style="fill-rule: evenodd; clip-rule: evenodd; fill: #394852"
/>
<path
class="st12"
d="M189.7,84.5l0.1-0.1l11.3,9l-20.6,21.3l-2.1,2.6c-4.7,5.8-11.4,14-14.6,17.2c-6.1,6.2-10.8,23.2-18.6,31.9
L141,171c-8.9,9.8-15.9,19-16.1,41.8l0,0.8c0,23.1-8.7,2.5-11.2-3.7l-0.6-1.6l3.3-32.5l-5.6,11.5l-33.8,5.3v-0.4
c0-3.1,0.7-22.6,13.8-35.5c11.1-10.9,29.9-17.1,42.3-24.8l0.2-0.2l0,0l45.6-45.9C182,82.8,186.4,82.4,189.7,84.5z M58.2,80.1
c-1.9-1.9-2.6-4.5-2.6-7.4l-0.3-16.9c0-5.8,4.2-10.5,9.9-10.5c5.7,0,9.9,4.7,9.9,10.5l0.3,16.9c0,5.8-4.4,10.5-10.1,10.5
C62.5,83.2,60.1,82,58.2,80.1"
/>
<path
class="st13"
d="M73.4,72.5l0-2.5h-15l0,2.5c0,2.1,0.6,4,2,5.4s3.2,2.2,5.4,2.2C70.1,80.1,73.4,76.7,73.4,72.5"
/>
<path
class="st12"
d="M78.4,57.4c-1.9-1.9-2.6-4.5-2.6-7.4l-0.3-16.9c0-5.8,4.2-10.5,9.9-10.5c5.7,0,9.9,4.7,9.9,10.5L95.5,50
c0,5.8-4.4,10.5-10.1,10.5C82.6,60.5,80.2,59.3,78.4,57.4"
/>
<path
class="st13"
d="M93.5,50.3l0-2.4h-15l0,2.4c0,2.1,0.6,4,2,5.4c1.4,1.4,3.2,2.3,5.4,2.3C90.2,58,93.5,54.5,93.5,50.3"
/>
<path
class="st12"
d="M38.1,100.3c-1.9-1.9-2.6-4.5-2.6-7.4L35.2,76c0-5.8,4.2-10.5,9.9-10.5c5.7,0,9.9,4.7,9.9,10.5l0.3,16.9
c0,5.8-4.4,10.5-10.1,10.5C42.4,103.3,40,102.1,38.1,100.3"
/>
<path
class="st13"
d="M52.8,93.1l0-2.4h-15l0,2.4c0,2.1,0.6,4,2,5.4c1.4,1.4,3.2,2.3,5.4,2.3C49.5,100.8,52.8,97.4,52.8,93.1
M198.6,97.9c-2.8-2.8-7.4-3-10.4,0.1l-4.7,5.1l5.1,5.3L198.6,97.9z"
/>
<polygon class="st8" points="126.4,313.7 126.4,227.1 49.1,227.1 49.1,313.7 " />
<path
class="st12"
d="M93.4,37.3c-1.9-1.9-2.6-4.5-2.6-7.4L90.5,13c0-5.8,4.2-10.5,9.9-10.5c5.7,0,9.9,4.7,9.9,10.5l0.3,16.9
c0,5.8-4.4,10.5-10.1,10.5C97.7,40.3,95.3,39.1,93.4,37.3"
/>
<path
class="st13"
d="M108.6,30.1l0-2.4h-15l0,2.4c0,2.1,0.6,4,2,5.4c1.4,1.4,3.2,2.3,5.4,2.3C105.3,37.8,108.6,34.4,108.6,30.1"
/>
</g>
</g>
</svg>
</div>
</div>
</div>
<c8y-stepper-buttons
(onNext)="next($event)"
(onCancel)="cancel()"
class="modal-footer d-block bg-component separator-top sticky-bottom"
></c8y-stepper-buttons>
</cdk-step>
<cdk-step [label]="installAppTitle">
<div class="p-l-24 p-r-24">
<div>
<div
class="h4 text-center m-b-8 animated fadeInDown"
style="animation-delay: 0.3s"
>
{{ installAppTitle | translate }}
</div>
<div class="text-center animated fadeInUp" style="animation-delay: 0.4s">
<p translate>
Open
<strong>Google Play Store</strong>
or
<strong>Apple App Store</strong>
on your smartphone.
</p>
<p translate>
Find and install
<strong>Cumulocity IoT Sensor App</strong>
.
</p>
</div>
<div
class="center-block p-t-16 animated fadeInUp"
style="width: 181px; animation-delay: 0.5s"
>
<svg viewBox="0 -10 177 155">
<defs>
<linearGradient id="sensorapp-icon-c" x1="50%" x2="50%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#33AEE1" />
<stop offset="100%" stop-color="#1776BF" />
</linearGradient>
<rect id="sensorapp-icon-b" width="102.4" height="102.4" x="0" y="0" rx="12" />
<filter
id="sensorapp-icon-a"
width="225%"
height="225%"
x="-62.5%"
y="-31.2%"
filterUnits="objectBoundingBox"
>
<feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur
in="shadowOffsetOuter1"
result="shadowBlurOuter1"
stdDeviation="2"
/>
<feColorMatrix
in="shadowBlurOuter1"
result="shadowMatrixOuter1"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter2" />
<feGaussianBlur
in="shadowOffsetOuter2"
result="shadowBlurOuter2"
stdDeviation="4"
/>
<feColorMatrix
in="shadowBlurOuter2"
result="shadowMatrixOuter2"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"
/>
<feOffset dy="16" in="SourceAlpha" result="shadowOffsetOuter3" />
<feGaussianBlur
in="shadowOffsetOuter3"
result="shadowBlurOuter3"
stdDeviation="8"
/>
<feColorMatrix
in="shadowBlurOuter3"
result="shadowMatrixOuter3"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"
/>
<feOffset dy="32" in="SourceAlpha" result="shadowOffsetOuter4" />
<feGaussianBlur
in="shadowOffsetOuter4"
result="shadowBlurOuter4"
stdDeviation="16"
/>
<feColorMatrix
in="shadowBlurOuter4"
result="shadowMatrixOuter4"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
/>
<feMerge>
<feMergeNode in="shadowMatrixOuter1" />
<feMergeNode in="shadowMatrixOuter2" />
<feMergeNode in="shadowMatrixOuter3" />
<feMergeNode in="shadowMatrixOuter4" />
</feMerge>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(32)">
<use fill="#000" filter="url(#sensorapp-icon-a)" xlink:href="#sensorapp-icon-b" />
<use fill="url(#sensorapp-icon-c)" xlink:href="#sensorapp-icon-b" />
<path
fill="#FFF"
fill-rule="nonzero"
d="M51.5,49.3L51.5,49.3c2.6,0,5,0.5,7.2,1.6c1.4,0.7,2.8,1.7,4,2.8l3.4-3.2c-1.8-1.7-3.7-3.1-5.9-4c-2.6-1.2-5.5-1.8-8.6-1.8h0c-2.1,0-4.2,0.3-6.1,0.8c-3.1,0.9-5.9,2.6-8.4,4.9l3.4,3.2c1.6-1.5,3.4-2.7,5.3-3.4C47.5,49.6,49.4,49.3,51.5,49.3z"
/>
<path
fill="#FFF"
fill-rule="nonzero"
d="M51.5,58L51.5,58c1.9,0,3.5,0.6,4.9,1.6h0c0.2,0.2,0.5,0.4,0.7,0.6l3.4-3.4l0,0h0c-0.8-0.8-1.6-1.4-2.5-1.9v0c-1.9-1.1-4.1-1.7-6.5-1.7h0c-2.3,0-4.4,0.5-6.3,1.6v0c-1,0.5-1.8,1.2-2.7,2c0,0,0,0,0,0l3.4,3.4C47.5,58.8,49.3,58,51.5,58z"
/>
<path
fill="#FFF"
fill-rule="nonzero"
d="M51.6,61.8L51.6,61.8c-1.1,0-2.1,0.4-2.8,1.2l0,0c-0.8,0.8-1.2,1.7-1.2,2.8c0,1.1,0.4,2,1.2,2.8c0,0,0,0,0,0c0.8,0.8,1.7,1.2,2.8,1.2c0,0,0,0,0,0c1.1,0,2-0.4,2.8-1.2l0,0c0.8-0.8,1.2-1.7,1.2-2.8c0-1.1-0.4-2-1.2-2.8c0,0,0,0,0,0C53.7,62.1,52.7,61.8,51.6,61.8z"
/>
<path
fill="#FFF"
fill-rule="nonzero"
d="M51,78.2c0.2,0,0.3,0,0.5,0c0,0,0,0,0,0c3.5,0,6.5-1.2,9-3.6l0,0l-3.4-3.4c0,0,0,0,0,0c-1.4,1.3-3,2.1-4.8,2.2h0c-0.2,0-0.5,0-0.7,0c0,0,0,0,0,0c-2.2,0-4-0.7-5.6-2.2l-3.4,3.4C44.9,76.9,47.7,78.1,51,78.2z"
/>
<path
fill="#FFF"
fill-rule="nonzero"
d="M62.6,77.8c-3.1,3-6.8,4.4-11.1,4.4c-0.5,0-1.1,0-1.6-0.1c-3.7-0.3-6.9-1.8-9.5-4.4L37,81c3.3,3.2,7.2,5.1,11.7,5.6c0.9,0.1,1.9,0.2,2.8,0.2c5.7,0,10.5-1.9,14.5-5.8l0,0L62.6,77.8L62.6,77.8z"
/>
<path
fill="#FFF"
fill-rule="nonzero"
d="M81,38.5C78.7,32.4,72.7,28,65.8,28c-1.6,0-3.1,0.2-4.6,0.7C57.2,22.3,50.1,18,42,18c-12.3,0-22.2,9.8-22.5,22C15,42.6,12,47.5,12,53c0,8.3,6.7,15,15,15h17.4c-0.7-1.6-0.9-3,0-5H27c-5.5,0-10-4.5-10-10c0-4.7,3.3-8.7,7.7-9.7c-0.1-0.9-0.2-1.8-0.2-2.8C24.5,30.8,32.3,23,42,23c7.9,0,14.6,5.2,16.8,12.4c1.9-1.5,4.4-2.4,7-2.4c5.8,0,10.6,4.4,11.2,10H77c5.5,0,10,4.5,10,10c0,5.5-4.5,10-10,10H58.7c0.8,1.5,0.7,3.4,0,5H77c8.3,0,15-6.7,15-15C92,46.1,87.3,40.3,81,38.5z"
/>
<text
fill="#58656D"
font-family="Roboto-Medium, Roboto"
font-size="14"
font-weight="400"
>
<tspan x="4.681" y="124.7">Cumulocity IoT</tspan>
<tspan x="15.197" y="140.7">Sensor App</tspan>
</text>
</g>
</svg>
</div>
</div>
<div class="row overflow-hidden">
<div class="col-xs-6">
<div class="p-16">
<a
title="Google Play"
href="https://play.google.com/store/apps/details?id=com.softwareag.cumulocity.iotcloudsensor"
class="center-block animated fadeInLeft"
style="width: 171px; animation-delay: 0.35s"
>
<svg viewBox="0 0 181 52">
<g fill="none" fill-rule="evenodd">
<rect width="170.4" height="51.2" fill="#000" rx="8" />
<path
fill="#FFF"
fill-rule="nonzero"
d="M85.2480681,31.4279551 C82.5352946,31.4279551 80.324619,33.4905299 80.324619,36.3333431 C80.324619,39.1580952 82.5352946,41.2387311 85.2480681,41.2387311 C87.9608415,41.2387311 90.1715171,39.1580952 90.1715171,36.3333431 C90.1715171,33.4905299 87.9596375,31.4279551 85.2480681,31.4279551 Z M85.2480681,39.3061961 C83.7622436,39.3061961 82.4799073,38.0804511 82.4799073,36.3333431 C82.4799073,34.568174 83.7622436,33.3604901 85.2480681,33.3604901 C86.7338925,33.3604901 88.0162288,34.568174 88.0162288,36.3333431 C88.0162288,38.0804511 86.7338925,39.3061961 85.2480681,39.3061961 Z M74.5065447,31.4279551 C71.7937712,31.4279551 69.5830956,33.4905299 69.5830956,36.3333431 C69.5830956,39.1580952 71.7937712,41.2387311 74.5065447,41.2387311 C77.2193181,41.2387311 79.4299937,39.1580952 79.4299937,36.3333431 C79.4299937,33.4905299 77.2193181,31.4279551 74.5065447,31.4279551 Z M74.5065447,39.3061961 C73.0195161,39.3061961 71.7383839,38.0804511 71.7383839,36.3333431 C71.7383839,34.568174 73.0207202,33.3604901 74.5065447,33.3604901 C75.9923691,33.3604901 77.2747054,34.568174 77.2747054,36.3333431 C77.2747054,38.0804511 75.9923691,39.3061961 74.5065447,39.3061961 Z M61.7289361,32.9330447 L61.7289361,35.0136805 L66.7089765,35.0136805 C66.5596716,36.1840382 66.1695524,37.0389291 65.5759451,37.6337405 C64.8510939,38.3585917 63.7180625,39.1568912 61.7301401,39.1568912 C58.6645737,39.1568912 56.267267,36.6861361 56.267267,33.6193655 C56.267267,30.552595 58.6645737,28.0818399 61.7301401,28.0818399 C63.3833305,28.0818399 64.5922185,28.7320386 65.4832315,29.5676644 L66.9509949,28.099901 C65.7059848,26.9102782 64.0527944,26 61.7301401,26 C57.5303381,26 54,29.4183595 54,33.6181615 C54,37.8179635 57.5303381,41.236323 61.7301401,41.236323 C63.9974071,41.236323 65.7059848,40.4934107 67.0437084,39.0990957 C68.4187583,37.7240459 68.8462037,35.7915108 68.8462037,34.231034 C68.8462037,33.7482012 68.8088775,33.3014906 68.7342251,32.9306366 L61.7289361,32.9306366 L61.7289361,32.9330447 Z M113.984443,34.550113 C113.576262,33.4544077 112.331252,31.4291592 109.784641,31.4291592 C107.257294,31.4291592 105.158597,33.4170815 105.158597,36.3345472 C105.158597,39.0846469 107.239233,41.2399352 110.026659,41.2399352 C112.274661,41.2399352 113.575058,39.8648853 114.114482,39.0665858 L112.442027,37.9516154 C111.884542,38.7691801 111.122364,39.3074001 110.026659,39.3074001 C108.92975,39.3074001 108.149511,38.8053022 107.648617,37.8215757 L114.207196,35.1088022 L113.984443,34.550113 Z M107.29462,36.1852423 C107.239233,34.2900335 108.762384,33.324368 109.858089,33.324368 C110.71298,33.324368 111.437831,33.7518134 111.678645,34.3646859 L107.29462,36.1852423 Z M101.961787,40.9413254 L104.117075,40.9413254 L104.117075,26.5225671 L101.961787,26.5225671 L101.961787,40.9413254 Z M98.4314488,32.5248644 L98.3567964,32.5248644 C97.8739636,31.9493181 96.9444203,31.4291592 95.7740626,31.4291592 C93.3213686,31.4291592 91.0733668,33.5844475 91.0733668,36.3526082 C91.0733668,39.1027079 93.3213686,41.2399352 95.7740626,41.2399352 C96.9444203,41.2399352 97.8739636,40.7197762 98.3567964,40.1249648 L98.4314488,40.1249648 L98.4314488,40.8305508 C98.4314488,42.7076985 97.4284571,43.7106902 95.8113888,43.7106902 C94.4917263,43.7106902 93.6741616,42.7630858 93.3406338,41.9635822 L91.463486,42.7438207 C92.0029101,44.0442181 93.4333473,45.6420212 95.8113888,45.6420212 C98.3387353,45.6420212 100.474758,44.1561968 100.474758,40.531941 L100.474758,31.7241567 L98.4302447,31.7241567 L98.4302447,32.5248644 L98.4314488,32.5248644 Z M95.9606937,39.3061961 C94.4748693,39.3061961 93.2298592,38.0611859 93.2298592,36.3514042 C93.2298592,34.6235613 94.4748693,33.3604901 95.9606937,33.3604901 C97.4284571,33.3604901 98.5807537,34.6235613 98.5807537,36.3514042 C98.5807537,38.0611859 97.4284571,39.3061961 95.9606937,39.3061961 Z M124.080584,26.5225671 L118.923545,26.5225671 L118.923545,40.9413254 L121.075221,40.9413254 L121.075221,35.4784522 L124.080584,35.4784522 C126.46585,35.4784522 128.810177,33.7518134 128.810177,31.0005097 C128.810177,28.25041 126.46585,26.5225671 124.080584,26.5225671 Z M124.135971,33.4724688 L121.075221,33.4724688 L121.075221,28.5297546 L124.135971,28.5297546 C125.744611,28.5297546 126.658501,29.8614579 126.658501,31.0005097 C126.658501,32.1178882 125.744611,33.4724688 124.135971,33.4724688 Z M137.436147,31.4014655 C135.878078,31.4014655 134.264622,32.0877864 133.596362,33.6085289 L135.507224,34.4056243 C135.915404,33.6085289 136.675173,33.3484494 137.473473,33.3484494 C138.586035,33.3484494 139.717862,34.0167092 139.737128,35.2039239 L139.737128,35.3520247 C139.347008,35.1292714 138.512587,34.7957436 137.492738,34.7957436 C135.433775,34.7957436 133.337487,35.9275709 133.337487,38.0419208 C133.337487,39.9708436 135.025595,41.2134456 136.917192,41.2134456 C138.364486,41.2134456 139.161581,40.564451 139.662475,39.8034777 L139.737128,39.8034777 L139.737128,40.9160399 L141.814151,40.9160399 L141.814151,35.3881468 C141.812947,32.8294945 139.902085,31.4014655 137.436147,31.4014655 Z M137.176067,39.3037879 C136.471685,39.3037879 135.487959,38.9509949 135.487959,38.079247 C135.487959,36.9666848 136.7125,36.5392394 137.769674,36.5392394 C138.716075,36.5392394 139.160377,36.7439315 139.735923,37.0220721 C139.568558,38.3573876 138.418669,39.3037879 137.176067,39.3037879 Z M149.381742,31.7169323 L146.914599,37.9684724 L146.839946,37.9684724 L144.28009,31.7169323 L141.961048,31.7169323 L145.800833,40.4536764 L143.61183,45.3133096 L145.85622,45.3133096 L151.773028,31.7169323 L149.381742,31.7169323 Z M129.997392,40.9413254 L132.149068,40.9413254 L132.149068,26.5225671 L129.997392,26.5225671 L129.997392,40.9413254 Z"
/>
<text
fill="#FFF"
font-family="Roboto-Regular, Roboto"
font-size="12"
letter-spacing=".96"
>
<tspan x="55.142" y="17.4" translate>Download on the`Google Play`</tspan>
</text>
<path
fill="#FFF"
fill-rule="nonzero"
d="M12.7999992,39.4109698 L12.7999992,11.7922439 C12.7999992,10.8284641 13.3587517,9.99536961 14.1695974,9.59999943 L30.1457109,25.5968954 L14.1631721,41.5999975 C13.3557986,41.2034251 12.7999992,40.3722639 12.7999992,39.4109698 Z M35.2141861,30.6717551 L17.745324,40.770461 L31.5225942,26.9753948 L35.2141861,30.6717551 Z M40.6441621,23.6653717 C41.2251919,24.1106831 41.5999975,24.8123612 41.5999975,25.6016069 C41.5999975,26.3789928 41.2365497,27.071248 40.6704472,27.5173717 L36.9598716,29.6625343 L32.8993152,25.5968954 L36.9571133,21.5338234 L40.6441621,23.6653717 Z M17.7555622,10.4335163 L35.2114278,20.5246677 L31.5225942,24.2182336 L17.7555622,10.4335163 Z"
/>
</g>
</svg>
</a>
</div>
</div>
<div class="col-xs-6">
<div class="p-16">
<a
title="Apple Store"
href="http://onelink.to/g39r8w"
class="center-block animated fadeInRight"
style="width: 171px; animation-delay: 0.35s"
>
<svg viewBox="0 0 181 52">
<g fill="none" fill-rule="evenodd">
<rect width="170.4" height="51.2" fill="#000" rx="8" />
<text fill="#FFF" font-family="Helvetica" font-size="12" letter-spacing=".96">
<tspan x="54.4" y="17.4" translate>Download on the`App Store`</tspan>
</text>
<text fill="#FFF" font-family="Helvetica" font-size="23.2">
<tspan x="54.4" y="41.4">App Store</tspan>
</text>
<path
fill="#FFF"
fill-rule="nonzero"
d="M38.5273755,38.1636701 C37.1235711,40.207449 35.6714645,42.2386565 33.378798,42.2812318 C31.1224426,42.323807 30.3990915,40.9506718 27.8243806,40.9506718 C25.2469674,40.9506718 24.4406919,42.2386565 22.3103107,42.323807 C20.0969712,42.4062756 18.4139767,40.1164319 16.9986034,38.081872 C14.10704,33.9219027 11.9000846,26.3195413 14.8682053,21.1890243 C16.3380115,18.6410976 18.9717322,17.0290047 21.8257685,16.9864462 C23.9993852,16.9466199 26.0527362,18.4453856 27.3803717,18.4453856 C28.7100338,18.4453856 31.202327,16.6459449 33.8224691,16.9098778 C34.9192335,16.9549841 37.9974022,17.3498611 39.9742465,20.2297237 C39.8180243,20.3319546 36.3000689,22.3695987 36.3429667,26.6147184 C36.3860334,31.6856972 40.806362,33.3712742 40.8577042,33.394238 C40.8176776,33.5134151 40.1510732,35.8005769 38.5273755,38.1636701 Z M28.9012161,11.3393106 C30.1146826,9.92365046 32.1649936,8.87068442 33.8570913,8.79993243 C34.0732691,10.7663552 33.2786469,12.7354933 32.1050381,14.154422 C30.9290648,15.5708029 29.0040694,16.6741384 27.1148784,16.5268181 C26.8581673,14.6029538 27.8103628,12.5965204 28.9012161,11.3393106 Z"
/>
</g>
</svg>
</a>
</div>
</div>
</div>
<p class="text-center p-b-24 animated fadeIn" style="animation-delay: 1s" translate>
Click
<strong>Next</strong>
once you have the app installed.
</p>
</div>
<c8y-stepper-buttons
(onBack)="back()"
(onNext)="next($event)"
(onCancel)="cancel()"
class="modal-footer d-block bg-component separator-top sticky-bottom"
></c8y-stepper-buttons>
</cdk-step>
<cdk-step [label]="twoOptionsToConnectTitle">
<div class="p-l-24 p-r-24">
<div
class="h4 text-center m-b-8 animated fadeInDown"
style="animation-delay: 0.3s"
>
{{ twoOptionsToConnectTitle | translate }}
</div>
<div class="row">
<div class="col-xs-6">
<div class="animated fadeInUp" style="animation-delay: 0.35s">
<p class="text-info" translate>Option 1: QR code scan</p>
<p translate>
Press
<strong>Scan QR code</strong>
and use the code below.
</p>
</div>
<div class="row overflow-hidden">
<qrcode
*ngIf="registrationData"
class="center-block animated fadeInUp"
style="animation-delay: 0.75s"
[qrdata]="registrationData"
[width]="288"
[errorCorrectionLevel]="'M'"
[elementType]="'svg'"
></qrcode>
</div>
</div>
<div class="col-xs-6">
<div class="animated fadeInUp" style="animation-delay: 0.55s">
<p class="text-info" translate>Option 2: Manual registration</p>
<p translate>
Press
<strong>Manual registration</strong>
and enter the following data into your smartphone.
</p>
</div>
<div class="m-t-16 overflow-hidden">
<svg class="animated fadeInUp" style="animation-delay: 0.95s" viewBox="0 0 287 305">
<defs>
<rect id="login-screen-a" width="255" height="306" x="0" y="0" />
<polygon
id="login-screen-c"
points="6.898 5.644 55.186 5.644 55.186 8.153 6.898 8.153"
/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="login-screen-b" fill="#fff">
<use xlink:href="#login-screen-a" />
</mask>
<g mask="url(#login-screen-b)">
<g transform="translate(2)">
<path
fill="#FFF"
stroke="#CCCDC9"
stroke-width="1.817"
d="M7.38308195,146.47702 L4.61442622,146.47702 C3.09169154,146.47702 1.71398319,147.082069 0.716388292,148.057604 C-0.288641051,149.04041 -0.908444414,150.39865 -0.908444414,151.897853 L-0.908444414,183.448832 C-0.908444414,184.948035 -0.288641051,186.306275 0.716388292,187.28908 C1.71398319,188.264616 3.09169154,188.869665 4.61442622,188.869665 L7.38308195,188.869665 C8.90581663,188.869665 10.283525,188.264616 11.2811199,187.28908 C12.2861492,186.306275 12.9059526,184.948035 12.9059526,183.448832 L12.9059526,151.897853 C12.9059526,150.39865 12.2861492,149.04041 11.2811199,148.057604 C10.283525,147.082069 8.90581663,146.47702 7.38308195,146.47702 Z M253.455992,117.439118 C253.455992,116.57847 253.289564,115.89251 253.006875,115.340103 C252.679825,114.701009 252.195532,114.225904 251.57447,113.879494 C250.346479,113.194557 248.492308,113.061843 246.328777,113.062082 C244.332904,113.06945 242.585176,113.229114 241.417948,113.929711 C240.344603,114.573957 239.641595,115.621252 239.641595,117.439118 L239.641595,171.364789 C239.641595,172.225436 239.808022,172.911396 240.090711,173.463804 C240.417761,174.102898 240.902054,174.578002 241.523116,174.924413 C242.751108,175.60935 244.605278,175.742063 246.768809,175.741825 C248.764682,175.734456 250.51241,175.574793 251.679638,174.874196 C252.752983,174.229949 253.455992,173.182654 253.455992,171.364789 L253.455992,117.439118 Z M7.38308195,98.7408374 L4.61442622,98.7408374 C3.09168636,98.7408374 1.71397154,99.3459143 0.71637263,100.321501 C-0.288644505,101.304341 -0.908444414,102.66263 -0.908444414,104.161888 L-0.908444414,136.905836 C-0.908444414,138.405094 -0.288644505,139.763382 0.71637263,140.746223 C1.71397154,141.721809 3.09168636,142.326886 4.61442622,142.326886 L7.38308195,142.326886 C8.90582182,142.326886 10.2835366,141.721809 11.2811355,140.746223 C12.2861527,139.763382 12.9059526,138.405094 12.9059526,136.905836 L12.9059526,104.161888 C12.9059526,102.66263 12.2861527,101.304341 11.2811355,100.321501 C10.2835366,99.3459143 8.90582182,98.7408374 7.38308195,98.7408374 Z M10.1517377,64.1321048 L1.84577049,64.1321048 C1.08690926,64.1321048 0.400524723,64.4358637 -0.0965613404,64.9250099 C-0.598984265,65.4194076 -0.908444414,66.1027717 -0.908444414,66.8568372 L-0.908444414,83.5121388 C-0.908444414,84.2662044 -0.598984265,84.9495685 -0.0965613404,85.4439662 C0.400524723,85.9331124 1.08690926,86.2368713 1.84577049,86.2368713 L10.1517377,86.2368713 C10.9105989,86.2368713 11.5969835,85.9331124 12.0940695,85.4439662 C12.5964924,84.9495685 12.9059526,84.2662044 12.9059526,83.5121388 L12.9059526,66.8568372 C12.9059526,66.1027717 12.5964924,65.4194076 12.0940695,64.9250099 C11.5969835,64.4358637 10.9105989,64.1321048 10.1517377,64.1321048 Z"
/>
<path
fill="#394852"
d="M33.5930229,0 L218.954524,0 C236.513532,0 250.747921,14.1590938 250.747921,31.6252212 L250.747921,474.378317 C250.747921,491.844445 236.513532,506.003539 218.954524,506.003539 L33.5930229,506.003539 C16.0340148,506.003539 1.79962623,491.844445 1.79962623,474.378317 L1.79962623,31.6252212 C1.79962623,14.1590938 16.0340148,0 33.5930229,0 Z"
/>
<path
fill="#FFF"
stroke="#CCCDC9"
stroke-width="2.725"
d="M240.113079,94.605309 L240.112903,41.9917101 C240.111425,38.1274958 240.096801,35.7038103 239.968443,33.3966696 C239.873818,31.1365982 239.524087,28.8939701 238.925823,26.7114061 C237.960259,22.8182806 235.959037,19.2549752 233.116799,16.3817503 C230.251052,13.5738971 226.679636,11.5845622 222.776513,10.6222317 C220.580421,10.0246985 218.324184,9.67521033 216.049985,9.58049224 C213.822086,9.45757463 211.487399,9.43922122 207.86611,9.43670786 L193.46393,9.40388135 C191.790396,9.24852633 190.120371,9.79656085 188.740954,11.0521406 C187.790606,12.1604422 187.361559,13.6185195 187.557881,15.0597856 C187.622307,16.5426888 187.48783,18.0275822 187.151489,19.5052379 C186.728399,21.5761576 185.66886,23.4648429 184.096596,24.9326967 C182.577145,26.4198303 180.686118,27.4753541 178.619657,27.9907975 C176.447678,28.3449098 174.244818,28.4793325 172.045122,28.3920414 L80.6380774,28.3920414 L79.8614472,28.4120378 C77.9090342,28.4404094 75.9574202,28.2981791 74.0291032,27.9867437 C71.9554369,27.5622112 70.0644085,26.5093879 68.5935749,24.9488037 C67.0984097,23.4355646 66.037438,21.5518946 65.5207919,19.4932962 C65.2546737,18.0198526 65.1206899,16.5256833 65.1203182,15.0285536 C65.3061644,13.5973434 64.8764744,12.1523871 63.8096494,10.9258246 C62.4838688,9.73385222 60.6968025,9.18943733 58.9312627,9.43629496 L44.8087832,9.43670753 C41.1888031,9.43921968 38.854755,9.45755221 36.6284554,9.58028608 C34.3590738,9.67460916 32.107503,10.022496 29.9161911,10.6173905 C26.0061514,11.577993 22.4276689,13.5692594 19.5420579,16.3968097 C16.7196121,19.2502622 14.7203309,22.8065311 13.753019,26.6928366 C13.1522709,28.8800048 12.8009448,31.1270772 12.7057758,33.3920326 C12.5823013,35.6091548 12.5638514,37.9329717 12.5613261,41.537158 L12.5609083,94.6192271 L12.4344679,462.171027 L12.4352833,464.543752 C12.4390636,467.943344 12.4609049,470.196572 12.5790787,472.349831 C12.6735441,474.637526 13.0226185,476.907641 13.6197043,479.117002 C14.5749758,483.153945 16.6149886,486.748754 19.4160901,489.575326 C22.2160058,492.400701 25.7763005,494.458558 29.7745226,495.424772 C31.9691557,496.029561 34.2238023,496.383332 36.4963747,496.479328 C38.8165059,496.609114 41.2524845,496.623894 45.1376167,496.625386 L207.785016,496.625115 C211.409267,496.622466 213.827119,496.603539 216.045392,496.479607 C218.315186,496.384037 220.567506,496.031377 222.759579,495.42824 C226.753167,494.465692 230.277773,492.414883 233.045718,489.598308 C235.822061,486.773186 237.837217,483.176851 238.796896,479.134958 C239.408372,476.922432 239.884421,474.644978 239.968452,472.35078 C240.096822,470.011514 240.111425,467.554568 240.112903,463.637423 L240.113079,94.605309 Z"
/>
<g fill="#E4E4DF" transform="translate(109.777 11.934)">
<path
d="M42.8910917,6.56372515 C41.0689305,6.56372515 39.591777,5.09438522 39.591777,3.28186257 C39.591777,1.46933992 41.0689305,0 42.8910917,0 C44.7132529,0 46.1904065,1.46933992 46.1904065,3.28186257 C46.1904065,5.09438522 44.7132529,6.56372515 42.8910917,6.56372515 Z"
/>
<rect width="33.593" height="2.984" y="1.79" rx="1.492" />
</g>
<g transform="translate(31 40)">
<g fill="#1776BF" transform="translate(44.525)">
<path
d="M64.6485642,26.7301487 C62.6634924,26.7301487 60.898984,27.6439756 59.7594057,29.0695455 L53.8409506,26.8032549 C54.0247536,26.0356403 54.1350353,25.2314728 54.1350353,24.4273051 C54.1350353,22.380333 53.5101052,20.4795733 52.4072876,18.9077911 L59.7226451,11.5971765 C60.3108145,11.853048 60.9725051,11.9992602 61.6709564,11.9992602 C64.3177189,11.9992602 66.4498332,9.87918197 66.4498332,7.2473607 C66.4498332,4.61553942 64.3177189,2.49546118 61.6709564,2.49546118 C59.0241939,2.49546118 56.8920796,4.61553942 56.8920796,7.2473607 C56.8920796,7.83220987 57.0023614,8.38050597 57.1861644,8.892249 L49.7972856,16.2759698 C48.2165802,15.1793776 46.3050295,14.5579754 44.2096758,14.5579754 C41.8202374,14.5579754 39.614602,15.4352491 37.8868542,16.860819 L32.2992445,12.364791 C32.9241744,11.1950926 33.2917804,9.84262891 33.2917804,8.41705905 C33.2917804,3.77481874 29.5054395,0.00985219556 24.8368445,0.00985219556 C20.1682495,0.00985219556 16.3819086,3.77481874 16.3819086,8.41705905 C16.3819086,13.0592994 20.1682495,16.8242659 24.8368445,16.8242659 C26.7483952,16.8242659 28.476143,16.2028637 29.909806,15.1428245 L35.570937,19.6754056 C34.7989646,21.0644224 34.3578375,22.6727576 34.3578375,24.3907521 C34.3578375,25.852875 34.6886828,27.2784449 35.2768523,28.5212493 L28.9172701,32.7614059 C28.3658612,32.4324281 27.7041705,32.2496629 27.0057193,32.2496629 C24.9103657,32.2496629 23.2193785,33.9311042 23.2193785,36.0146293 C23.2193785,38.0981545 24.9103657,39.7795959 27.0057193,39.7795959 C29.1010731,39.7795959 30.7920602,38.0981545 30.7920602,36.0146293 C30.7920602,35.9780763 30.7920602,35.9415232 30.7920602,35.9415232 L37.4089665,31.4820483 C39.1734749,33.1269365 41.5261527,34.1869757 44.099394,34.1869757 L45.6065783,42.5576295 C43.7317882,43.5811155 42.4451674,45.5549815 42.4451674,47.8578251 C42.4451674,51.1841548 45.1654512,53.8890822 48.510665,53.8890822 C51.8558786,53.8890822 54.5761624,51.1841548 54.5761624,47.8578251 C54.5761624,44.7508139 52.2234846,42.2286518 49.2091162,41.8631211 L47.7386925,33.5655734 C49.576722,32.871065 51.1574274,31.6648136 52.2602452,30.0930315 L58.3992638,32.4324281 C58.3992638,32.5786405 58.3625033,32.7248528 58.3625033,32.871065 C58.3625033,36.2705008 61.1563081,39.0485344 64.5750431,39.0485344 C68.0305386,39.0485344 70.7875829,36.2705008 70.7875829,32.871065 C70.8611041,29.5081823 68.0672991,26.7301487 64.6485642,26.7301487 Z M24.8736051,13.1689585 C22.2268426,13.1689585 20.0947283,11.0488803 20.0947283,8.41705905 C20.0947283,5.78523777 22.2268426,3.66515953 24.8736051,3.66515953 C27.5203677,3.66515953 29.6524819,5.78523777 29.6524819,8.41705905 C29.6524819,11.0488803 27.483607,13.1689585 24.8736051,13.1689585 Z M50.9368639,47.8943781 C50.9368639,49.2102888 49.8708068,50.2703279 48.5474255,50.2703279 C47.2240442,50.2703279 46.1579871,49.2102888 46.1579871,47.8943781 C46.1579871,46.5784676 47.2240442,45.5184284 48.5474255,45.5184284 C49.8708068,45.5184284 50.9368639,46.6150206 50.9368639,47.8943781 Z M44.2464364,30.6047745 C40.8277015,30.6047745 38.0338966,27.8267409 38.0338966,24.4273051 C38.0338966,21.0278693 40.8277015,18.2498358 44.2464364,18.2498358 C47.6651713,18.2498358 50.4589762,21.0278693 50.4589762,24.4273051 C50.4589762,27.8267409 47.6651713,30.6047745 44.2464364,30.6047745 Z"
/>
<text
font-family="Arial-BoldMT, Arial"
font-size="10.034"
font-weight="bold"
letter-spacing=".179"
>
<tspan x="0" y="67.949">CUMULOCITY IoT</tspan>
</text>
</g>
<g transform="translate(0 91.56)">
<path
stroke="#828282"
stroke-width=".627"
d="M182.491525,6.58474576 L2.50847458,6.58474576 C1.90236547,6.58474576 1.35363665,6.83042002 0.956435116,7.22762156 C0.55923358,7.62482309 0.313559322,8.17355191 0.313559322,8.77966102 L0.313559322,38.8813559 C0.313559322,39.487465 0.55923358,40.0361939 0.956435116,40.4333954 C1.35363665,40.8305969 1.90236547,41.0762712 2.50847458,41.0762712 L182.491525,41.0762712 C183.097635,41.0762712 183.646363,40.8305969 184.043565,40.4333954 C184.440766,40.0361939 184.686441,39.487465 184.686441,38.8813559 L184.686441,8.77966102 C184.686441,8.17355191 184.440766,7.62482309 184.043565,7.22762156 C183.646363,6.83042002 183.097635,6.58474576 182.491525,6.58474576 Z"
/>
<rect width="43.898" height="10.661" x="6.898" fill="#FFF" />
<text
fill="#000"
fill-opacity=".87"
font-family="Roboto-Regular, Roboto"
font-size="7.525"
letter-spacing=".251"
>
<tspan x="10.034" y="7.627" translate>Tenant</tspan>
</text>
<text
fill="#000"
fill-opacity=".87"
font-family="Roboto-Regular, Roboto"
font-size="12"
letter-spacing=".094"
>
<tspan x="10.034" y="28.305">{{ this.tenantId }}</tspan>
</text>
</g>
<g transform="translate(0 153.017)">
<path
stroke="#828282"
stroke-width=".627"
d="M182.491525,6.58474576 L2.50847458,6.58474576 C1.90236547,6.58474576 1.35363665,6.83042002 0.956435116,7.22762156 C0.55923358,7.62482309 0.313559322,8.17355191 0.313559322,8.77966102 L0.313559322,38.8813559 C0.313559322,39.487465 0.55923358,40.0361939 0.956435116,40.4333954 C1.35363665,40.8305969 1.90236547,41.0762712 2.50847458,41.0762712 L182.491525,41.0762712 C183.097635,41.0762712 183.646363,40.8305969 184.043565,40.4333954 C184.440766,40.0361939 184.686441,39.487465 184.686441,38.8813559 L184.686441,8.77966102 C184.686441,8.17355191 184.440766,7.62482309 184.043565,7.22762156 C183.646363,6.83042002 183.097635,6.58474576 182.491525,6.58474576 Z"
/>
<rect width="43.898" height="10.661" x="6.898" fill="#FFF" />
<text
fill="#000"
fill-opacity=".87"
font-family="Roboto-Regular, Roboto"
font-size="7.525"
letter-spacing=".251"
>
<tspan x="10.034" y="7.627" translate>Instance</tspan>
</text>
<text
fill="#000"
fill-opacity=".87"
font-family="Roboto-Regular, Roboto"
font-size="12"
letter-spacing=".094"
>
<tspan x="10.034" y="28.305">{{ this.instance }}</tspan>
</text>
<polygon
fill="#121212"
points="164.8 20.486 169.949 27.175 175.098 20.486"
/>
</g>
<g transform="translate(0 209.458)">
<path
stroke="#191919"
stroke-opacity=".32"
stroke-width=".627"
d="M182.491525,6.58474576 L2.50847458,6.58474576 C1.90236547,6.58474576 1.35363665,6.83042002 0.956435116,7.22762156 C0.55923358,7.62482309 0.313559322,8.17355191 0.313559322,8.77966102 L0.313559322,38.8813559 C0.313559322,39.487465 0.55923358,40.0361939 0.956435116,40.4333954 C1.35363665,40.8305969 1.90236547,41.0762712 2.50847458,41.0762712 L182.491525,41.0762712 C183.097635,41.0762712 183.646363,40.8305969 184.043565,40.4333954 C184.440766,40.0361939 184.686441,39.487465 184.686441,38.8813559 L184.686441,8.77966102 C184.686441,8.17355191 184.440766,7.62482309 184.043565,7.22762156 C183.646363,6.83042002 183.097635,6.58474576 182.491525,6.58474576 Z"
/>
<use fill="#FFF" xlink:href="#login-screen-c" />
<rect width="48.288" height="10.661" x="6.898" fill="#FFF" />
<text
fill="#000"
fill-opacity=".87"
font-family="Roboto-Regular, Roboto"
font-size="7.525"
letter-spacing=".251"
>
<tspan x="10.034" y="7.627" translate>Device ID</tspan>
</text>
<text
fill="#000"
fill-opacity=".87"
font-family="Roboto-Regular, Roboto"
font-size="12"
letter-spacing=".094"
>
<tspan x="10.034" y="28.305">{{ this.deviceId }}</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
<div class="modal-footer d-block bg-component separator-top sticky-bottom">
<button
(click)="cancel()"
type="button"
title="{{ 'Cancel' | translate }}"
class="btn btn-default"
>
<span translate>Cancel</span>
</button>
<button
type="button"
class="btn btn-primary"
title="{{ 'Waiting' | translate }}"
[ngClass]="{ 'btn-pending': pendingDeviceBootstrap }"
>
<span translate>Waiting</span>
</button>
</div>
</cdk-step>
<cdk-step [label]="resultTitle"></cdk-step>
</c8y-stepper>
<!-- SUCCESS CONTAINER -->
<ng-container *ngIf="success === true">
<div class="overflow-hidden" style="height: 551px">
<div class="row inner-scroll d-flex">
<div class="col-xs-6 no-gutter a-s-end">
<svg
width="359"
height="561"
viewBox="0 0 359 561"
fill="none"
class="animated fadeInLeft"
>
<g id="success-hand" clip-path="url(#clip0_1_88)">
<g id="Page-1">
<g id="Group-14">
<path
id="Path"
fill-rule="evenodd"
clip-rule="evenodd"
d="M315.751 561H0C0 561 0 -79 0 5.72205e-06C0 127.001 184 426 315.751 561Z"
fill="url(#paint0_linear_1_88)"
/>
<g id="connect-smartphone">
<g id="Group">
<g id="Path_2">
<path
id="Vector"
fill-rule="evenodd"
clip-rule="evenodd"
d="M108.271 561V243.041H220.473V561H108.271Z"
fill="#F4BE84"
/>
</g>
<g id="Path_3">
<path
id="Vector_2"
fill-rule="evenodd"
clip-rule="evenodd"
d="M140.147 560.968L143.813 293.692H108.431V560.968H140.147Z"
fill="#D89E66"
/>
</g>
<path
id="Shape"
fill-rule="evenodd"
clip-rule="evenodd"
d="M132.162 237.75C127.7 237.75 123.874 235.678 120.528 232.331L81.6393 193.443C74.9455 186.749 74.1486 176.708 80.8425 170.014C87.5363 163.321 97.5771 164.117 104.271 170.811L143 209.54C149.694 216.234 150.331 226.434 143.637 233.128C140.29 236.634 136.465 237.75 132.162 237.75ZM163.56 209.54C158.938 209.54 154.156 208.106 150.65 204.599L114.79 163.48C112.24 160.77 105.546 145.47 112.559 138.458C119.571 131.445 128.975 131.445 135.987 138.458L176.31 178.94C183.322 185.952 183.163 197.268 176.31 204.281C172.803 207.787 168.181 209.54 163.56 209.54Z"
fill="#D89E66"
/>
<path
id="Path_4"
fill-rule="evenodd"
clip-rule="evenodd"
d="M221.732 70.8814L26.8134 263.888C17.7289 272.813 17.7289 287.316 26.8134 296.242L102.199 370.83C111.284 379.756 125.946 379.756 134.872 370.83L329.791 177.983C338.875 169.058 338.875 154.555 329.791 145.63L254.564 71.0408C245.48 61.9563 230.817 61.9563 221.732 70.8814Z"
fill="#2A2B2A"
/>
<path
id="Path_5"
fill-rule="evenodd"
clip-rule="evenodd"
d="M219.979 137.342C215.676 137.342 211.692 135.27 208.345 131.923L169.616 93.3537C162.922 86.6598 162.444 76.4596 168.978 69.7658C175.672 63.0719 185.872 63.7094 192.566 70.4033L231.295 108.813C237.989 115.507 238.308 125.867 231.614 132.561C228.267 136.067 224.282 137.342 219.979 137.342Z"
fill="#D89E66"
/>
<path
id="Path_6"
fill-rule="evenodd"
clip-rule="evenodd"
d="M225.876 67.6939L30.9572 260.541C21.8727 269.466 21.8727 283.97 30.9572 292.895L106.184 367.484C115.268 376.409 129.931 376.409 138.856 367.484L333.775 174.636C342.86 165.711 342.86 151.208 333.775 142.283L258.549 67.6939C249.464 58.7687 234.801 58.7687 225.876 67.6939Z"
fill="#373737"
/>
<path
id="Shape_2"
fill-rule="evenodd"
clip-rule="evenodd"
d="M100.287 312.02C100.287 319.83 94.0708 326.045 86.2613 326.045C78.4518 326.045 72.2361 319.83 72.2361 312.02C72.2361 304.211 78.4518 297.995 86.2613 297.995C94.0708 297.995 100.287 304.211 100.287 312.02ZM315.287 121.723C314.49 120.926 313.375 120.926 312.578 121.723L332.022 141.326C332.819 140.53 332.819 139.414 332.022 138.617L315.287 121.723ZM212.489 81.5597C211.692 80.7628 210.576 80.7628 209.938 81.5597L201.013 90.4849C200.216 91.2818 200.216 92.3974 201.013 93.0349L212.489 81.5597ZM285.802 115.985C287.396 117.579 289.946 117.579 291.54 115.985C293.134 114.392 293.134 111.842 291.54 110.248C289.946 108.654 287.396 108.654 285.802 110.248C284.209 112.001 284.209 114.551 285.802 115.985Z"
fill="#2A2B2A"
/>
<path
id="Path_7"
fill-rule="evenodd"
clip-rule="evenodd"
d="M148.419 341.983C148.419 341.983 56.1389 253.369 56.2981 253.21L219.82 85.2254C219.979 85.0661 220.298 85.0661 220.457 85.2254L314.65 176.071L148.419 341.983Z"
fill="white"
/>
<g id="Group-2">
<path
id="Oval-2"
d="M161.373 250.862C181.894 264.703 209.749 259.288 223.591 238.768C237.432 218.247 232.017 190.391 211.497 176.55C190.976 162.709 163.12 168.123 149.279 188.644C135.438 209.165 140.853 237.02 161.373 250.862Z"
fill="url(#paint1_linear_1_88)"
/>
</g>
<path
id="Path_8"
fill-rule="evenodd"
clip-rule="evenodd"
d="M66.6578 242.213L56.2983 253.21L148.419 341.983L159.097 331.942L66.6578 242.213Z"
fill="#176878"
/>
<path
id="Path_9"
fill-rule="evenodd"
clip-rule="evenodd"
d="M301.899 188.821L314.49 176.071L219.661 84.5879C219.501 84.4285 219.182 84.4285 219.023 84.5879L206.432 96.7006L301.899 188.821Z"
fill="#394852"
/>
<path
id="Shape_3"
fill-rule="evenodd"
clip-rule="evenodd"
d="M322.459 195.674L322.619 195.515L340.628 209.859L307.796 243.806L304.45 247.95C296.959 257.194 286.28 270.263 281.18 275.363C271.458 285.245 263.968 312.339 251.536 326.205L244.842 333.536C230.658 349.155 219.501 363.818 219.182 400.156V401.431C219.182 438.247 205.317 405.415 201.332 395.534L200.376 392.984L205.635 341.186L196.71 359.515L142.84 367.962V367.324C142.84 362.383 143.956 331.305 164.835 310.745C182.526 293.373 212.489 283.491 232.251 271.219L232.57 270.901L305.246 197.746C310.187 192.965 317.2 192.327 322.459 195.674ZM112.877 188.662C109.849 185.633 108.734 181.49 108.734 176.868L108.255 149.933C108.255 140.689 114.949 133.198 124.034 133.198C133.118 133.198 139.812 140.689 139.812 149.933L140.29 176.868C140.29 186.112 133.278 193.602 124.193 193.602C119.731 193.602 115.906 191.69 112.877 188.662Z"
fill="#F4BE84"
/>
<path
id="Path_10"
fill-rule="evenodd"
clip-rule="evenodd"
d="M137.103 176.549V172.564H113.196V176.549C113.196 179.896 114.152 182.924 116.384 185.155C118.615 187.387 121.484 188.662 124.99 188.662C131.843 188.662 137.103 183.243 137.103 176.549Z"
fill="#FFE5CC"
/>
<path
id="Path_11"
fill-rule="evenodd"
clip-rule="evenodd"
d="M145.072 152.483C142.044 149.455 140.928 145.311 140.928 140.689L140.45 113.754C140.45 104.51 147.144 97.0194 156.228 97.0194C165.313 97.0194 172.007 104.51 172.007 113.754L172.325 140.689C172.325 149.933 165.313 157.424 156.228 157.424C151.766 157.424 147.941 155.511 145.072 152.483Z"
fill="#F4BE84"
/>
<path
id="Path_12"
fill-rule="evenodd"
clip-rule="evenodd"
d="M169.138 141.167V137.342H145.231V141.167C145.231 144.514 146.187 147.542 148.419 149.773C150.65 152.005 153.519 153.439 157.025 153.439C163.878 153.439 169.138 147.861 169.138 141.167Z"
fill="#FFE5CC"
/>
<path
id="Path_13"
fill-rule="evenodd"
clip-rule="evenodd"
d="M80.8425 220.856C77.8143 217.828 76.6987 213.684 76.6987 209.062L76.2205 182.127C76.2205 172.883 82.9144 165.392 91.9989 165.392C101.083 165.392 107.777 172.883 107.777 182.127L108.255 209.062C108.255 218.306 101.243 225.797 92.1583 225.797C87.6957 225.637 83.8707 223.725 80.8425 220.856Z"
fill="#F4BE84"
/>
<path
id="Shape_4"
fill-rule="evenodd"
clip-rule="evenodd"
d="M104.271 209.381V205.556H80.3643V209.381C80.3643 212.728 81.3206 215.756 83.5519 217.987C85.7832 220.218 88.652 221.653 92.1583 221.653C99.0115 221.653 104.271 216.234 104.271 209.381ZM336.644 217.031C332.181 212.568 324.85 212.25 320.069 217.19L312.578 225.318L320.706 233.766L336.644 217.031Z"
fill="#FFE5CC"
/>
<path
id="Path_14"
fill-rule="evenodd"
clip-rule="evenodd"
d="M221.573 560.968V422.947H98.374V560.968H221.573Z"
fill="#373737"
/>
<path
id="Path_15"
fill-rule="evenodd"
clip-rule="evenodd"
d="M168.978 120.448C165.95 117.42 164.835 113.276 164.835 108.654L164.356 81.7191C164.356 72.4752 171.05 64.9844 180.135 64.9844C189.219 64.9844 195.913 72.4752 195.913 81.7191L196.391 108.654C196.391 117.898 189.379 125.389 180.294 125.389C175.832 125.229 172.007 123.317 168.978 120.448Z"
fill="#F4BE84"
/>
<path
id="Path_16"
fill-rule="evenodd"
clip-rule="evenodd"
d="M193.204 108.973V105.148H169.297V108.973C169.297 112.32 170.253 115.348 172.485 117.579C174.716 119.81 177.585 121.245 181.091 121.245C187.944 121.245 193.204 115.826 193.204 108.973Z"
fill="#FFE5CC"
/>
</g>
</g>
</g>
</g>
</g>
<defs>
<linearGradient
id="paint0_linear_1_88"
x1="15787.6"
y1="3.25598e-05"
x2="15787.6"
y2="56100"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C9EC62" />
<stop offset="1" stop-color="#98D533" />
</linearGradient>
<linearGradient
id="paint1_linear_1_88"
x1="3889.91"
y1="2657.67"
x2="-1122.46"
y2="10088.8"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#B5EB45" />
<stop offset="1" stop-color="#61AA11" />
</linearGradient>
<clipPath id="clip0_1_88">
<rect width="359" height="561" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="col-xs-6 p-r-16 p-l-16 a-s-center">
<h4 class="m-b-16 animated fadeInUp" style="animation-delay: 0.5s">
<strong translate>Smartphone registered.</strong>
</h4>
<p class="p-b-16 animated fadeInUp" style="animation-delay: 0.75s" translate>
You can check your sensor's data in the dashboard which has been created for this
smartphone.
</p>
<span class="text-center animated fadeInUp" style="animation-delay: 1s">
<button
class="btn btn-default"
type="button"
title="{{ 'Close' | translate }}"
(click)="cancel()"
>
<span translate>Close</span>
</button>
<button
class="btn btn-primary"
type="button"
title="{{ 'Open dashboard' | translate }}"
(click)="openDashboard()"
>
<span translate>Open dashboard</span>
</button>
</span>
</div>
</div>
</div>
</ng-container>
<!-- ERROR CONTAINER -->
<ng-container *ngIf="success === false">
<div class="overflow-hidden" style="height: 551px">
<div class="row inner-scroll d-flex">
<div class="col-xs-6 no-gutter a-s-end">
<svg
width="359"
height="561"
viewBox="0 0 359 561"
fill="none"
class="animated fadeInLeft"
>
<g id="error-hand">
<g id="Page-1">
<g id="error-hand_2">
<path
id="Path"
fill-rule="evenodd"
clip-rule="evenodd"
d="M316 561H0C0 561 0 -71.3854 0 6.67467C0 132.165 184.145 427.606 316 561Z"
fill="url(#paint0_linear_1_60)"
/>
<g id="Group">
<path
id="Path_2"
d="M108.272 561V243.041H220.475V561H108.272Z"
fill="#F4BE84"
/>
<path
id="Path_3"
d="M140.147 560.968L143.814 293.692H108.431V560.968H140.147Z"
fill="#D89E66"
/>
<path
id="Shape"
d="M132.163 237.75C127.7 237.75 123.875 235.678 120.528 232.331L81.6397 193.443C74.9458 186.749 74.1489 176.708 80.8428 170.014C87.5367 163.32 97.5775 164.117 104.271 170.811L143 209.54C149.694 216.234 150.332 226.434 143.638 233.128C140.291 236.634 136.466 237.75 132.163 237.75ZM163.56 209.54C158.938 209.54 154.157 208.106 150.651 204.599L114.79 163.48C112.24 160.77 105.546 145.47 112.559 138.458C119.572 131.445 128.975 131.445 135.988 138.458L176.311 178.939C183.323 185.952 183.164 197.268 176.311 204.28C172.804 207.787 168.182 209.54 163.56 209.54Z"
fill="#D89E66"
/>
<path
id="Path_4"
d="M221.734 70.8814L26.8134 263.888C17.7289 272.813 17.7289 287.316 26.8134 296.241L102.2 370.83C111.284 379.755 125.947 379.755 134.872 370.83L329.792 177.983C338.877 169.058 338.877 154.555 329.792 145.629L254.566 71.0408C245.481 61.9563 230.818 61.9563 221.734 70.8814Z"
fill="#2A2B2A"
/>
<path
id="Path_5"
d="M219.98 137.342C215.677 137.342 211.693 135.27 208.346 131.923L169.617 93.3537C162.923 86.6598 162.445 76.4596 168.979 69.7658C175.673 63.0719 185.873 63.7094 192.567 70.4033L231.296 108.813C237.99 115.507 238.309 125.867 231.615 132.561C228.268 136.067 224.284 137.342 219.98 137.342Z"
fill="#D89E66"
/>
<path
id="Path_6"
d="M225.877 67.6939L30.9573 260.541C21.8727 269.466 21.8727 283.969 30.9573 292.894L106.184 367.483C115.269 376.408 129.931 376.408 138.857 367.483L333.777 174.636C342.861 165.711 342.861 151.208 333.777 142.283L258.55 67.6939C249.465 58.7687 234.803 58.7687 225.877 67.6939Z"
fill="#373737"
/>
<path
id="Shape_2"
d="M100.287 312.02C100.287 319.829 94.0712 326.045 86.2617 326.045C78.4521 326.045 72.2363 319.829 72.2363 312.02C72.2363 304.21 78.4521 297.994 86.2617 297.994C94.0712 297.994 100.287 304.21 100.287 312.02ZM315.289 121.723C314.492 120.926 313.376 120.926 312.579 121.723L332.024 141.326C332.82 140.529 332.82 139.414 332.024 138.617L315.289 121.723ZM212.49 81.5597C211.693 80.7628 210.577 80.7628 209.94 81.5597L201.014 90.4848C200.217 91.2817 200.217 92.3974 201.014 93.0349L212.49 81.5597ZM285.804 115.985C287.398 117.579 289.948 117.579 291.541 115.985C293.135 114.391 293.135 111.841 291.541 110.248C289.948 108.654 287.398 108.654 285.804 110.248C284.21 112.001 284.21 114.551 285.804 115.985Z"
fill="#2A2B2A"
/>
<path
id="Path_7"
d="M148.419 341.983C148.419 341.983 56.1391 253.369 56.2981 253.209L219.821 85.2254C219.98 85.066 220.299 85.066 220.459 85.2254L314.651 176.071L148.419 341.983Z"
fill="white"
/>
<g id="Group_2">
<path
id="Oval"
d="M154.847 245.387C172.35 262.889 200.727 262.889 218.23 245.387C235.732 227.884 235.732 199.507 218.23 182.005C200.727 164.502 172.35 164.502 154.847 182.005C137.345 199.507 137.345 227.884 154.847 245.387Z"
fill="url(#paint1_linear_1_60)"
/>
</g>
<path
id="Path_8"
d="M66.6582 242.212L56.2987 253.209L148.419 341.983L159.098 331.942L66.6582 242.212Z"
fill="#176878"
/>
<path
id="Path_9"
d="M301.901 188.821L314.492 176.071L219.662 84.5879C219.502 84.4285 219.183 84.4285 219.024 84.5879L206.433 96.7006L301.901 188.821Z"
fill="#394852"
/>
<path
id="Shape_3"
d="M322.461 195.674L322.62 195.515L340.63 209.859L307.798 243.806L304.451 247.95C296.96 257.194 286.282 270.263 281.182 275.363C271.46 285.244 263.969 312.338 251.537 326.204L244.843 333.536C230.659 349.155 219.502 363.817 219.183 400.156V401.431C219.183 438.247 205.318 405.415 201.333 395.534L200.377 392.984L205.636 341.186L196.711 359.514L142.841 367.961V367.324C142.841 362.383 143.957 331.304 164.835 310.745C182.526 293.373 212.49 283.491 232.253 271.219L232.571 270.9L305.248 197.746C310.189 192.965 317.201 192.327 322.461 195.674ZM112.878 188.661C109.85 185.633 108.734 181.489 108.734 176.868L108.256 149.933C108.256 140.689 114.95 133.198 124.034 133.198C133.119 133.198 139.813 140.689 139.813 149.933L140.291 176.868C140.291 186.111 133.278 193.602 124.194 193.602C119.731 193.602 115.906 191.69 112.878 188.661Z"
fill="#F4BE84"
/>
<path
id="Path_10"
d="M137.103 176.549V172.564H113.197V176.549C113.197 179.896 114.153 182.924 116.384 185.155C118.616 187.386 121.484 188.661 124.991 188.661C131.844 188.661 137.103 183.243 137.103 176.549Z"
fill="#FFE5CC"
/>
<path
id="Path_11"
d="M145.072 152.483C142.044 149.455 140.929 145.311 140.929 140.689L140.45 113.754C140.45 104.51 147.144 97.0193 156.229 97.0193C165.313 97.0193 172.007 104.51 172.007 113.754L172.326 140.689C172.326 149.933 165.313 157.423 156.229 157.423C151.766 157.423 147.941 155.511 145.072 152.483Z"
fill="#F4BE84"
/>
<path
id="Path_12"
d="M169.139 141.167V137.342H145.232V141.167C145.232 144.514 146.188 147.542 148.419 149.773C150.651 152.005 153.519 153.439 157.026 153.439C163.879 153.439 169.139 147.861 169.139 141.167Z"
fill="#FFE5CC"
/>
<path
id="Path_13"
d="M80.8428 220.856C77.8146 217.828 76.699 213.684 76.699 209.062L76.2208 182.127C76.2208 172.883 82.9147 165.392 91.9993 165.392C101.084 165.392 107.778 172.883 107.778 182.127L108.256 209.062C108.256 218.306 101.243 225.796 92.1587 225.796C87.6961 225.637 83.871 223.725 80.8428 220.856Z"
fill="#F4BE84"
/>
<path
id="Shape_4"
d="M104.271 209.381V205.555H80.3647V209.381C80.3647 212.727 81.3209 215.756 83.5522 217.987C85.7835 220.218 88.6523 221.653 92.1587 221.653C99.012 221.653 104.271 216.234 104.271 209.381ZM336.646 217.031C332.183 212.568 324.852 212.249 320.07 217.19L312.579 225.318L320.708 233.765L336.646 217.031Z"
fill="#FFE5CC"
/>
<path
id="Path_14"
d="M221.574 560.968V422.946H98.3744V560.968H221.574Z"
fill="#373737"
/>
<path
id="Path_15"
d="M168.979 120.448C165.951 117.42 164.835 113.276 164.835 108.654L164.357 81.7191C164.357 72.4752 171.051 64.9844 180.136 64.9844C189.22 64.9844 195.914 72.4752 195.914 81.7191L196.392 108.654C196.392 117.898 189.38 125.389 180.295 125.389C175.832 125.229 172.007 123.317 168.979 120.448Z"
fill="#F4BE84"
/>
<path
id="Path_16"
d="M193.205 108.973V105.148H169.298V108.973C169.298 112.32 170.254 115.348 172.486 117.579C174.717 119.81 177.586 121.245 181.092 121.245C187.945 121.245 193.205 115.826 193.205 108.973Z"
fill="#FFE5CC"
/>
</g>
</g>
</g>
</g>
<defs>
<linearGradient
id="paint0_linear_1_60"
x1="15800"
y1="6.6747"
x2="15800"
y2="55439.2"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#F5515F" />
<stop offset="1" stop-color="#9F041B" />
</linearGradient>
<linearGradient
id="paint1_linear_1_60"
x1="3355.66"
y1="3319.41"
x2="-3313.33"
y2="13973.8"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#F5515F" />
<stop offset="1" stop-color="#9F041B" />
</linearGradient>
</defs>
</svg>
</div>
<div class="col-xs-6 p-r-16 p-l-16 a-s-center">
<h4 class="m-b-8 animated fadeInUp" style="animation-delay: 0.5s">
<strong>{{ 'Registration unsuccessful' | translate }}</strong>
</h4>
<p class="p-b-16 animated fadeInUp" style="animation-delay: 0.75s">
{{ this.errorMessage | translate }}
</p>
<span class="text-center animated fadeInUp" style="animation-delay: 1s">
<button
class="btn btn-default"
type="button"
title="{{ 'Close' | translate }}"
(click)="cancel()"
>
<span translate>Close</span>
</button>
<button
class="btn btn-primary"
type="button"
title="{{ 'Retry' | translate }}"
(click)="retry()"
>
<span translate>Retry</span>
</button>
</span>
</div>
</div>
</div>
</ng-container>
</div>