75 lines
4.7 KiB
PHP
75 lines
4.7 KiB
PHP
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-md-6">
|
|
<div class="text-center mt-5 mb-4">
|
|
<img src="{{ asset('images/logo_unioil.png') }}" alt="Unioil Logo" style="max-width: 200px;">
|
|
</div>
|
|
<div class="mb-3">
|
|
<h1 class="mb-0">Welcome</h1>
|
|
@if(!$userVerified)
|
|
<span style="font-size: 12px;">Sign in to continue</span>
|
|
@endif
|
|
</div>
|
|
|
|
<form wire:submit.prevent="{{ $userVerified ? 'login' : 'checkUser' }}">
|
|
<div class="mb-3 position-relative">
|
|
@if(!$userVerified)
|
|
<label class="form-label fw-medium" style="color: #005598;">Enter Username</label>
|
|
<input type="text" class="form-control @error('username') is-invalid @enderror" wire:model="username" placeholder="User name" readonly="{{ $userVerified ? 'true' : 'false' }}">
|
|
@error('username') <div class="invalid-feedback">{{ $message }}</div> @enderror
|
|
@else
|
|
<div class="d-flex align-items-center bg-light border rounded p-2 mb-3" style="border-color: #d9d9d9;">
|
|
<span class="input-group-text bg-transparent border-0"><i class="bi bi-person"></i></span>
|
|
<span class="flex-grow-1 text-muted">{{ $username }}</span>
|
|
<button type="button" wire:click="backToLogin" class="btn btn-link p-0 text-muted"><i class="bi bi-x"></i></button>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@if($userVerified)
|
|
<div class="mb-3">
|
|
<label class="form-label fw-medium" style="color: #005598;">Enter Password</label>
|
|
<input type="password" class="form-control @error('password') is-invalid @enderror" wire:model="password" placeholder="Password">
|
|
@error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
|
|
</div>
|
|
@endif
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-6">
|
|
@if($userVerified)
|
|
<a href="#" wire:click="showModalChangePassword" style="color: #005598;">Forgot Password</a>
|
|
@else
|
|
<a href="#" wire:click="showModalForgotUsername" style="color: #005598;">Forgot Username</a>
|
|
@endif
|
|
</div>
|
|
<div class="col-6 text-end">
|
|
<button type="submit" class="btn btn-primary w-100" wire:loading.attr="disabled" wire:target="{{ $userVerified ? 'login' : 'checkUser' }}" style="background-color: {{ $userVerified ? ($password ? '#E74610' : '#FCFCFC') : ($username ? '#E74610' : '#FCFCFC') }}; border-color: {{ $userVerified ? ($password ? '#E74610' : '#D9D9D9') : ($username ? '#E74610' : '#D9D9D9') }};" {{ $userVerified ? ($password ? '' : 'disabled') : ($username ? '' : 'disabled') }}>
|
|
<span wire:loading wire:target="{{ $userVerified ? 'login' : 'checkUser' }}">Processing...</span>
|
|
<span wire:loading.remove wire:target="{{ $userVerified ? 'login' : 'checkUser' }}">Next</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Modal -->
|
|
@if($isModalVisible)
|
|
<div class="modal fade show d-block" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
|
|
<div class="modal-dialog modal-dialog-centered" style="max-width: 337px;">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<h4>Forgot {{ $forgotUsername ? 'Username' : 'Password' }}</h4>
|
|
<p>
|
|
To have your {{ $forgotUsername ? 'username' : 'password' }} reset, please contact <br>
|
|
Unioil's admin at <a href="mailto:{{ $userEmail }}" style="color: #005598;">{{ $userEmail }}</a>
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-end">
|
|
<button wire:click="hideModal" class="btn btn-primary" style="background-color: #E74610; border-color: #E74610; width: 64px;">Ok</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div> |