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

<?php
  $layoutBlade = 'layouts.login';
  if(config('app.internalName') === 'rs'){
    $layoutBlade = 'layouts.login-rs';
  }
?>
@extends($layoutBlade)
@section('content')

<div id="confirmAuthTokenComponent" v-cloak>
  <div class="d-flex align-items-center flex-column text-center p-3">
        <div class="title">Verification Code</div>
    </div>
  <form action="{{route('process-confirm-auth-token')}}" class="form" method="post">
    <div class="icon_wrap">
      <img src="{{asset('/img/login_icon.svg')}}" alt="">
    </div>
    @csrf
    @if(session('message'))
    <div class="alert alert-info">{{session('message')}}</div>
    @endif
    <div class="form-group">
      <div class="p-2 text-dark">
        Please enter the code sent to <b>{{ $maskedCellNumber }}.</b>
      </div>
      <input type="tel" class="form-control" name="confirmation_token" autocomplete="off" autofocus required value="{{old('confirmation_token')}}">
    </div>
    <div class="row">
      <div class="col-12">
        <input type="submit" name="sendToken" value="Confirm Code" class="btn btn-pry rounded-pill py-2 px-lg-4 wb-100">
      </div>
    </div>
    <div class="mt-3">
      <div class="d-flex align-items-center flex-wrap">
        Didn't recieve the verification code?
        <a href="#" class="ms-1 text-orange" resend-token>
          <span v-if="!loading">resend code</span>
          <span v-else><i class="fas fa-circle-notch fa-spin"></i> Resending...</span>
        </a>
      </div>
      <div class="">
        <a href="{{ route('login') }}" class="text-orange">Change phone number</a>
      </div>
    </div>
    <div v-if="response" class="text-center mb-4">
      <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>
  </form>
</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();
	// @VJK Why is this needed?
	$('[name=confirmation_token]').focus();
    }
  });
</script>
@endsection