lhr/resources/views/confirm-auth-token.blade.php

@extends('layouts.login')
@section('content')

<div id="confirmAuthTokenComponent" class="blue-card p-4" v-cloak>
  <form action="{{route('process-confirm-auth-token')}}" method="post">
    <div class="text-center d-flex align-items-center my-3">
      <img src="/img/icon.svg" alt="Logo" height="35">
      <h5 class="font-weight-bold ml-2 mb-0">Confirm Token</h5>
    </div>
    @csrf
    @if(session('message'))
    <div class="alert alert-info">{{session('message')}}</div>
    @endif
    <div class="form-group">
      <label>
        <strong>
          Please enter the confirmation token sent to {{ $maskedCellNumber }}.
        </strong>
      </label>
      <input class="form-control" name="confirmation_token" autocomplete="off" autofocus value="{{old('confirmation_token')}}">
    </div>
    <div class="row">
      <div class="col-12 text-center">
        <input type="submit" name="sendToken" value="Confirm Token" class="btn btn-orange btn-sm w-100 py-2">
      </div>
    </div>
  </form>
  <div class="text-center mt-3">
    <div class="d-flex align-items-center flex-wrap justify-content-center">     
        <a href="#" class="text-underline" resend-token>
          <u v-if="!loading">Resend token</u>
          <u v-else><i class="fas fa-circle-notch fa-spin"></i> Resending...</u>
        </a>
      <span class="mx-2 font-weight-bold">OR</span>
      <a href="{{ route('login') }}"><u>Change phone number</u></a>
    </div>
  </div>
  <div v-if="response" class="text-center">
    <small v-if="!response.success" class="text-danger"><i class="fas fa-exclamation-triangle"></i> @{{ response.message }}</small>
    <small v-else class="text-success"><i class="fas fa-check-circle"></i> Confirmation code has been resent!</small>
  </div>
  <p><small class="text-center d-block text-muted my-3">If you have any questions at all, please contact your Dedicated HR Representative at the phone number or email displayed inside this portal.</small></p>
</div>

<script>
  var confirmAuthTokenComponent = new Vue({
    el: '#confirmAuthTokenComponent',
    data: {
      loading: false,
      response: null
    },
    delimiters: ['@[[', ']]'],
    methods: {
      initResendConfirmationToken: function() {
        var self = this;
        $('[resend-token]').click(function(evt) {
          evt.preventDefault();
          if (self.loading) return;
          self.loading = true;
          $.post("{{ route('resend-sms-auth-token') }}", {}, function(response) {
            self.loading = false;
            self.response = response;
          }, 'json');
        });
      },
      init: function() {
        this.initResendConfirmationToken();
      },
    },
    mounted: function() {
      this.init();
    }
  });
</script>
@endsection