184 lines
8.8 KiB
PHP
184 lines
8.8 KiB
PHP
@extends('portal.layouts.auth')
|
|
|
|
@section('content')
|
|
|
|
<style>
|
|
.otp-input {
|
|
height: 58px;
|
|
padding: 0 10px;
|
|
text-align: center;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
border-radius: 8px;
|
|
border: 1px solid #e0e0e0;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
.otp-input:focus {
|
|
border-color: #007bff;
|
|
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
|
}
|
|
.otp-input:focus-visible {
|
|
outline: none;
|
|
}
|
|
.otp-input:hover {
|
|
border-color: #007bff;
|
|
}
|
|
.otp-input:active {
|
|
border-color: #007bff;
|
|
}
|
|
.otp-input:disabled {
|
|
background-color: #f8f9fa;
|
|
border-color: #e9ecef;
|
|
color: #adb5bd;
|
|
}
|
|
.gap-2 {
|
|
gap: .5rem;
|
|
}
|
|
</style>
|
|
<!-- Content -->
|
|
|
|
<div class="authentication-wrapper authentication-2 ui-bg-cover ui-bg-overlay-container px-4" style="background-image: url({{asset('images/back.jpg')}});">
|
|
<div class="ui-bg-overlay bg-dark opacity-25"></div>
|
|
|
|
<div class="authentication-inner py-5">
|
|
|
|
<div class="card">
|
|
|
|
@include('layouts.includes.header-language')
|
|
|
|
<div class="p-4 p-sm-4" style="padding-bottom: 1.5rem !important;">
|
|
<!-- Logo -->
|
|
<div class="d-flex justify-content-center align-items-center pb-2 mb-2">
|
|
<div class="">
|
|
<div class="w-100 position-relative">
|
|
<a href="https://www.mivita.care"><img src="{{ asset('/images/logo_mivita.png') }}" alt="mivita.care" class=""></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- / Logo -->
|
|
<!-- Form -->
|
|
<form method="POST" class="my-3" action="{{ route('portal.login.verify-otp') }}" aria-label="{{ __('portal.login_button') }}" id="otp-form">
|
|
@csrf
|
|
<h4 class="text-center mb-4">{{ __('portal.verify_otp_title') }}</h4>
|
|
<div class="form-group">
|
|
<label class="form-label text-center">{{ __('portal.verify_otp_description') }}</label>
|
|
<div class="mb-3">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<input type="text" class="form-control otp-input" maxlength="1" id="otp1" name="otp1" placeholder="" value="{{ isset($otp_value) && strlen($otp_value) === 6 ? $otp_value[0] : '' }}">
|
|
<input type="text" class="form-control otp-input" maxlength="1" id="otp2" name="otp2" placeholder="" value="{{ isset($otp_value) && strlen($otp_value) === 6 ? $otp_value[1] : '' }}">
|
|
<input type="text" class="form-control otp-input" maxlength="1" id="otp3" name="otp3" placeholder="" value="{{ isset($otp_value) && strlen($otp_value) === 6 ? $otp_value[2] : '' }}">
|
|
<input type="text" class="form-control otp-input" maxlength="1" id="otp4" name="otp4" placeholder="" value="{{ isset($otp_value) && strlen($otp_value) === 6 ? $otp_value[3] : '' }}">
|
|
<input type="text" class="form-control otp-input" maxlength="1" id="otp5" name="otp5" placeholder="" value="{{ isset($otp_value) && strlen($otp_value) === 6 ? $otp_value[4] : '' }}">
|
|
<input type="text" class="form-control otp-input" maxlength="1" id="otp6" name="otp6" placeholder="" value="{{ isset($otp_value) && strlen($otp_value) === 6 ? $otp_value[5] : '' }}">
|
|
</div>
|
|
</div>
|
|
{{-- Hidden field to combine OTP values --}}
|
|
<input type="hidden" name="otp" id="otp" value="{{ isset($otp_value) && strlen($otp_value) === 6 ? $otp_value : '' }}">
|
|
<input type="hidden" name="email" id="email" value="{{ $email }}">
|
|
</div>
|
|
@error('otp')
|
|
<div class="text-danger text-center font-weight-bold mt-1">{{ $message }}</div>
|
|
@enderror
|
|
<div class="d-flex justify-content-between align-items-center m-0 mt-3">
|
|
<button type="submit" class="btn btn-primary btn-block">{{ __('portal.login_button') }}</button>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center m-0 mt-4">
|
|
<p class="text-center small">
|
|
{{ __('portal.verify_otp_resend') }}<br>
|
|
<a class="btn btn-link btn-xs btn-secondary mt-2" href="{{ route('portal.login.form') }}">{{ __('portal.verify_otp_resend_link') }}</a>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
<!-- / Form -->
|
|
|
|
<div class="mt-2 text-center justify-content-center">
|
|
<button type="button" class="btn btn-outline-primary mt-2 btn-sm update_modal_data_load" data-url="{{ route('portal.loading_modal') }}" data-data="data_protection" data-target="#modal-loading">{{__('register.data_protection')}}</button>
|
|
<button type="button" class="btn btn-outline-primary mt-2 btn-sm update_modal_data_load" data-url="{{ route('portal.loading_modal') }}" data-data="imprint" data-target="#modal-loading">{{__('imprint')}}</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const inputs = document.querySelectorAll('.otp-input');
|
|
const otpForm = document.getElementById('otp-form');
|
|
const hiddenOtpField = document.getElementById('otp');
|
|
|
|
inputs.forEach((input, index) => {
|
|
input.addEventListener('input', (e) => {
|
|
// Move to next input if current one is filled
|
|
if (input.value.length === 1 && index < inputs.length - 1) {
|
|
inputs[index + 1].focus();
|
|
}
|
|
combineOtpValues(); // Update hidden field on input
|
|
});
|
|
|
|
input.addEventListener('keydown', (e) => {
|
|
// Move to previous input on backspace if current one is empty
|
|
if (e.key === 'Backspace' && input.value.length === 0 && index > 0) {
|
|
inputs[index - 1].focus();
|
|
}
|
|
combineOtpValues(); // Update hidden field on keydown
|
|
});
|
|
|
|
input.addEventListener('paste', (e) => {
|
|
e.preventDefault();
|
|
const pasteData = (e.clipboardData || window.clipboardData).getData('text');
|
|
const digits = pasteData.replace(/\D/g, '').split(''); // Get only digits
|
|
|
|
inputs.forEach((inputField, i) => {
|
|
if (digits[i]) {
|
|
inputField.value = digits[i];
|
|
if (i < inputs.length - 1 && digits.length > 1) { // Move focus if pasting multiple digits
|
|
inputs[i + 1].focus();
|
|
}
|
|
} else {
|
|
inputField.value = ''; // Clear if paste data is shorter
|
|
}
|
|
});
|
|
if(digits.length >= inputs.length) {
|
|
inputs[inputs.length - 1].focus(); // Focus last field if paste is long enough
|
|
}
|
|
combineOtpValues(); // Update hidden field after paste
|
|
});
|
|
});
|
|
|
|
// Combine OTP values into the hidden field before submitting
|
|
function combineOtpValues() {
|
|
let combinedValue = '';
|
|
inputs.forEach(input => {
|
|
combinedValue += input.value;
|
|
});
|
|
hiddenOtpField.value = combinedValue;
|
|
console.log(hiddenOtpField.value);
|
|
}
|
|
|
|
// Ensure combined value is updated on form submit
|
|
otpForm.addEventListener('submit', function(e) {
|
|
combineOtpValues();
|
|
// Basic validation: ensure all 6 digits are entered
|
|
if (hiddenOtpField.value.length !== 6) {
|
|
e.preventDefault(); // Prevent form submission
|
|
// Optionally: show an error message to the user
|
|
alert('Bitte geben Sie alle 6 Ziffern des OTP-Codes ein.');
|
|
}
|
|
});
|
|
|
|
// Automatically focus the first input field if it's empty
|
|
if(inputs[0].value === '') {
|
|
inputs[0].focus();
|
|
} else if(hiddenOtpField.value.length === 6) {
|
|
// If prefilled, focus the submit button or last input
|
|
inputs[inputs.length - 1].focus();
|
|
}
|
|
|
|
});
|
|
</script>
|
|
@endsection
|