Demo-Project/Laravel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init commit

Browse Source
This commit is contained in:
David Melendez
2026-01-14 22:38:44 +01:00
parent 4e0c415f0b
commit e25d53d054
124 changed files with 21653 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

315
resources/views/auth/register.blade.php Normal file
View File

@@ -0,0 +1,315 @@
{{-- 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