397 lines
16 KiB
PHP
Executable File
397 lines
16 KiB
PHP
Executable File
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{ config('app.name', 'Laravel') }}</title>
|
|
<link href="{{ asset('StyleAdmin/css/app.css') }}" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="icon" type="image/x-icon" href="{{ URL::asset('assets/dist/img/favicon.ico') }}">
|
|
|
|
<!-- Google Font: Source Sans Pro -->
|
|
<link rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="{{ asset('assets/plugins/fontawesome-free/css/all.min.css') }}">
|
|
<!-- icheck bootstrap -->
|
|
<link rel="stylesheet" href="{{ asset('assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
|
|
<!-- Theme style -->
|
|
|
|
<link rel="stylesheet" href="{{ asset('assets/dist/css/adminlte.min.css') }}">
|
|
|
|
|
|
<!-- Inclusão do jQuery -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
|
|
</head>
|
|
|
|
<style>
|
|
body {
|
|
animation: theme 21s linear infinite;
|
|
}
|
|
|
|
body:after,
|
|
body:before {
|
|
content: '';
|
|
display: block;
|
|
position: fixed;
|
|
z-index: -1;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgba(0, 0, 0, 0.05);
|
|
animation: background 90s linear infinite;
|
|
}
|
|
|
|
body:after {
|
|
left: 15vw;
|
|
}
|
|
|
|
body:before {
|
|
right: 15vw;
|
|
animation-delay: -30s;
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
@keyframes theme {
|
|
|
|
0%,
|
|
100% {
|
|
background: #09255C;
|
|
}
|
|
|
|
33% {
|
|
background: #EAF3F6;
|
|
}
|
|
|
|
66% {
|
|
background: #00B0EA;
|
|
}
|
|
}
|
|
|
|
@keyframes background {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
<body class="hold-transition login-page">
|
|
<div class="container mt-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">{{ __('Reset Password') }}</div>
|
|
|
|
<div class="card-body">
|
|
<form method="POST" action="{{ route('password.update') }}">
|
|
@csrf
|
|
|
|
<input type="hidden" name="token" value="{{ $token }}">
|
|
|
|
|
|
<div class="row">
|
|
|
|
<label for="email">{{ __('E-Mail Address') }}</label>
|
|
|
|
<div class="input-group mb-3">
|
|
<input id="email" type="email"
|
|
class="form-control @error('email') is-invalid @enderror" name="email"
|
|
value="{{ $email ?? old('email') }}" required autocomplete="email" autofocus
|
|
placeholder="Email">
|
|
<div class="input-group-append">
|
|
<div class="input-group-text">
|
|
<span class="fa fa-envelope"></span>
|
|
</div>
|
|
</div>
|
|
|
|
@error('email')
|
|
<span class="invalid-feedback" role="alert">
|
|
<strong>{{ $message }}</strong>
|
|
</span>
|
|
@enderror
|
|
</div>
|
|
|
|
@error('email')
|
|
<span class="invalid-feedback" role="alert">
|
|
<strong>{{ $message }}</strong>
|
|
</span>
|
|
@enderror
|
|
|
|
</div> <!-- ./row -->
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-sm mt-2">
|
|
|
|
<label for="password">{{ __('Password') }}</label>
|
|
|
|
|
|
<div class="input-group mb-3">
|
|
<input id="password" type="password"
|
|
class="form-control @error('password') is-invalid @enderror" name="password"
|
|
required autocomplete="new-password" placeholder="Definir Nova Senha...">
|
|
<div class="input-group-append">
|
|
<div class="input-group-text">
|
|
<span class="fa fa-key"></span>
|
|
</div>
|
|
</div>
|
|
|
|
@error('password')
|
|
<span class="invalid-feedback" role="alert">
|
|
<strong>{{ $message }}</strong>
|
|
</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="password-requirements">
|
|
<ul id="password-criteria" style=" display: none;">
|
|
<li id="min-length">Pelo menos 8 caracteres</li>
|
|
<li id="upper-case">Uma letra maiúscula</li>
|
|
<li id="lower-case">Uma letra minúscula</li>
|
|
<li id="one-number">Um número</li>
|
|
<li id="special-char">Um caractere especial (@$!%*?&)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div> <!-- ./col-sm -->
|
|
|
|
<div class="col-sm mt-2">
|
|
|
|
<label for="password-confirm">{{ __('Confirm Password') }}</label>
|
|
|
|
|
|
<div class="input-group mb-3 ">
|
|
<input id="password-confirm" type="password" class="form-control"
|
|
name="password_confirmation" required autocomplete="new-password">
|
|
|
|
<div class="input-group-append">
|
|
<div class="input-group-text">
|
|
<span class="fa fa-unlock-alt"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="project-password-confirm-valid"></div>
|
|
|
|
</div>
|
|
</div> <!-- ./row -->
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-sm-8">
|
|
|
|
</div>
|
|
<div class="col-sm-4 m-3">
|
|
<button type="submit" class="btn btn-primary btn-block" id="submitBtn"
|
|
disabled>Submeter</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="{{ asset('js/app.js') }}" defer></script>
|
|
</body>
|
|
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
// Esta funcao foi necessaria, pois devido ao css e script para funcionar a exibicao das bandeiras, sem esta funcao, sempre que click no input, a selecao de bandeiras some, ate click fora do input
|
|
//Nao mexer se voce quiser, ter um select de paises bonito dentro do input XD
|
|
function ensureFlagContainerVisibility() {
|
|
const flagContainer = document.querySelector('.flag-container');
|
|
const countryList = document.querySelector('.country-list');
|
|
|
|
// Verifica se o .country-list está ativo
|
|
const isCountryListActive = countryList && countryList.classList.contains('active');
|
|
|
|
if (!flagContainer) {
|
|
console.log('Flag container não encontrado, inserindo novamente...');
|
|
// Insira o código para reinserir o .flag-container no DOM aqui
|
|
} else {
|
|
if (isCountryListActive) {
|
|
// Se .country-list estiver ativo, esconde .flag-container
|
|
flagContainer.style.display = 'none';
|
|
} else {
|
|
// Se .country-list não estiver ativo, mostra .flag-container
|
|
flagContainer.style.display = 'block'; // Garantindo que não esteja escondido
|
|
flagContainer.style.position = 'absolute'; // Mantendo a posição
|
|
flagContainer.style.left = '0px'; // Ajustando a posição horizontal conforme necessário
|
|
flagContainer.style.top = '0px'; // Ajustando a posição vertical conforme necessário
|
|
flagContainer.style.zIndex = '9999'; // Garantindo que esteja acima de outros elementos
|
|
}
|
|
}
|
|
}
|
|
|
|
// Chamando a função imediatamente para aplicar os estilos e configurações iniciais
|
|
ensureFlagContainerVisibility();
|
|
// Configurando um intervalo para verificar e aplicar os estilos periodicamente
|
|
setInterval(ensureFlagContainerVisibility, 50); // Verifica a cada 0.05 segundo
|
|
|
|
// Todas as Validacoes comecam a 'false' e se alteram em tempo real de acordo com o text em cada input
|
|
var validationState = {
|
|
password: false,
|
|
password_confirmation: false
|
|
};
|
|
|
|
// Validação AJAX
|
|
function validateField(type, value) {
|
|
$.ajax({
|
|
url: '{{ route('validateForm') }}',
|
|
type: 'GET',
|
|
data: {
|
|
_token: $('input[name="_token"]').val(), // CSRF token
|
|
type: type,
|
|
value: value
|
|
},
|
|
success: function(response) {
|
|
|
|
if (response['result_' + type] === 0) {
|
|
validationState['pending_' + type] = true;
|
|
updateSubmitButtonState();
|
|
|
|
} else {
|
|
validationState['pending_' + type] = false;
|
|
updateSubmitButtonState();
|
|
}
|
|
// console.log(response);
|
|
|
|
updateUI(type, response['result_' + type]);
|
|
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error("Erro na validação: ", error);
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
|
|
// Função para atualizar o estado do botão de submissão
|
|
function updateSubmitButtonState() {
|
|
var allValid = Object.values(validationState).every(isValid => isValid);
|
|
$('#submitBtn').prop('disabled', !allValid);
|
|
console.log(validationState); // Log do estado atual de validação
|
|
}
|
|
|
|
$('input[name="password"]').on('focus', function() {
|
|
$('#password-criteria').show();
|
|
});
|
|
$('input[name="password"]').on('blur', function() {
|
|
// Você pode adicionar condições aqui para decidir quando esconder
|
|
// Por exemplo, só esconder se a senha passar em todos os critérios
|
|
$('#password-criteria').hide();
|
|
});
|
|
|
|
// Campo de Password
|
|
$('input[name="password"]').on('input', function() {
|
|
|
|
var password = $(this).val();
|
|
|
|
// Verifica o comprimento da senha
|
|
var minLength = password.length >= 8;
|
|
$('#min-length').css('color', minLength ? 'green' : 'red');
|
|
|
|
// Verifica a presença de uma letra maiúscula
|
|
var upperCase = /[A-Z]/.test(password);
|
|
$('#upper-case').css('color', upperCase ? 'green' : 'red');
|
|
|
|
// Verifica a presença de uma letra minúscula
|
|
var lowerCase = /[a-z]/.test(password);
|
|
$('#lower-case').css('color', lowerCase ? 'green' : 'red');
|
|
|
|
// Verifica a presença de um número
|
|
var oneNumber = /\d/.test(password);
|
|
$('#one-number').css('color', oneNumber ? 'green' : 'red');
|
|
|
|
// Verifica a presença de um caractere especial
|
|
var specialChar = /[@$!%*?&]/.test(password);
|
|
$('#special-char').css('color', specialChar ? 'green' : 'red');
|
|
|
|
// Verifica se todos os requisitos foram atendidos
|
|
validationState.password = minLength && upperCase && lowerCase && oneNumber &&
|
|
specialChar;
|
|
if (validationState.password) {
|
|
$(this).css('border', '2px solid green').removeClass('invalid-input').addClass(
|
|
'valid-input');
|
|
$('#project-password-valid').text('Senha forte.').css('color', 'green');
|
|
} else {
|
|
$(this).css('border', '2px solid red').removeClass('valid-input').addClass(
|
|
'invalid-input');
|
|
}
|
|
|
|
// Chama a função para atualizar o estado do botão de submissão, se necessário
|
|
updateSubmitButtonState();
|
|
});
|
|
|
|
|
|
$('input[name="password_confirmation"]').on('input', function() {
|
|
var password = $('input[name="password"]').val();
|
|
var confirmPassword = $(this).val();
|
|
|
|
// Verifica se as senhas são iguais e se a confirmação da senha tem comprimento igual à senha
|
|
if (password === confirmPassword && confirmPassword.length === password.length) {
|
|
$(this).css('border', '2px solid green').removeClass('invalid-input').addClass(
|
|
'valid-input');
|
|
$('#project-password-confirm-valid').text('As senhas coincidem.').css('color', 'green');
|
|
validationState.password_confirmation = true;
|
|
} else if (confirmPassword.length < password.length) {
|
|
// Se a confirmação da senha é menor do que a senha, não faz nada (não mostra erro ainda)
|
|
$(this).css('border', '1px solid #ced4da').removeClass('invalid-input valid-input');
|
|
$('#project-password-confirm-valid').text(''); // Limpa qualquer mensagem anterior
|
|
validationState.password_confirmation =
|
|
false; // Considera inválido até que os comprimentos batam
|
|
} else {
|
|
// Mostra mensagem de erro somente se os comprimentos são iguais mas as senhas não coincidem
|
|
$(this).css('border', '2px solid red').removeClass('valid-input').addClass(
|
|
'invalid-input');
|
|
$('#project-password-confirm-valid').text('As senhas não coincidem.').css('color',
|
|
'red');
|
|
validationState.password_confirmation = false;
|
|
}
|
|
|
|
// Atualiza o estado do botão de submissão a cada alteração
|
|
updateSubmitButtonState();
|
|
});
|
|
|
|
|
|
// caso o usuário comece a corrigir a senha principal depois de um erro de confirmação
|
|
$('input[name="password"]').on('input', function() {
|
|
// Limpa a mensagem de erro se o usuário começar a corrigir a senha principal
|
|
if ($('input[name="password_confirmation"]').val() !== '') {
|
|
$('input[name="password_confirmation"]').trigger('input');
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|