Step Up Authentication

<sl-step-up-authentication></sl-step-up-authentication>

<sl-step-up-authentication id="basic-example"></sl-step-up-authentication>

<script>
  const auth = document.getElementById('basic-example');
  
  auth.addEventListener('sl-verify', (e) => {
    console.log('Code to verify:', e.detail.code);
    auth.loading = true;
    
    setTimeout(() => {
      auth.loading = false;
      alert('Verification successful! Code: ' + e.detail.code);
      auth.clear();
    }, 1500);
  });

  auth.addEventListener('sl-resend', () => {
    console.log('Resend code requested');
    alert('New verification code sent!');
  });
</script>

<sl-step-up-authentication
  title="Email Verification"
  message="We've sent a 6-digit code to: "
  masked-contact="user@*****.com"
></sl-step-up-authentication>

<sl-step-up-authentication
  title="Enter Your PIN"
  message="Please enter your 4-digit security PIN"
  masked-contact=""
  length="4"
  verify-text="Unlock"
></sl-step-up-authentication>

<br /><br />

<sl-step-up-authentication
  title="Enter Verification Code"
  message="Enter the 8-digit code from your authenticator app"
  masked-contact=""
  length="8"
></sl-step-up-authentication>

<sl-step-up-authentication
  show-cancel
  cancel-text="Go Back"
  id="cancel-example"
></sl-step-up-authentication>

<script>
  document.getElementById('cancel-example').addEventListener('sl-cancel', () => {
    alert('Authentication cancelled');
  });
</script>

<sl-step-up-authentication
  loading
  id="loading-demo"
></sl-step-up-authentication>

<br />
<sl-button onclick="document.getElementById('loading-demo').loading = !document.getElementById('loading-demo').loading">
  Toggle Loading
</sl-button>

<sl-step-up-authentication>
  <sl-alert variant="primary" open>
    <sl-icon slot="icon" name="fas-circle-info"></sl-icon>
    <strong>Security Notice:</strong> For your protection, we need to verify your identity.
  </sl-alert>
</sl-step-up-authentication>

<sl-step-up-authentication
  auto-verify
  id="auto-verify-example"
  title="Quick Verification"
  message="Code will be verified automatically when complete"
  masked-contact="*******1100"
></sl-step-up-authentication>

<div id="auto-verify-result" style="margin-top: 16px; padding: 12px; background: #f0f0f0; border-radius: 4px; display: none;">
  <strong>Verification Result:</strong> <span id="result-text"></span>
</div>

<script>
  const autoAuth = document.getElementById('auto-verify-example');
  const resultDiv = document.getElementById('auto-verify-result');
  const resultText = document.getElementById('result-text');
  
  autoAuth.addEventListener('sl-verify', (e) => {
    console.log('Auto-verifying code:', e.detail.code);
    autoAuth.loading = true;
    
    setTimeout(() => {
      autoAuth.loading = false;
      resultDiv.style.display = 'block';
      resultDiv.style.background = '#d4edda';
      resultDiv.style.color = '#155724';
      resultText.textContent = 'Code ' + e.detail.code + ' verified successfully!';
      
      setTimeout(() => {
        autoAuth.clear();
        resultDiv.style.display = 'none';
      }, 3000);
    }, 1000);
  });

  autoAuth.addEventListener('sl-resend', () => {
    resultDiv.style.display = 'block';
    resultDiv.style.background = '#d1ecf1';
    resultDiv.style.color = '#0c5460';
    resultText.textContent = 'New verification code sent!';
    setTimeout(() => {
      resultDiv.style.display = 'none';
    }, 2000);
  });
</script>

<sl-step-up-authentication
  id="send-code-example"
  message-before-send="We will send a SMS with a 6-digit code to: "
  message-after-send="We've sent a SMS with a 6-digit code to: "
  masked-contact="+1 (555) ***-1234"
  auto-verify
></sl-step-up-authentication>

<script>
  const sendAuth = document.getElementById('send-code-example');
  
  // Set up send code handler
  sendAuth.sendCodeHandler = async () => {
    // Simulate API call to send verification code
    console.log('Calling API to send verification code...');
    
    await new Promise(resolve => setTimeout(resolve, 1500));
    console.log('Verification code sent!');
    
    // If the API call fails, throw an error:
    // throw new Error('Failed to send code');
  };
  
  // Handle verification
  sendAuth.addEventListener('sl-verify', async (e) => {
    console.log('Verifying code:', e.detail.code);
    sendAuth.loading = true;
    
    try {
      // Simulate API call to verify code
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // Simulate success/error based on code
      if (e.detail.code === '123456') {
        sendAuth.showSuccess();
      } else {
        sendAuth.showError('Enter a valid code');
      }
    } catch (error) {
      sendAuth.showError(error.message);
    }
  });
  
  // Handle resend
  sendAuth.addEventListener('sl-resend', async () => {
    console.log('Resending verification code...');
    
    // You can call sendCode() programmatically
    await sendAuth.sendCode();
  });
</script>

<sl-step-up-authentication
  id="no-resend-example"
  message-before-send="We will send a code to your preferred authentication app."
  message-after-send="Check your preferred authentication app for your code and enter it below."
  masked-contact=""
  auto-verify
  show-resend="false"
></sl-step-up-authentication>

<script>
  const noResendAuth = document.getElementById('no-resend-example');
  
  // Explicitly set showResend to false
  noResendAuth.showResend = false;
  console.log('showResend property:', noResendAuth.showResend);
  
  // Set up send code handler
  noResendAuth.sendCodeHandler = async () => {
    console.log('Calling API to send verification code...');
    await new Promise(resolve => setTimeout(resolve, 1500));
    console.log('Verification code sent!');
  };
  
  // Handle verification
  noResendAuth.addEventListener('sl-verify', async (e) => {
    console.log('Verifying code:', e.detail.code);
    noResendAuth.loading = true;
    
    try {
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      if (e.detail.code === '123456') {
        noResendAuth.showSuccess();
      } else {
        noResendAuth.showError('Enter a valid code');
      }
    } catch (error) {
      noResendAuth.showError(error.message);
    }
  });
</script>

<sl-step-up-authentication
  verify-text="Confirm Code"
  resend-text="Send Again"
  show-cancel
  cancel-text="Skip"
></sl-step-up-authentication>

<sl-step-up-authentication id="api-example"></sl-step-up-authentication>

<div style="display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap;">
  <sl-button size="small" onclick="document.getElementById('api-example').setValue('123456')">
    Set Value
  </sl-button>
  <sl-button size="small" onclick="alert(document.getElementById('api-example').getValue())">
    Get Value
  </sl-button>
  <sl-button size="small" onclick="document.getElementById('api-example').clear()">
    Clear
  </sl-button>
  <sl-button size="small" onclick="document.getElementById('api-example').focus()">
    Focus
  </sl-button>
  <sl-button size="small" onclick="alert(document.getElementById('api-example').isComplete())">
    Is Complete?
  </sl-button>
  <sl-button size="small" onclick="document.getElementById('api-example').verify()">
    Trigger Verify
  </sl-button>
</div>