1128 lines
35 KiB
TypeScript
1128 lines
35 KiB
TypeScript
"use client";
|
|
|
|
import { useState, FormEvent, ChangeEvent } from "react";
|
|
import { JobPosition, careerService } from "@/lib/api/careerService";
|
|
|
|
interface JobApplicationFormProps {
|
|
job: JobPosition;
|
|
onClose?: () => void;
|
|
}
|
|
|
|
interface FormData {
|
|
// Required fields
|
|
first_name: string;
|
|
last_name: string;
|
|
email: string;
|
|
resume: File | null;
|
|
consent: boolean;
|
|
|
|
// Optional fields
|
|
phone: string;
|
|
current_position: string;
|
|
current_company: string;
|
|
years_of_experience: string;
|
|
cover_letter: string;
|
|
portfolio_url: string;
|
|
linkedin_url: string;
|
|
github_url: string;
|
|
website_url: string;
|
|
available_from: string;
|
|
notice_period: string;
|
|
expected_salary: string;
|
|
salary_currency: string;
|
|
}
|
|
|
|
const JobApplicationForm = ({ job, onClose }: JobApplicationFormProps) => {
|
|
const [formData, setFormData] = useState<FormData>({
|
|
// Required fields
|
|
first_name: "",
|
|
last_name: "",
|
|
email: "",
|
|
resume: null,
|
|
consent: false,
|
|
|
|
// Optional fields
|
|
phone: "",
|
|
current_position: "",
|
|
current_company: "",
|
|
years_of_experience: "",
|
|
cover_letter: "",
|
|
portfolio_url: "",
|
|
linkedin_url: "",
|
|
github_url: "",
|
|
website_url: "",
|
|
available_from: "",
|
|
notice_period: "",
|
|
expected_salary: "",
|
|
salary_currency: "USD",
|
|
});
|
|
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [message, setMessage] = useState<{ type: "success" | "error" | null; text: string }>({
|
|
type: null,
|
|
text: "",
|
|
});
|
|
|
|
const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
|
const { name, value, type } = e.target;
|
|
|
|
if (type === "checkbox") {
|
|
const checked = (e.target as HTMLInputElement).checked;
|
|
setFormData(prev => ({ ...prev, [name]: checked }));
|
|
} else {
|
|
setFormData(prev => ({ ...prev, [name]: value }));
|
|
}
|
|
};
|
|
|
|
const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0] || null;
|
|
|
|
setFormData(prev => ({ ...prev, resume: file }));
|
|
|
|
if (file) {
|
|
// Validate file type
|
|
const allowedTypes = ["application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"];
|
|
if (!allowedTypes.includes(file.type)) {
|
|
setMessage({ type: "error", text: "Please upload a PDF, DOC, or DOCX file" });
|
|
return;
|
|
}
|
|
|
|
// Validate file size (5MB)
|
|
if (file.size > 5 * 1024 * 1024) {
|
|
setMessage({ type: "error", text: "Resume file size must be less than 5MB" });
|
|
return;
|
|
}
|
|
|
|
setMessage({ type: null, text: "" });
|
|
}
|
|
};
|
|
|
|
const validateForm = (): boolean => {
|
|
// Check required fields
|
|
if (!formData.first_name.trim()) {
|
|
setMessage({ type: "error", text: "First name is required" });
|
|
return false;
|
|
}
|
|
|
|
if (!formData.last_name.trim()) {
|
|
setMessage({ type: "error", text: "Last name is required" });
|
|
return false;
|
|
}
|
|
|
|
if (!formData.email.trim()) {
|
|
setMessage({ type: "error", text: "Email is required" });
|
|
return false;
|
|
}
|
|
|
|
// Basic email validation
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (!emailRegex.test(formData.email)) {
|
|
setMessage({ type: "error", text: "Please enter a valid email address" });
|
|
return false;
|
|
}
|
|
|
|
if (!formData.resume) {
|
|
setMessage({ type: "error", text: "Resume is required" });
|
|
return false;
|
|
}
|
|
|
|
if (!formData.consent) {
|
|
setMessage({ type: "error", text: "You must consent to data processing to apply" });
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
|
|
if (!validateForm()) {
|
|
return;
|
|
}
|
|
|
|
setIsSubmitting(true);
|
|
setMessage({ type: null, text: "" });
|
|
|
|
try {
|
|
// Prepare application data exactly as backend expects
|
|
const applicationData = {
|
|
// Required fields
|
|
job: job.id,
|
|
first_name: formData.first_name.trim(),
|
|
last_name: formData.last_name.trim(),
|
|
email: formData.email.trim(),
|
|
resume: formData.resume!,
|
|
consent: formData.consent,
|
|
|
|
// Optional fields - only include if not empty
|
|
...(formData.phone.trim() && { phone: formData.phone.trim() }),
|
|
...(formData.current_position.trim() && { current_position: formData.current_position.trim() }),
|
|
...(formData.current_company.trim() && { current_company: formData.current_company.trim() }),
|
|
...(formData.years_of_experience.trim() && { years_of_experience: formData.years_of_experience.trim() }),
|
|
...(formData.cover_letter.trim() && { cover_letter: formData.cover_letter.trim() }),
|
|
...(formData.portfolio_url.trim() && { portfolio_url: formData.portfolio_url.trim() }),
|
|
...(formData.linkedin_url.trim() && { linkedin_url: formData.linkedin_url.trim() }),
|
|
...(formData.github_url.trim() && { github_url: formData.github_url.trim() }),
|
|
...(formData.website_url.trim() && { website_url: formData.website_url.trim() }),
|
|
...(formData.available_from && { available_from: formData.available_from }),
|
|
...(formData.notice_period.trim() && { notice_period: formData.notice_period.trim() }),
|
|
...(formData.expected_salary && { expected_salary: parseFloat(formData.expected_salary) }),
|
|
...(formData.salary_currency && { salary_currency: formData.salary_currency }),
|
|
};
|
|
|
|
const result = await careerService.submitApplication(applicationData);
|
|
|
|
setMessage({
|
|
type: "success",
|
|
text: "Application submitted successfully! We'll be in touch soon.",
|
|
});
|
|
|
|
// Reset form
|
|
setFormData({
|
|
first_name: "",
|
|
last_name: "",
|
|
email: "",
|
|
resume: null,
|
|
consent: false,
|
|
phone: "",
|
|
current_position: "",
|
|
current_company: "",
|
|
years_of_experience: "",
|
|
cover_letter: "",
|
|
portfolio_url: "",
|
|
linkedin_url: "",
|
|
github_url: "",
|
|
website_url: "",
|
|
available_from: "",
|
|
notice_period: "",
|
|
expected_salary: "",
|
|
salary_currency: "USD",
|
|
});
|
|
|
|
// Reset file input
|
|
const fileInput = document.getElementById('resume') as HTMLInputElement;
|
|
if (fileInput) fileInput.value = '';
|
|
|
|
} catch (error) {
|
|
setMessage({
|
|
type: "error",
|
|
text: error instanceof Error ? error.message : "Failed to submit application. Please try again.",
|
|
});
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="job-application-modal">
|
|
<div className="modal-overlay" onClick={onClose} />
|
|
<div className="modal-content">
|
|
{/* Header */}
|
|
<div className="form-header">
|
|
{onClose && (
|
|
<button className="close-button" onClick={onClose} type="button">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
)}
|
|
|
|
<div className="header-content">
|
|
<div className="header-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2M8 6h8M6 6h12l-1 14H7L6 6z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<h2 className="form-title">Apply for {job.title}</h2>
|
|
<p className="form-subtitle">
|
|
Join our team • {job.location} • {job.employment_type.replace('-', ' ')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Message */}
|
|
{message.type && (
|
|
<div className={`alert alert-${message.type}`}>
|
|
<div className="alert-icon">
|
|
{message.type === "success" ? (
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
) : (
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2"/>
|
|
<line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" strokeWidth="2"/>
|
|
<line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" strokeWidth="2"/>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
<span>{message.text}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} className="application-form">
|
|
<div className="form-scrollable">
|
|
{/* Required Fields Section */}
|
|
<div className="form-section">
|
|
<div className="section-header">
|
|
<h3 className="section-title">Personal Information</h3>
|
|
<span className="section-subtitle">Required fields are marked with *</span>
|
|
</div>
|
|
|
|
<div className="form-grid">
|
|
<div className="form-group">
|
|
<label className="form-label required">First Name</label>
|
|
<input
|
|
type="text"
|
|
name="first_name"
|
|
value={formData.first_name}
|
|
onChange={handleInputChange}
|
|
className="form-input"
|
|
placeholder="Enter your first name"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label className="form-label required">Last Name</label>
|
|
<input
|
|
type="text"
|
|
name="last_name"
|
|
value={formData.last_name}
|
|
onChange={handleInputChange}
|
|
className="form-input"
|
|
placeholder="Enter your last name"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group form-group-full">
|
|
<label className="form-label required">Email Address</label>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleInputChange}
|
|
className="form-input"
|
|
placeholder="Enter your email address"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group form-group-full">
|
|
<label className="form-label required">Resume</label>
|
|
<div className="file-input-wrapper">
|
|
<input
|
|
type="file"
|
|
id="resume"
|
|
name="resume"
|
|
onChange={handleFileChange}
|
|
accept=".pdf,.doc,.docx"
|
|
className="file-input"
|
|
required
|
|
/>
|
|
<label
|
|
htmlFor="resume"
|
|
className="file-input-display"
|
|
>
|
|
<div className="file-info">
|
|
<div className="file-input-icon">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
<polyline points="14,2 14,8 20,8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<span className="file-input-text">
|
|
{formData.resume ? formData.resume.name : "Choose file (PDF, DOC, DOCX - Max 5MB)"}
|
|
</span>
|
|
</div>
|
|
<div className="upload-button">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
Upload
|
|
</div>
|
|
</label>
|
|
</div>
|
|
{formData.resume && (
|
|
<div className="file-selected">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
<span>File selected: {formData.resume.name}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="form-group form-group-full">
|
|
<div className="checkbox-wrapper">
|
|
<input
|
|
type="checkbox"
|
|
id="consent"
|
|
name="consent"
|
|
checked={formData.consent}
|
|
onChange={handleInputChange}
|
|
className="checkbox-input"
|
|
required
|
|
/>
|
|
<label htmlFor="consent" className="checkbox-label">
|
|
<div className="checkbox-box">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<span>I consent to data processing for recruitment purposes *</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Professional Information */}
|
|
<div className="form-section">
|
|
<div className="section-header">
|
|
<h3 className="section-title">Professional Background</h3>
|
|
<span className="section-subtitle">All fields are required</span>
|
|
</div>
|
|
|
|
<div className="form-grid">
|
|
<div className="form-group">
|
|
<label className="form-label required">Phone Number</label>
|
|
<input
|
|
type="tel"
|
|
name="phone"
|
|
value={formData.phone}
|
|
onChange={handleInputChange}
|
|
className="form-input"
|
|
placeholder="+1 (555) 000-0000"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label className="form-label required">Years of Experience</label>
|
|
<input
|
|
type="text"
|
|
name="years_of_experience"
|
|
value={formData.years_of_experience}
|
|
onChange={handleInputChange}
|
|
className="form-input"
|
|
placeholder="e.g., 3-5 years"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label className="form-label required">Current Position</label>
|
|
<input
|
|
type="text"
|
|
name="current_position"
|
|
value={formData.current_position}
|
|
onChange={handleInputChange}
|
|
className="form-input"
|
|
placeholder="Your current job title"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label className="form-label required">Current Company</label>
|
|
<input
|
|
type="text"
|
|
name="current_company"
|
|
value={formData.current_company}
|
|
onChange={handleInputChange}
|
|
className="form-input"
|
|
placeholder="Your current employer"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group form-group-full">
|
|
<label className="form-label required">Cover Letter / Message</label>
|
|
<textarea
|
|
name="cover_letter"
|
|
value={formData.cover_letter}
|
|
onChange={handleInputChange}
|
|
className="form-textarea"
|
|
rows={4}
|
|
placeholder="Tell us why you're interested in this position and what you can bring to our team..."
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Links & Portfolio */}
|
|
<div className="form-section">
|
|
<div className="section-header">
|
|
<h3 className="section-title">Portfolio & Links</h3>
|
|
<span className="section-subtitle">All fields are required</span>
|
|
</div>
|
|
|
|
<div className="form-grid">
|
|
<div className="form-group">
|
|
<label className="form-label required">Portfolio URL</label>
|
|
<input
|
|
type="url"
|
|
name="portfolio_url"
|
|
value={formData.portfolio_url}
|
|
onChange={handleInputChange}
|
|
className="form-input"
|
|
placeholder="https://yourportfolio.com"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label className="form-label required">LinkedIn Profile</label>
|
|
<input
|
|
type="url"
|
|
name="linkedin_url"
|
|
value={formData.linkedin_url}
|
|
onChange={handleInputChange}
|
|
className="form-input"
|
|
placeholder="https://linkedin.com/in/yourname"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label className="form-label required">GitHub Profile</label>
|
|
<input
|
|
type="url"
|
|
name="github_url"
|
|
value={formData.github_url}
|
|
onChange={handleInputChange}
|
|
className="form-input"
|
|
placeholder="https://github.com/yourname"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label className="form-label required">Personal Website</label>
|
|
<input
|
|
type="url"
|
|
name="website_url"
|
|
value={formData.website_url}
|
|
onChange={handleInputChange}
|
|
className="form-input"
|
|
placeholder="https://yourwebsite.com"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Availability & Salary */}
|
|
<div className="form-section">
|
|
<div className="section-header">
|
|
<h3 className="section-title">Availability & Expectations</h3>
|
|
<span className="section-subtitle">All fields are required</span>
|
|
</div>
|
|
|
|
<div className="form-grid">
|
|
<div className="form-group">
|
|
<label className="form-label required">Available From</label>
|
|
<input
|
|
type="date"
|
|
name="available_from"
|
|
value={formData.available_from}
|
|
onChange={handleInputChange}
|
|
className="form-input"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label className="form-label required">Notice Period</label>
|
|
<input
|
|
type="text"
|
|
name="notice_period"
|
|
value={formData.notice_period}
|
|
onChange={handleInputChange}
|
|
className="form-input"
|
|
placeholder="e.g., 2 weeks, 1 month, Immediate"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label className="form-label required">Expected Salary</label>
|
|
<input
|
|
type="number"
|
|
name="expected_salary"
|
|
value={formData.expected_salary}
|
|
onChange={handleInputChange}
|
|
className="form-input"
|
|
placeholder="50000"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label className="form-label required">Currency</label>
|
|
<select
|
|
name="salary_currency"
|
|
value={formData.salary_currency}
|
|
onChange={handleInputChange}
|
|
className="form-select"
|
|
required
|
|
>
|
|
<option value="USD">USD ($)</option>
|
|
<option value="EUR">EUR (€)</option>
|
|
<option value="GBP">GBP (£)</option>
|
|
<option value="INR">INR (₹)</option>
|
|
<option value="AUD">AUD (A$)</option>
|
|
<option value="CAD">CAD (C$)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Form Footer */}
|
|
<div className="form-footer">
|
|
<div className="form-actions">
|
|
{onClose && (
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
disabled={isSubmitting}
|
|
className="btn btn-secondary"
|
|
>
|
|
Cancel
|
|
</button>
|
|
)}
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="btn btn-primary"
|
|
>
|
|
{isSubmitting ? (
|
|
<>
|
|
<div className="loading-spinner" />
|
|
<span>Submitting...</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
<span>Submit Application</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
<p className="form-footer-text">
|
|
By submitting this application, you agree to our terms and privacy policy.
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
.job-application-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.modal-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.modal-content {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
max-height: 90vh;
|
|
background: white;
|
|
border-radius: 16px;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.form-header {
|
|
position: relative;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 32px;
|
|
text-align: center;
|
|
}
|
|
|
|
.close-button {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: none;
|
|
color: white;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.close-button:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.header-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 16px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.form-title {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
margin: 0 0 8px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.form-subtitle {
|
|
font-size: 16px;
|
|
opacity: 0.9;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.alert {
|
|
margin: 24px 24px 0;
|
|
padding: 16px 20px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-weight: 500;
|
|
border: 2px solid;
|
|
}
|
|
|
|
.alert-success {
|
|
background: #d4f8db;
|
|
color: #0f5132;
|
|
border-color: #22c55e;
|
|
}
|
|
|
|
.alert-error {
|
|
background: #fce8e8;
|
|
color: #721c24;
|
|
border-color: #ef4444;
|
|
}
|
|
|
|
.alert-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.application-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.form-scrollable {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 32px;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.form-section {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.section-header {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin: 0 0 4px;
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
margin: 0;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.form-group-full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.form-label.required::after {
|
|
content: '*';
|
|
color: #ef4444;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.form-input,
|
|
.form-textarea,
|
|
.form-select {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #1f2937;
|
|
background: white;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-textarea:focus,
|
|
.form-select:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
.form-input::placeholder,
|
|
.form-textarea::placeholder {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.form-textarea {
|
|
resize: vertical;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.file-input-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.file-input {
|
|
position: absolute;
|
|
left: -9999px;
|
|
width: 1px;
|
|
height: 1px;
|
|
opacity: 0;
|
|
}
|
|
|
|
.file-input-display {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
border: 2px dashed #d1d5db;
|
|
border-radius: 8px;
|
|
background: #f9fafb;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
width: 100%;
|
|
}
|
|
|
|
.file-input-display:hover {
|
|
border-color: #667eea;
|
|
background: #f3f4f6;
|
|
}
|
|
|
|
.file-input-display:hover .upload-button {
|
|
background: #667eea;
|
|
color: white;
|
|
}
|
|
|
|
.upload-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 12px;
|
|
background: #e5e7eb;
|
|
color: #374151;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.file-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.file-input-icon {
|
|
color: #6b7280;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.file-input-text {
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.file-selected {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
padding: 8px 12px;
|
|
background: #ecfdf5;
|
|
color: #059669;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.checkbox-wrapper {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.checkbox-input {
|
|
display: none;
|
|
}
|
|
|
|
.checkbox-label {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
color: #374151;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.checkbox-box {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #d1d5db;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: white;
|
|
transition: all 0.2s ease;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.checkbox-box svg {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.checkbox-input:checked + .checkbox-label .checkbox-box {
|
|
background: #667eea;
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.checkbox-input:checked + .checkbox-label .checkbox-box svg {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
color: white;
|
|
}
|
|
|
|
.form-footer {
|
|
padding: 24px 32px;
|
|
border-top: 1px solid #e5e7eb;
|
|
background: #f9fafb;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: flex-end;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border: 2px solid;
|
|
min-width: 140px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #667eea;
|
|
color: white;
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.btn-primary:hover:not(:disabled) {
|
|
background: #5a6fd8;
|
|
border-color: #5a6fd8;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: white;
|
|
color: #6b7280;
|
|
border-color: #d1d5db;
|
|
}
|
|
|
|
.btn-secondary:hover:not(:disabled) {
|
|
background: #f3f4f6;
|
|
color: #374151;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
border-top: 2px solid white;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
.form-footer-text {
|
|
font-size: 12px;
|
|
color: #6b7280;
|
|
text-align: center;
|
|
margin: 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.job-application-modal {
|
|
padding: 0;
|
|
}
|
|
|
|
.modal-content {
|
|
max-width: 100%;
|
|
max-height: 100vh;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.form-header {
|
|
padding: 24px 20px;
|
|
}
|
|
|
|
.form-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.form-scrollable {
|
|
padding: 24px 20px 0;
|
|
}
|
|
|
|
.form-footer {
|
|
padding: 20px;
|
|
}
|
|
|
|
.form-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.form-actions {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Smooth scrolling */
|
|
.form-scrollable {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.form-scrollable::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.form-scrollable::-webkit-scrollbar-track {
|
|
background: #f1f5f9;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.form-scrollable::-webkit-scrollbar-thumb {
|
|
background: #cbd5e1;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.form-scrollable::-webkit-scrollbar-thumb:hover {
|
|
background: #94a3b8;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default JobApplicationForm; |