218 lines
11 KiB
PHP
218 lines
11 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">{{ isset($user) ? 'Edit User' : 'Create New User' }}</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
@include('components.alerts')
|
|
|
|
<form id="userForm"
|
|
action="{{ isset($user) ? route('user-management.update', $user['id']) : route('user-management.store') }}"
|
|
method="POST"
|
|
class="needs-validation"
|
|
novalidate>
|
|
@csrf
|
|
@if(isset($user))
|
|
@method('PUT')
|
|
@endif
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="username">Username <span class="text-danger">*</span></label>
|
|
<input type="text"
|
|
class="form-control @error('username') is-invalid @enderror"
|
|
id="username"
|
|
name="username"
|
|
value="{{ old('username', isset($user) ? $user['username'] : '') }}"
|
|
required
|
|
pattern="[a-zA-Z0-9_]{3,}"
|
|
title="Username must be at least 3 characters long and can only contain letters, numbers, and underscores">
|
|
@error('username')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
<small class="form-text text-muted">
|
|
Minimum 3 characters, only letters, numbers, and underscores allowed
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="email">Email Address <span class="text-danger">*</span></label>
|
|
<input type="email"
|
|
class="form-control @error('email') is-invalid @enderror"
|
|
id="email"
|
|
name="email"
|
|
value="{{ old('email', isset($user) ? $user['email'] : '') }}"
|
|
required>
|
|
@error('email')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if(!isset($user))
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="password">Password <span class="text-danger">*</span></label>
|
|
<div class="input-group">
|
|
<input type="password"
|
|
class="form-control @error('password') is-invalid @enderror"
|
|
id="password"
|
|
name="password"
|
|
required
|
|
minlength="8">
|
|
<div class="input-group-append">
|
|
<button class="btn btn-outline-secondary" type="button" id="togglePassword">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@error('password')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
<small class="form-text text-muted">
|
|
Minimum 8 characters, must include uppercase, lowercase, number, and special character
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="password_confirmation">Confirm Password <span class="text-danger">*</span></label>
|
|
<input type="password"
|
|
class="form-control"
|
|
id="password_confirmation"
|
|
name="password_confirmation"
|
|
required>
|
|
<div class="invalid-feedback">
|
|
Passwords do not match
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="role">Role <span class="text-danger">*</span></label>
|
|
<select class="form-control @error('role') is-invalid @enderror"
|
|
id="role"
|
|
name="role"
|
|
required>
|
|
<option value="">Select Role</option>
|
|
@foreach($roles as $roleOption)
|
|
<option value="{{ $roleOption }}"
|
|
{{ old('role', isset($user) ? $user['role'] : '') == $roleOption ? 'selected' : '' }}>
|
|
{{ ucfirst($roleOption) }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
@error('role')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="d-block">Status</label>
|
|
<div class="custom-control custom-switch">
|
|
<input type="checkbox"
|
|
class="custom-control-input"
|
|
id="is_active"
|
|
name="is_active"
|
|
value="1"
|
|
{{ old('is_active', isset($user) ? $user['is_active'] : true) ? 'checked' : '' }}>
|
|
<label class="custom-control-label" for="is_active">Active</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save mr-1"></i>
|
|
{{ isset($user) ? 'Update' : 'Create' }} User
|
|
</button>
|
|
<a href="{{ route('user-management.index') }}" class="btn btn-secondary">
|
|
<i class="fas fa-times mr-1"></i>
|
|
Cancel
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Form validation
|
|
const form = document.getElementById('userForm');
|
|
form.addEventListener('submit', function(event) {
|
|
if (!form.checkValidity()) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
form.classList.add('was-validated');
|
|
});
|
|
|
|
// Password toggle visibility
|
|
$('#togglePassword').click(function() {
|
|
const passwordInput = $('#password');
|
|
const icon = $(this).find('i');
|
|
|
|
if (passwordInput.attr('type') === 'password') {
|
|
passwordInput.attr('type', 'text');
|
|
icon.removeClass('fa-eye').addClass('fa-eye-slash');
|
|
} else {
|
|
passwordInput.attr('type', 'password');
|
|
icon.removeClass('fa-eye-slash').addClass('fa-eye');
|
|
}
|
|
});
|
|
|
|
// Password confirmation validation
|
|
$('#password_confirmation').on('input', function() {
|
|
const password = $('#password').val();
|
|
const confirmation = $(this).val();
|
|
|
|
if (password !== confirmation) {
|
|
$(this).addClass('is-invalid');
|
|
} else {
|
|
$(this).removeClass('is-invalid');
|
|
}
|
|
});
|
|
|
|
// Password strength validation
|
|
$('#password').on('input', function() {
|
|
const password = $(this).val();
|
|
const hasUpperCase = /[A-Z]/.test(password);
|
|
const hasLowerCase = /[a-z]/.test(password);
|
|
const hasNumbers = /\d/.test(password);
|
|
const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
|
|
const isLongEnough = password.length >= 8;
|
|
|
|
if (!(hasUpperCase && hasLowerCase && hasNumbers && hasSpecialChar && isLongEnough)) {
|
|
$(this).addClass('is-invalid');
|
|
} else {
|
|
$(this).removeClass('is-invalid');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|