ispt4.0_laravel/resources/views/Admin/CrudUsers/editUsers.blade.php

759 lines
36 KiB
PHP
Executable File

@extends('Templates/AdminLayout/AdminLayout')
@section('Main-content')
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
@if ($user->type_users == 3)
<h1 class="text-primary">Editar Empresa</h1>
@else
<h1 class="text-primary">Editar Utilizador</h1>
@endif
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
@if ($user->type_users == 3)
<li class="breadcrumb-item"><a href="{{ route('users.company') }}"> Empresas</a></li>
<li class="breadcrumb-item"><a href="{{ route('users.Show', [$user->user_id]) }}"> Detalhes da
Empresa</a></li>
<li class="breadcrumb-item active">Editar Empresa</li>
@else
<li class="breadcrumb-item"><a href="{{ route('users.list') }}"> Utilizadores</a></li>
<li class="breadcrumb-item"><a href="{{ route('users.Show', [$user->user_id]) }}"> Detalhes do
utilizador</a></li>
<li class="breadcrumb-item active">Editar Utilizador</li>
@endif
</ol>
</div>
</div>
</div>
</section>
<section class="content">
<div class="container-fluid">
<div class="card card-primary">
<div class="card-header">
@if ($user->type_users == 3)
Editar Empresa : {{ $user->user_name }}
@else
Editar Utilizador : {{ $user->user_name }}
@endif
</div>
{{-- ./card-header --}}
<div class="card-body">
<form action="{{ route('users.update', $user->user_id) }}" method="POST">
@csrf
@method('PUT')
<div class="row">
<div class="col-sm-6">
<div class="form-group text-primary">
<label for="name">Nome:</label>
<input type="text" class="form-control" id="user_name" name="user_name"
value="{{ $user->user_name }}" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group text-primary">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email"
value="{{ $user->email }}" readonly style="pointer-events: none;">
</div>
</div>
</div>
<div class="row">
{{-- <div class="col-sm-6">
<div class="form-group text-primary">
<label for="password">Palavra-passe:</label>
<input type="password" class="form-control" id="password" name="password"
placeholder="Alterar senha">
</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-6">
<div class="form-group text-primary">
<label for="password">Palavra-passe:</label>
<input type="password" class="form-control" id="password" name="password"
placeholder="Alterar senha">
</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-6">
<div class="form-group text-primary">
<label for="password_confirmation">Confirme a palavra-passe:</label>
<input type="password" class="form-control" id="password_confirmation"
name="password_confirmation">
<div id="project-password-confirm-valid"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group text-primary">
<label for="nif">NIF:</label>
<input type="text" class="form-control" id="user_nif" name="user_nif"
data-type="nif" value="{{ $user->user_nif }}" required>
<div id="project-number-exists-nif"></div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group text-primary">
<label for="user_phone">Telemóvel:</label>
<input type="text" class="form-control" id="user_phone" name="user_phone"
value="{{ $user->user_phone }}" required>
</div>
</div>
</div>
<!-- Não parece ser necessario alterar um tipo de utilzador, por enquanto -->
{{-- <div class="form-group text-primary">
<label for="user_type">Tipo de Utilizador:</label>
<select class="form-control" id="user_type" name="user_type" required>
<!-- Deve mostrar a Opção apenas para utilizadores 'Super_Admin' -->
@if (Auth::user()->type_users == 1)
<option value="Super_Administrador"
{{ $user->user_type == 'Super_Administrador' ? 'selected' : '' }}>Super
Administrador</option>
@endif
<option value="Administrador" {{ $user->user_type == 'Administrador' ? 'selected' : '' }}>
Administrador
</option>
<option value="Empresa" {{ $user->user_type == 'Empresa' ? 'selected' : '' }}>
Empresa</option>
</select>
</div> --}}
<button type="submit" id="submitBtn" class="btn btn-light float-right">Salvar</button>
<a href="{{ route('users.list') }}" class="btn btn-danger float-left">Retornar</a>
</form>
</div>
{{-- ./card-body --}}
</div>
{{-- ./card-light --}}
</div>
{{-- /.container-fluid" --}}
</section>
<script src={{ asset('assets/dist/js/countryFlags.js') }}></script>
{{-- <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 = {
nif: false,
// pending_phone: false,
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) {
// o ERRO do Nif esta vinda desta parte, pois parece que nao fica a success
if (response['result_' + type] === 0) {
validationState[type] = true;
updateSubmitButtonState();
} else {
validationState[type] = false;
updateSubmitButtonState();
}
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 Nif
$('input[name="user_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
console.log('O type e : '+ type);
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 phone
// $('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="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="pending_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> --}}
{{-- <script>
$(document).ready(function() {
// Mantém a função de visibilidade da bandeira (conforme seu comentário original)
function ensureFlagContainerVisibility() {
const flagContainer = document.querySelector('.flag-container');
const countryList = document.querySelector('.country-list');
const isCountryListActive = countryList && countryList.classList.contains('active');
}
ensureFlagContainerVisibility();
setInterval(ensureFlagContainerVisibility, 50);
// Estados de validação agora separados
var validationState = {
nif: false,
password: false,
password_confirmation: false
};
// Validação AJAX para NIF
function validateNIF(value) {
$.ajax({
url: '{{ route('validateForm') }}',
type: 'GET',
data: {
_token: $('input[name="_token"]').val(), // CSRF token
type: 'nif',
value: value
},
success: function(response) {
if (response.result_nif === 0) {
validationState.nif = true;
} else {
validationState.nif = false;
}
updateNIFUI(response.result_nif);
updateSubmitButtonState();
},
error: function(xhr, status, error) {
console.error("Erro na validação do NIF: ", error);
}
});
}
// Função para atualizar a interface com base no resultado da validação do NIF
function updateNIFUI(result) {
var message;
var borderColor;
switch (result) {
case 1:
message = 'O NIF já está registrado.';
borderColor = 'red';
break;
case 2:
message = 'O NIF está pendente de aprovação.';
borderColor = 'red';
break;
case 3:
message = 'O NIF já está registrado e também pendente de aprovação.';
borderColor = 'red';
break;
default:
message = 'O NIF está disponível.';
borderColor = 'green';
}
$('#project-number-exists-nif').text(message).css('color', borderColor);
$('input[name="user_nif"]').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() {
// Habilita o botão se o NIF for válido ou se as senhas forem válidas e coincidirem
var isNifValid = validationState.nif;
var arePasswordsValid = validationState.password && validationState.password_confirmation;
$('#submitBtn').prop('disabled', !(isNifValid || arePasswordsValid));
console.log(validationState); // Log do estado atual de validação
}
// Campo de NIF
$('input[name="user_nif"]').on('input', function() {
var nif = $(this).val();
if (nif.length < 9) {
$(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');
validationState.nif = false;
updateSubmitButtonState();
} else {
validateNIF(nif);
}
});
// Validação das senhas
$('input[name="password"]').on('input', function() {
var password = $(this).val();
var minLength = password.length >= 8;
$('#min-length').css('color', minLength ? 'green' : 'red');
var upperCase = /[A-Z]/.test(password);
$('#upper-case').css('color', upperCase ? 'green' : 'red');
var lowerCase = /[a-z]/.test(password);
$('#lower-case').css('color', lowerCase ? 'green' : 'red');
var oneNumber = /\d/.test(password);
$('#one-number').css('color', oneNumber ? 'green' : 'red');
var specialChar = /[@$!%*?&]/.test(password);
$('#special-char').css('color', specialChar ? 'green' : 'red');
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');
}
updateSubmitButtonState();
});
$('input[name="password_confirmation"]').on('input', function() {
var password = $('input[name="password"]').val();
var confirmPassword = $(this).val();
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) {
$(this).css('border', '1px solid #ced4da').removeClass('invalid-input valid-input');
$('#project-password-confirm-valid').text('');
validationState.password_confirmation = false;
} else {
$(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;
}
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() {
if ($('input[name="password_confirmation"]').val() !== '') {
$('input[name="password_confirmation"]').trigger('input');
}
});
});
</script> --}}
<script>
$(document).ready(function() {
// Estados de validação
var validationState = {
nif: false,
password: false,
password_confirmation: false
};
// Validação AJAX para NIF
function validateNIF(value) {
$.ajax({
url: '{{ route('validateForm') }}',
type: 'GET',
data: {
_token: $('input[name="_token"]').val(), // CSRF token
type: 'nif',
value: value
},
success: function(response) {
if (response.result_nif === 0) {
validationState.nif = true;
} else {
validationState.nif = false;
}
updateNIFUI(response.result_nif);
updateSubmitButtonState();
},
error: function(xhr, status, error) {
console.error("Erro na validação do NIF: ", error);
}
});
}
// Função para atualizar a interface com base no resultado da validação do NIF
function updateNIFUI(result) {
var message;
var borderColor;
switch (result) {
case 1:
message = 'O NIF já está registrado.';
borderColor = 'red';
break;
case 2:
message = 'O NIF está pendente de aprovação.';
borderColor = 'red';
break;
case 3:
message = 'O NIF já está registrado e também pendente de aprovação.';
borderColor = 'red';
break;
default:
message = 'O NIF está disponível.';
borderColor = 'green';
}
$('#project-number-exists-nif').text(message).css('color', borderColor);
$('input[name="user_nif"]').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 isNifValid = validationState.nif;
var arePasswordsValid = validationState.password && validationState.password_confirmation;
$('#submitBtn').prop('disabled', !(isNifValid || arePasswordsValid));
console.log(validationState); // Log do estado atual de validação
}
// Campo de NIF
$('input[name="user_nif"]').on('input', function() {
var nif = $(this).val();
if (nif.length < 9) {
$(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');
validationState.nif = false;
updateSubmitButtonState();
} else {
validateNIF(nif);
}
});
// Mostrar e esconder os critérios de senha ao focar e desfocar no campo de senha
$('input[name="password"]').on('focus', function() {
$('#password-criteria').show();
});
$('input[name="password"]').on('blur', function() {
if (validationState.password) {
$('#password-criteria').hide();
}
});
// Validação das senhas
$('input[name="password"]').on('input', function() {
var password = $(this).val();
var minLength = password.length >= 8;
$('#min-length').css('color', minLength ? 'green' : 'red');
var upperCase = /[A-Z]/.test(password);
$('#upper-case').css('color', upperCase ? 'green' : 'red');
var lowerCase = /[a-z]/.test(password);
$('#lower-case').css('color', lowerCase ? 'green' : 'red');
var oneNumber = /\d/.test(password);
$('#one-number').css('color', oneNumber ? 'green' : 'red');
var specialChar = /[@$!%*?&]/.test(password);
$('#special-char').css('color', specialChar ? 'green' : 'red');
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');
}
updateSubmitButtonState();
});
$('input[name="password_confirmation"]').on('input', function() {
var password = $('input[name="password"]').val();
var confirmPassword = $(this).val();
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) {
$(this).css('border', '1px solid #ced4da').removeClass('invalid-input valid-input');
$('#project-password-confirm-valid').text('');
validationState.password_confirmation = false;
} else {
$(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;
}
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() {
if ($('input[name="password_confirmation"]').val() !== '') {
$('input[name="password_confirmation"]').trigger('input');
}
});
});
</script>
@endsection