83 lines
5.1 KiB
Plaintext
83 lines
5.1 KiB
Plaintext
<aura:component >
|
|
|
|
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
|
|
<aura:attribute name="isOpen" type="boolean" default="true"/>
|
|
<!--currentStep attribute will control the steps of progress indicator-->
|
|
<aura:attribute name="currentStep" type="string" default="1" />
|
|
<!--Use "slds-m-around_xx-large" class to add standard Large padding to the component-->
|
|
|
|
<div class="slds-m-around_xx-large">
|
|
|
|
<!--lightning:button variant="brand"
|
|
label="Click to Open"
|
|
title="Click to Open"
|
|
onclick="{! c.openModel }"/-->
|
|
|
|
<!--Use aura:if tag to display Model Box, on the bese of conditions. [isOpen boolean attribute] -->
|
|
<aura:if isTrue="{!v.isOpen}">
|
|
|
|
<!--###### MODAL BOX Start From Here ######-->
|
|
<div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open slds-modal_small">
|
|
<div class="slds-modal__container">
|
|
<!-- ###### MODAL BOX HEADER Part Start From Here ######-->
|
|
<div class="slds-modal__header">
|
|
<lightning:buttonIcon iconName="utility:close"
|
|
onclick="{! c.closeModel }"
|
|
alternativeText="close"
|
|
variant="bare-inverse"
|
|
class="slds-modal__close"/>
|
|
<h2 id="header99" class="slds-text-heading--medium">About Credentials </h2>
|
|
<br/>
|
|
|
|
|
|
<lightning:progressIndicator currentStep="{!v.currentStep}" type="base">
|
|
<lightning:progressStep label="" value="1" onclick="{!c.selectFromHeaderStep1}"/>
|
|
<lightning:progressStep label="" value="2" onclick="{!c.selectFromHeaderStep2}"/>
|
|
<!--lightning:progressStep label="" value="3" onclick="{!c.selectFromHeaderStep3}"/-->
|
|
</lightning:progressIndicator>
|
|
</div>
|
|
|
|
<!--###### MODAL BOX BODY Part Start From Here ######-->
|
|
<div class="slds-modal__content slds-p-around_medium">
|
|
<!--showing 3 screens based on progress indicator steps-->
|
|
<div class="{!v.currentStep == '1' ? 'slds-show' : 'slds-hide'}" style="color:red" >
|
|
<center><h1 style="color:blue;font-size: large;"> Open your store and copy store URL </h1> </center>
|
|
<p> <img src="{!$Resource.storeulgetinfo}" style="width:100%; height:100%;"/></p>
|
|
</div>
|
|
<!--div aura:id = "step2" class="{!v.currentStep == '2' ? 'slds-show' : 'slds-hide'}" style="color:green">
|
|
<center><h1 style="color:blue;font-size: large;">Get your Shopify API Key form private app</h1> </center>
|
|
<p> <img src="{!$Resource.Storeapikey}" style="width:100%; height:100%;"/></p>
|
|
</div-->
|
|
<div class="{!v.currentStep == '2' ? 'slds-show' : 'slds-hide'}" style="color:blue" >
|
|
<center><h1 style="color:blue;font-size: large;">Get your Shopify Access Token from private app</h1> </center>
|
|
<p> <img src="{!$Resource.Storepassword}" style="width:100%; height:100%;"/></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!--###### MODAL BOX FOOTER Part Start From Here ######-->
|
|
<div class="slds-modal__footer slds-modal__footer_directional">
|
|
<lightning:button disabled="{!v.currentStep != '1' ? '' : 'disabled'}"
|
|
variant="neutral"
|
|
label="Back"
|
|
title="Back"
|
|
onclick="{! c.moveBack }"/>
|
|
<aura:if isTrue="{!v.currentStep != '2'}">
|
|
<lightning:button variant="brand"
|
|
label="Next"
|
|
title="Next"
|
|
onclick="{! c.moveNext }"/>
|
|
</aura:if>
|
|
<aura:if isTrue="{!v.currentStep == '2'}">
|
|
<lightning:button variant="brand"
|
|
label="Finish"
|
|
title="Finish"
|
|
onclick="{! c.finish }"/>
|
|
</aura:if>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="slds-backdrop slds-backdrop_open"></div>
|
|
<!--###### MODAL BOX Part END Here ######-->
|
|
</aura:if>
|
|
</div>
|
|
</aura:component> |