316 lines
14 KiB
PHP
316 lines
14 KiB
PHP
{{-- Professional Register Page - Bootstrap Implementation --}}
|
|
@extends('layouts.material-auth')
|
|
|
|
@section('title', 'Create Account - ' . config('app.name'))
|
|
|
|
@section('head')
|
|
<meta name="description" content="Create your account to access our professional resume builder">
|
|
<meta name="keywords" content="register, create account, resume builder, professional">
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="register-container">
|
|
{{-- Hero Background Section (Left) --}}
|
|
<div class="hero-background">
|
|
<div class="hero-overlay">
|
|
<div class="hero-content">
|
|
<div class="hero-icon">
|
|
<i class="bi bi-person-plus-fill large-icon"></i>
|
|
</div>
|
|
<h2 class="hero-title">Join Today</h2>
|
|
<p class="hero-subtitle">Create your professional resume with our advanced builder tools</p>
|
|
<div class="author-signature">
|
|
<small>🇩🇪 Made in Germany by David Valera Melendez</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Register Form Section (Right) --}}
|
|
<div class="register-form-container">
|
|
<div class="register-card">
|
|
<div class="card-body">
|
|
{{-- Form Header --}}
|
|
<div class="form-header">
|
|
<div class="register-avatar">
|
|
<i class="bi bi-person-plus"></i>
|
|
</div>
|
|
<h2 class="form-title">Create Account</h2>
|
|
<p class="form-subtitle">Join us to build your professional resume</p>
|
|
</div>
|
|
|
|
{{-- Error Messages --}}
|
|
@if ($errors->any())
|
|
<div class="alert alert-danger" role="alert">
|
|
@foreach ($errors->all() as $error)
|
|
<div>{{ $error }}</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Registration Form --}}
|
|
<form method="POST" action="{{ route('register') }}" class="register-form" id="registerForm">
|
|
@csrf
|
|
|
|
{{-- Name Fields Row --}}
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-field">
|
|
<input type="text"
|
|
class="form-control material-input @error('first_name') is-invalid @enderror"
|
|
id="first_name"
|
|
name="first_name"
|
|
value="{{ old('first_name') }}"
|
|
placeholder=" "
|
|
required>
|
|
<label for="first_name" class="form-label">First Name</label>
|
|
@error('first_name')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-field">
|
|
<input type="text"
|
|
class="form-control material-input @error('last_name') is-invalid @enderror"
|
|
id="last_name"
|
|
name="last_name"
|
|
value="{{ old('last_name') }}"
|
|
placeholder=" "
|
|
required>
|
|
<label for="last_name" class="form-label">Last Name</label>
|
|
@error('last_name')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Email Field --}}
|
|
<div class="form-field">
|
|
<input type="email"
|
|
class="form-control material-input @error('email') is-invalid @enderror"
|
|
id="email"
|
|
name="email"
|
|
value="{{ old('email') }}"
|
|
placeholder=" "
|
|
required>
|
|
<label for="email" class="form-label">Email Address</label>
|
|
@error('email')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- Password Field --}}
|
|
<div class="form-field">
|
|
<input type="password"
|
|
class="form-control material-input @error('password') is-invalid @enderror"
|
|
id="password"
|
|
name="password"
|
|
placeholder=" "
|
|
required>
|
|
<label for="password" class="form-label">Password</label>
|
|
<button type="button" class="password-toggle" id="passwordToggle">
|
|
<i class="bi bi-eye"></i>
|
|
</button>
|
|
@error('password')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
<div class="password-requirements" id="passwordRequirements" style="display: none;">
|
|
<small class="text-muted">
|
|
Password must be at least 8 characters long
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Confirm Password Field --}}
|
|
<div class="form-field">
|
|
<input type="password"
|
|
class="form-control material-input @error('password_confirmation') is-invalid @enderror"
|
|
id="password_confirmation"
|
|
name="password_confirmation"
|
|
placeholder=" "
|
|
required>
|
|
<label for="password_confirmation" class="form-label">Confirm Password</label>
|
|
<button type="button" class="password-toggle" id="confirmPasswordToggle">
|
|
<i class="bi bi-eye"></i>
|
|
</button>
|
|
@error('password_confirmation')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- Terms and Conditions --}}
|
|
<div class="form-check">
|
|
<input type="checkbox"
|
|
class="form-check-input @error('terms') is-invalid @enderror"
|
|
id="terms"
|
|
name="terms"
|
|
value="1"
|
|
{{ old('terms') ? 'checked' : '' }}
|
|
required>
|
|
<label class="form-check-label" for="terms">
|
|
I agree to the <a href="#" class="text-decoration-none">Terms of Service</a> and <a href="#" class="text-decoration-none">Privacy Policy</a>
|
|
</label>
|
|
@error('terms')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- Newsletter Subscription --}}
|
|
<div class="form-check">
|
|
<input type="checkbox"
|
|
class="form-check-input"
|
|
id="newsletter"
|
|
name="newsletter"
|
|
value="1"
|
|
{{ old('newsletter') ? 'checked' : '' }}>
|
|
<label class="form-check-label" for="newsletter">
|
|
Subscribe to our newsletter for resume tips and updates
|
|
</label>
|
|
</div>
|
|
|
|
{{-- Register Button --}}
|
|
<button type="submit" class="btn register-btn" id="registerBtn">
|
|
<span class="btn-text">Create Account</span>
|
|
<span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
|
|
</button>
|
|
</form>
|
|
|
|
{{-- Divider --}}
|
|
<div class="divider">
|
|
<span>or register with</span>
|
|
</div>
|
|
|
|
{{-- Social Registration --}}
|
|
<div class="social-login">
|
|
<div class="social-buttons">
|
|
<button type="button" class="btn social-btn google-btn">
|
|
<i class="bi bi-google"></i>
|
|
Google
|
|
</button>
|
|
<button type="button" class="btn social-btn github-btn">
|
|
<i class="bi bi-github"></i>
|
|
GitHub
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Login Link --}}
|
|
<div class="login-link">
|
|
<p>Already have an account? <a href="{{ route('login') }}" class="login-link-text">Sign in here</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Password visibility toggles
|
|
const passwordToggle = document.getElementById('passwordToggle');
|
|
const confirmPasswordToggle = document.getElementById('confirmPasswordToggle');
|
|
const passwordInput = document.getElementById('password');
|
|
const confirmPasswordInput = document.getElementById('password_confirmation');
|
|
const passwordRequirements = document.getElementById('passwordRequirements');
|
|
|
|
// Password toggle functionality
|
|
passwordToggle?.addEventListener('click', function() {
|
|
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
|
|
passwordInput.setAttribute('type', type);
|
|
this.querySelector('i').classList.toggle('bi-eye');
|
|
this.querySelector('i').classList.toggle('bi-eye-slash');
|
|
});
|
|
|
|
confirmPasswordToggle?.addEventListener('click', function() {
|
|
const type = confirmPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
|
|
confirmPasswordInput.setAttribute('type', type);
|
|
this.querySelector('i').classList.toggle('bi-eye');
|
|
this.querySelector('i').classList.toggle('bi-eye-slash');
|
|
});
|
|
|
|
// Show password requirements on focus
|
|
passwordInput?.addEventListener('focus', function() {
|
|
passwordRequirements.style.display = 'block';
|
|
});
|
|
|
|
passwordInput?.addEventListener('blur', function() {
|
|
if (this.value.length === 0) {
|
|
passwordRequirements.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Form validation and submission
|
|
const registerForm = document.getElementById('registerForm');
|
|
const registerBtn = document.getElementById('registerBtn');
|
|
|
|
registerForm?.addEventListener('submit', function(e) {
|
|
// Add loading state
|
|
registerBtn.disabled = true;
|
|
registerBtn.querySelector('.btn-text').textContent = 'Creating Account...';
|
|
registerBtn.querySelector('.spinner-border').classList.remove('d-none');
|
|
});
|
|
|
|
// Real-time validation
|
|
const inputs = registerForm?.querySelectorAll('.material-input');
|
|
inputs?.forEach(input => {
|
|
input.addEventListener('blur', function() {
|
|
validateField(this);
|
|
});
|
|
|
|
input.addEventListener('input', function() {
|
|
if (this.classList.contains('is-invalid')) {
|
|
validateField(this);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Password confirmation validation
|
|
confirmPasswordInput?.addEventListener('input', function() {
|
|
if (passwordInput.value !== this.value) {
|
|
this.classList.add('is-invalid');
|
|
this.classList.remove('is-valid');
|
|
} else if (this.value.length > 0) {
|
|
this.classList.remove('is-invalid');
|
|
this.classList.add('is-valid');
|
|
}
|
|
});
|
|
|
|
function validateField(field) {
|
|
const value = field.value.trim();
|
|
|
|
// Reset validation classes
|
|
field.classList.remove('is-invalid', 'is-valid');
|
|
|
|
if (field.hasAttribute('required') && !value) {
|
|
field.classList.add('is-invalid');
|
|
return false;
|
|
}
|
|
|
|
if (field.type === 'email' && value) {
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (!emailRegex.test(value)) {
|
|
field.classList.add('is-invalid');
|
|
return false;
|
|
}
|
|
}
|
|
|
|
if (field.type === 'password' && value) {
|
|
if (value.length < 8) {
|
|
field.classList.add('is-invalid');
|
|
return false;
|
|
}
|
|
}
|
|
|
|
if (value) {
|
|
field.classList.add('is-valid');
|
|
}
|
|
|
|
return true;
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection
|