526 lines
22 KiB
PHP
Executable File
526 lines
22 KiB
PHP
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>ISPT 4.0</title>
|
|
|
|
<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') }}">
|
|
|
|
<link rel="stylesheet" href="{{ asset('assets/dist/css/countryFlag.css') }}">
|
|
|
|
<!-- Inclusão do jQuery -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
|
|
<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>
|
|
|
|
</head>
|
|
|
|
<body class="hold-transition login-page">
|
|
{{-- @if (count($errors) > 0)
|
|
<div class="alert alert-danger">
|
|
{{ implode('', $errors->all('<p>:message</p>')) }}
|
|
</div>
|
|
@endif --}}
|
|
|
|
@if ($errors->any())
|
|
<div class="alert alert-danger">
|
|
<ul>
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<div style="width:50%">
|
|
<!-- /.login-logo -->
|
|
<div class="card card-outline card-primary">
|
|
<div class="card-header text-center">
|
|
<a href="#" class="h1"><b>ISPT</b>4.0</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>Insira Seus Dados : </p>
|
|
|
|
@if (session('success'))
|
|
<div class="alert alert-success">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('criarUser') }}" name="formCreateUser" method="POST">
|
|
@csrf
|
|
|
|
<input type="hidden" name="receiveToken" value="{{$tokenRecord->token}}">
|
|
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="input-group mb-3">
|
|
<input type="text" name="name" class="form-control"
|
|
placeholder="Primeiro Nome ..." id="name" required>
|
|
<div class="input-group-append">
|
|
<div class="input-group-text">
|
|
<span class="fas fa-user"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm">
|
|
<div class="input-group mb-3">
|
|
<input type="text" name="lastName" class="form-control" placeholder="Apelido..."
|
|
id="lastName" required>
|
|
<div class="input-group-append">
|
|
<div class="input-group-text">
|
|
<span class="fas fa-user"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div id="project-number-exists-email"></div>
|
|
|
|
<div class="input-group mb-3">
|
|
<input type="email" name="pending_email" class="form-control" placeholder="Email"
|
|
id="pending_email" data-type="email" required>
|
|
<div class="input-group-append">
|
|
<div class="input-group-text">
|
|
<span class="fa fa-envelope"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div id="project-number-exists-nif"></div>
|
|
<div class="input-group mb-3">
|
|
<input type="text" name="pending_nif" class="form-control" placeholder="Nif"
|
|
id="pending_nif" data-type="nif">
|
|
<div class="input-group-append">
|
|
<div class="input-group-text">
|
|
<span class="fa fa-address-card"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm">
|
|
<div id="project-number-exists-phone"></div>
|
|
<div class="input-group mb-3">
|
|
<input type="tel" name="pending_phone" class="form-control" placeholder="Telemovel"
|
|
id="pending_phone" data-type="phone" required>
|
|
<div class="input-group-append">
|
|
<div class="input-group-text">
|
|
<span class="fa fa-mobile"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
{{-- <div id="project-password-valid"></div> --}}
|
|
<div class="input-group mb-3">
|
|
<input type="password" name="pending_password" class="form-control"
|
|
placeholder="Password" id="pending_password" required>
|
|
<div class="input-group-append">
|
|
<div class="input-group-text">
|
|
<span class="fa fa-key"></span>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
<div class="col-sm">
|
|
<div id="project-password-confirm-valid"></div>
|
|
<div class="input-group mb-3">
|
|
<input type="password" for="pending_password_confirmation"
|
|
name="pending_password_confirmation" class="form-control"
|
|
placeholder="Check Password">
|
|
<div class="input-group-append">
|
|
<div class="input-group-text">
|
|
<span class="fa fa-unlock-alt"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-8">
|
|
|
|
</div>
|
|
<div class="col-sm-4">
|
|
{{-- <button type="submit" class="btn btn-primary btn-block">Submeter</button> --}}
|
|
<button type="submit" class="btn btn-primary btn-block" id="submitBtn"
|
|
disabled>Submeter</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- /.social-auth-links -->
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.register-box-->
|
|
|
|
<script src={{ asset('assets/dist/js/countryFlags.js') }}></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 = {
|
|
pending_email: false,
|
|
pending_nif: false,
|
|
pending_phone: false,
|
|
pending_password: false,
|
|
pending_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 a interface com base no resultado (Logs de resposta para cada Input)
|
|
function updateUI(type, result) {
|
|
console.log(result);
|
|
var message;
|
|
var borderColor;
|
|
|
|
//Validacoes da resposta API
|
|
switch (result) {
|
|
case 1:
|
|
message = 'O ' + type + ' já está registrado.';
|
|
borderColor = 'red';
|
|
break;
|
|
case 2:
|
|
message = 'O ' + type + ' está pendente de aprovação.';
|
|
borderColor = 'red';
|
|
break;
|
|
case 3:
|
|
message = 'O ' + type + ' já está registrado e também pendente de aprovação.';
|
|
borderColor = 'red';
|
|
break;
|
|
default:
|
|
message = 'O ' + type + ' está disponível.';
|
|
borderColor = 'green';
|
|
}
|
|
|
|
|
|
// Atualiza a mensagem e a cor da borda do input
|
|
$('#project-number-exists-' + type).text(message).css('color', borderColor);
|
|
$('input[name="pending_' + type + '"]').css('border', '2px solid ' + borderColor).removeClass(
|
|
'valid-input invalid-input').addClass(borderColor === 'red' ? 'invalid-input' :
|
|
'valid-input');
|
|
}
|
|
|
|
// 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
|
|
}
|
|
|
|
// Campo de email
|
|
$('input[name="pending_email"]').on('input', function() {
|
|
var email = $(this).val();
|
|
var type = $(this).data('type');
|
|
|
|
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Expressão regular para verificar email
|
|
|
|
if (emailRegex.test(
|
|
email)) { // Verifica se parece com um email, se sim, faz a chamada a Api
|
|
validateField(type, email);
|
|
|
|
} else {
|
|
$(this).css('border', '1px solid #ced4da').removeClass('valid-input invalid-input');
|
|
$('#project-number-exists-email').text('');
|
|
}
|
|
});
|
|
|
|
// Campo de Nif
|
|
$('input[name="pending_nif"]').on('input', function() {
|
|
var nif = $(this).val();
|
|
var type = $(this).data('type');
|
|
|
|
// Verifica se o NIF tem o comprimento correto
|
|
if (nif.length < 9) {
|
|
// Se for menor que 9 dígitos, mostra uma mensagem de erro
|
|
$(this).css('border', '2px solid red').removeClass('valid-input').addClass(
|
|
'invalid-input');
|
|
$('#project-number-exists-nif').text('O tamanho do NIF é incorreto.').css('color',
|
|
'red');
|
|
} else {
|
|
// Se tiver exatamente 9 dígitos, prossegue com a validação no sistema
|
|
validateField(type, nif);
|
|
}
|
|
|
|
// Se for necessario adicioanr um regulador para o tamanho do Nif.
|
|
// else {
|
|
// // Se tiver mais de 9 dígitos, também considera como inválido
|
|
// $(this).css('border', '2px solid red').removeClass('valid-input').addClass(
|
|
// 'invalid-input');
|
|
// $('#project-number-exists-nif').text('O NIF não deve exceder 9 dígitos.').css('color',
|
|
// 'red');
|
|
// }
|
|
|
|
});
|
|
|
|
// Campo phine
|
|
$('input[name="pending_phone"]').on('input', function() {
|
|
var phone = $(this).val();
|
|
var type = $(this).data('type');
|
|
|
|
if (phone.length < 9) {
|
|
// Se for menor que 9 dígitos, mostra uma mensagem de erro
|
|
$(this).css('border', '2px solid red').removeClass('valid-input').addClass(
|
|
'invalid-input');
|
|
$('#project-number-exists-phone').text('Numero de telemovel inexistente.').css(
|
|
'color',
|
|
'red');
|
|
} else {
|
|
validateField(type, phone);
|
|
$(this).css('border', '1px solid #ced4da').removeClass('valid-input invalid-input');
|
|
$('#project-number-exists-phone').text('');
|
|
}
|
|
});
|
|
|
|
// +
|
|
$('input[name="pending_password"]').on('focus', function() {
|
|
$('#password-criteria').show();
|
|
});
|
|
$('input[name="pending_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="pending_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.pending_password = minLength && upperCase && lowerCase && oneNumber &&
|
|
specialChar;
|
|
if (validationState.pending_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="pending_password_confirmation"]').on('input', function() {
|
|
var password = $('input[name="pending_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.pending_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.pending_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.pending_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="pending_password"]').on('input', function() {
|
|
// Limpa a mensagem de erro se o usuário começar a corrigir a senha principal
|
|
if ($('input[name="pending_password_confirmation"]').val() !== '') {
|
|
$('input[name="pending_password_confirmation"]').trigger('input');
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
</html>
|