<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns:dyn="http://exslt.org/dynamic" extension-element-prefixes="dyn">
    <xsl:output method="html" indent="no" doctype-system="" encoding="utf-8" />

    <xsl:include href="/app/tools/appuser/templates/global.xsl" />

    <xsl:template name="pickLayout">
        <script src="/production/javascript/jquery/jquery-3.6.0.min.js"></script>
        <xsl:choose>
            <xsl:when test="$cmd = 'scode' or $cmd = 'tcode'">
                <xsl:call-template name="sendLayout"/> <!-- Send MFA Code via email or text -->
            </xsl:when>
            <xsl:when test="Params/c = 'qrcode'">
                <xsl:call-template name="qrLayout" /> <!-- Display QR code to configure user's authenticator app -->
            </xsl:when>
            <xsl:when test="Params/c = 'sms'">
                <xsl:call-template name="smsLayout" /> <!-- Display form to input user's mobile phone info -->
            </xsl:when>
            <xsl:when test="Params/c = 'help'">
                <xsl:call-template name="helpLayout" /> <!-- Display help info -->
            </xsl:when>
            <xsl:otherwise>
                <xsl:call-template name="configLayout" /> <!-- Display MFA config form -->
            </xsl:otherwise>
        </xsl:choose>
        <script type="text/javascript">
          $('.Appuser-layout-wrapper').css({'backgroundColor':'#ffffff', 'padding':'20px 50px'});
        </script>
    </xsl:template>

    <xsl:template name="configLayout">
<p>
We're committed to ensuring your account is secure and your data protected.  In keeping with that,
we require you to establish a secondary authentication method to access your account.
</p>
<p>
This is a simple process and can be done via a code sent by text message or using one of many popular
authentication apps you install on your mobile device.
</p>
<p>To get started, click Next to authenticate via text message.</p>

        <form id="login" name="login" action="/rps/login" method="post">
            <input type="hidden" name="submit" value="1" />
            <input type="hidden" name="c" value="config" />
            <input type="hidden" name="redirect">
                <xsl:attribute name="value">
                    <xsl:choose>
                        <xsl:when test="normalize-space(Params/redirect)">
                            <xsl:value-of select="Params/redirect" />
                        </xsl:when>
                        <xsl:otherwise></xsl:otherwise>
                    </xsl:choose>
                </xsl:attribute>
            </input>

<input type="hidden" id="Form_SMS" name="mfa_type" value="sms"/>

<input type="hidden" class="Input Form-input" id="Form_Email" name="Form_Email" value="{/Root/EmailPlain}" />
<input type="hidden" id="Form_Token" name="Form_Token" value="{/Root/Params/token}" />

            <fieldset class="Form-fieldset Form-fieldset-buttons">
                <xsl:call-template name="uiButton">
                    <xsl:with-param name="content" select="'Back to login'" />
                    <xsl:with-param name="type" select="'default'"/>
                    <xsl:with-param name="className" select="'Form-button'"/>
                    <xsl:with-param name="elemType" select="'button'"/>
                    <xsl:with-param name="onClick">location.href='/rps/login'</xsl:with-param>
                </xsl:call-template>

                <xsl:call-template name="uiButton">
                    <xsl:with-param name="content" select="'Next'" />
                    <xsl:with-param name="type" select="'primary'" />
                    <xsl:with-param name="className" select="'Form-button'" />
                    <xsl:with-param name="elemType" select="'submit'" />
                    <xsl:with-param name="id" select="'mysubmit'" />
                </xsl:call-template>
            </fieldset>

        </form>

        <script type="text/javascript">
        if(document.getElementById('Form_Email').checked || document.getElementById('Form_App').checked) {
          document.getElementById('mysubmit').removeAttribute("disabled");
        }
        </script>

    </xsl:template><!-- configLayout -->

    <xsl:template name="sendLayout">

      <xsl:variable name="email"><xsl:value-of select="/Root/EmailPlain" /></xsl:variable>

        <script type="text/javascript">
        x = document.getElementsByClassName("Layout-header-title");
        x[0].innerText="Verification Code Sent";
        </script>

        <xsl:choose>
          <xsl:when test="$cmd = 'scode'">
            <p>An email containing an authorization code has been sent to your email account.</p>
          </xsl:when>
          <xsl:when test="$cmd = 'tcode'">
            <p>A text containing an authorization code has been sent to your mobile phone.</p>
          </xsl:when>
        </xsl:choose>

        <form id="login" name="login" action="/rps/login" method="post">
            <input type="hidden" name="submit" value="1" />
            <!--input type="hidden" name="c" value="scode" /-->
            <input type="hidden" name="c" value="{$cmd}" />
            <input type="hidden" name="redirect" value="{/Root/Redirect}" />
            <input type="hidden" id="Form_Token" name="Form_Token" value="{Params/token}" readonly='true' />
            <input type="hidden" id="Form_MFAType" name="Form_MFAType" value="{/Root/MFAType}" />
            <input type="hidden" class="Input Form-input" id="Form_Email" name="Form_Email" value="{$email}" placeholder="" />

        <xsl:call-template name="uiButton">
            <xsl:with-param name="content" select="'Ok'" />
            <xsl:with-param name="type" select="'primary'" />
            <xsl:with-param name="className" select="'Form-button'" />
            <xsl:with-param name="elemType" select="'submit'" />
        </xsl:call-template>
        </form>

    </xsl:template><!-- sendLayout -->

    <xsl:template name="helpLayout">

      <xsl:variable name="email"><xsl:value-of select="/Root/EmailPlain" /></xsl:variable>

        <script type="text/javascript">
        x = document.getElementsByClassName("Layout-header-title");
        x[0].innerText="Additional Help &amp; Support";
        </script>


        <table style="width:100%"> <tr>
        <td style="width:10%">&#160;</td>
        <td>
<br/>
<p>For additional help and support, please contact the RoyaltyShare
support team at <a href="mailto:support@royaltyshare.com">support@royaltyshare.com</a>.</p>
        <form id="login" name="login" action="/rps/login" method="post">
            <input type="hidden" name="submit" value="1" />
            <input type="hidden" name="c" value="{$cmd}" />
            <input type="hidden" name="redirect" value="{/Root/Redirect}" />
            <input type="hidden" id="Form_Token" name="Form_Token" value="{Params/token}" readonly='true' />
            <input type="hidden" id="Form_MFAType" name="Form_MFAType" value="{/Root/MFAType}" />
            <input type="hidden" class="Input Form-input" id="Form_Email" name="Form_Email" value="{$email}" placeholder="" />

        </form>
<br/>
        <div style="float:right;">
            <xsl:call-template name="uiButton">
                <xsl:with-param name="content" select="'Back'" />
                <xsl:with-param name="type" select="'primary'" />
                <xsl:with-param name="elemType" select="'submit'" />
                <xsl:with-param name="onClick" select="'javascript:history.back()'" />
            </xsl:call-template>
        </div>
        </td>
        <td style="width:10%">&#160;</td>
        </tr></table>


    </xsl:template><!-- helpLayout -->

    <xsl:template name="qrLayout">

      <xsl:variable name="email"><xsl:value-of select="/Root/Email" /></xsl:variable>
      <xsl:variable name="emailPlain"><xsl:value-of select="/Root/EmailPlain" /></xsl:variable>
<style>
.rcorners2 {
  border-radius: 25px;
  border: 2px solid #c0c0c0;
  padding: 10px;
  width: 150px;
  height: 120px;
  text-align: center;
  background: #FFFFFF;
}
td.mfa {
  width:20%;
  text-align:center;
  vertical-align:top;
  font-size: 110%;
  font-weight: bold;
  padding-bottom: 50px;
}
tr.mfarow td{
  padding-bottom: 15px;
}
table#authIcons {
  border-collapse: separate;
}
</style>
        <script type="text/javascript">
        x = document.getElementsByClassName("Layout-header-title");
        x[0].innerText="";
        </script>
<table>
<tr><td colspan='2' style='text-align:center'>
<h2>Configure Your Authenticator</h2>
</td></tr>
<tr class="mfarow">
  <td class="mfa">Step 1:</td>
  <td>
    If you don't already have a preferred authenticator, please install one of the
following suggested apps on your mobile device.  If you do, skip to the next step.<br/>
    <table id='authIcons'>
      <tr>
      <td class="rcorners2">
         <img src="/production/images/mfa/google_auth_100x100.png" /><br/>
         Google Authenticator
      </td>
      <td>&#160;</td>
      <td class="rcorners2">
         <img src="/production/images/mfa/microsoft_auth_100x100.png" /><br/>
         Microsoft Authenticator
      </td>
      <td>&#160;</td>
      <td class="rcorners2">
         <img src="/production/images/mfa/okta_auth_100x100.png" /><br/>
         Okta Verify<br/>
         &#160;
      </td>
      </tr>
    </table>
  </td>
</tr>
<tr class="mfarow">
  <td class="mfa">Step 2:</td>
  <td>
    <div>Open your authenticator app and scan the QR code below.  This will allow you to add your RoyaltyShare account.</div>
    <div style="margin:auto;width:100%;">
    <img style="display:block; margin-left:auto; margin-right: auto;" src="{/Root/QRPath}" alt="Unable to display QR Code. Please choose alternate authentication method."/>
    </div>
  </td>
</tr>
<tr class="mfarow">
  <td class="mfa">Step 3:</td>
  <td>
Click <a href="/{$app}/login?c=authc&amp;email={$email}&amp;token={/Root/Params/token}&amp;qr={/Root/QRPath}&amp;mtype=2&amp;save=1">here</a> once you've successfully scanned the QR code into your authenticator and configured the account.<br/>
  </td>
</tr>
<tr class="mfarow">
  <td class="mfa">Step 4:</td>
  <td>
When prompted, enter the code from your authenticator.  And you're done!
  </td>
</tr>

<xsl:if test="/Root/MFAVerified = 1">
<tr>
  <td>&#160;</td>
  <td>
Click <a href="/{$app}/login?c=sms&amp;email={$email}&amp;token={/Root/Params/token}">here</a> to
revert back to authentication via text messsage.<br/><br/>
<!--p>Click <a href="/rps/login?c=help&amp;email={$email}&amp;token={Params/token}&amp;redirect={/Root/Redirect}">here</a> for additional assistance.</p-->
Click <a href="/rps/login?c=help">here</a> for additional assistance.
  </td>
</tr>
</xsl:if>

</table>
    </xsl:template> <!-- qrLayout -->


    <xsl:template name="smsLayout">

      <xsl:variable name="email"><xsl:value-of select="/Root/Email" /></xsl:variable>
      <xsl:variable name="emailPlain"><xsl:value-of select="/Root/EmailPlain" /></xsl:variable>

       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
       <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

        <script type="text/javascript">
        x = document.getElementsByClassName("Layout-header-title");
        x[0].innerText="Enter Your Phone Number";
        </script>

        <form id="login" name="login" action="/rps/login" method="post" >
            <input type="hidden" name="submit" value="1" />
            <input type="hidden" name="c" value="spn" />
            <input type="hidden" name="qr" value="{/Root/QRPath}" />
            <input type="hidden" id="Form_MFAType" name="Form_MFAType" value="{/Root/DefaultMFAType}" />
            <input type="hidden" id="Form_Phone" name="Form_Phone" value="" />
            <input type="hidden" class="Input Form-input" id="Form_Email" name="Form_Email" value="{$emailPlain}" placeholder="" />
            <input type="hidden" name="redirect">
                <xsl:attribute name="value">
                    <xsl:choose>
                        <xsl:when test="normalize-space(Params/redirect)">
                            <xsl:value-of select="Params/redirect" />
                        </xsl:when>
                        <xsl:otherwise></xsl:otherwise>
                    </xsl:choose>
                </xsl:attribute>
            </input>

            <xsl:choose>
                <xsl:when test="/Root/Form/*[@e = 'failed_logins']">
                    <xsl:call-template name="uiWarning">
                        <xsl:with-param name="type" select="'error'" />
                        <xsl:with-param name="className" select="'Login-general-error'" />
                        <xsl:with-param name="description">
                            <xsl:text>Too many failed logins.</xsl:text>
                        </xsl:with-param>
                    </xsl:call-template>
                </xsl:when>
                <xsl:when test="/Root//*[@e]">
                    <xsl:call-template name="uiWarning">
                        <xsl:with-param name="type" select="'error'" />
                        <xsl:with-param name="className" select="'Login-general-error'" />
                        <xsl:with-param name="description">
                            <xsl:text>Invalid Verification Code</xsl:text>
                        </xsl:with-param>
                    </xsl:call-template>
                </xsl:when>
                <xsl:otherwise>
                </xsl:otherwise>
            </xsl:choose>

            <fieldset>
                <div class="Form-item">
                    <label class="Form-label">
                        <div class="Form-input-wrapper">
                            <input type="hidden" id="Form_Token" name="Form_Token" value="{Params/token}" readonly='true' />
                            <div class="Form-error-text-wrapper">
                                <span class="Form-error" id="ERRORForm_Email"></span>
                            </div>
                        </div>
                    </label>
                </div>

                <div class="Form-item">
                    <label class="Form-label">
                        <span class="Form-label-caption">Enter Your Mobile Phone Number</span>
                        <div class="Form-input-wrapper">
                            <table>
                              <tr>
                              <td>
                            <input type="tel" class="Input Form-input" id="phone" name="phone"
                              value="{/Root/SMSPhoneNumber}"/>
                              </td>
                              <td>
                <xsl:call-template name="uiButton">
                    <xsl:with-param name="content" select="'Verify'" />
                    <xsl:with-param name="type" select="'primary'" />
                    <xsl:with-param name="className" select="'Form-button'" />
                    <xsl:with-param name="elemType" select="'submit'" />
                    <!-- xsl:with-param name="elemType" select="'button'" /-->
                    <xsl:with-param name="id" select="'mysubmit'" />
                </xsl:call-template>
                              </td>
                              </tr>
                            </table>
                            <div class="Form-error-text-wrapper">
                                <span class="Form-error" id="ERRORForm_Phone"></span>
                            </div>
                        </div>
                    </label>
                </div>
            </fieldset>

        </form>
        <div class="alert alert-info" style="display: none;"></div>

        <p>A verification code will be sent to your phone.</p>
        <!--xsl:choose>
        <xsl:when test="/Root/MFAType = 3">
            If you did not receive a code, click <a href="/rps/login?c=smscode&amp;email={$email}&amp;token={Params/token}">here</a> to resend it.<br/>
        </xsl:when>
        </xsl:choose-->

<!--xsl:if test="/Root/MFAVerified = 1">
        Click <a href="/rps/login?c=config&amp;email={$email}&amp;token={Params/token}">here</a> to choose another authentication method.<br/>
</xsl:if-->
        Click <a href="/rps/login?c=help&amp;email={$email}&amp;token={Params/token}&amp;redirect={/Root/Redirect}">here</a> for additional assistance.<br/>

        <script type="text/javascript">document.forms["login"].elements["phone"].focus();</script>

        <script type="text/javascript">


           // initialize these constants when document is fully loaded
           $(function() {
             const phoneInputField = document.querySelector("#phone");
             const phoneInput = window.intlTelInput(phoneInputField, {
                utilsScript:
                   "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
             });

             const info = document.querySelector(".alert-info");

             document.getElementById('phone').addEventListener('keydown', function process(event) {
               const keyCode = event.keyCode;
               const excludedKeys = [8, 13, 32, 39, 45, 46, 189, 127];
               if ( !((keyCode &gt;= 48 &amp;&amp; keyCode &lt;= 57) ||
                    (keyCode &gt;= 96 &amp;&amp; keyCode &lt;= 105) ||
                    (excludedKeys.includes(keyCode)))) {
                 event.preventDefault();
               }
             });

             document.getElementById('login').addEventListener('submit', function process(event) {
               //event.preventDefault();

               const phoneNumber = phoneInput.getNumber();

               info.style.display = "";

               var error = phoneInput.getValidationError();
               if ( error === 0 ) {
                  //info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
                  $('#Form_Phone').val(phoneNumber);
                  return true;
               } else {
                   info.innerHTML = `Not a valid number`;
                   event.preventDefault();
               }
               return false;
             });
           });
        </script>

    </xsl:template> <!-- smsLayout -->
</xsl:stylesheet>
