Files
TimeTrack/templates/setup_company.html

261 lines
8.1 KiB
HTML

{% extends "layout.html" %}
{% block content %}
<div class="admin-container">
<h1>
{% if is_initial_setup %}
Welcome to {{ g.branding.app_name }}
{% else %}
Create New Company
{% endif %}
</h1>
<!-- Info Message -->
{% if is_initial_setup %}
<div class="info-message">
<h3><i class="ti ti-confetti"></i> Let's Get Started!</h3>
<p>Set up your company and create the first administrator account to begin using {{ g.branding.app_name }}.</p>
</div>
{% elif is_super_admin %}
<div class="info-message">
<h3><i class="ti ti-building"></i> New Company Setup</h3>
<p>Create a new company with its own administrator. This will be a separate organization within {{ g.branding.app_name }}.</p>
</div>
{% else %}
<div class="error-message">
<h3><i class="ti ti-alert-triangle"></i> Access Denied</h3>
<p>You do not have permission to create new companies.</p>
<a href="{{ url_for('home') }}" class="btn btn-secondary">Return Home</a>
</div>
{% set show_form = false %}
{% endif %}
{% if is_initial_setup or is_super_admin %}
{% set show_form = true %}
{% endif %}
{% if show_form %}
<form method="POST" class="company-setup-form">
<!-- Company Information Section -->
<div class="form-section">
<h2>Company Information</h2>
<div class="form-group">
<label for="company_name">Company Name</label>
<input type="text" id="company_name" name="company_name" class="form-control"
value="{{ request.form.company_name or '' }}" required autofocus
placeholder="e.g., Acme Corporation">
<small class="form-help">This will be displayed throughout the application</small>
</div>
<div class="form-group">
<label for="company_description">Description (Optional)</label>
<textarea id="company_description" name="company_description" class="form-control"
rows="3" placeholder="Brief description of your company">{{ request.form.company_description or '' }}</textarea>
</div>
</div>
<!-- Administrator Account Section -->
<div class="form-section">
<h2>Administrator Account</h2>
<div class="form-row">
<div class="form-group">
<label for="admin_username">Username</label>
<input type="text" id="admin_username" name="admin_username" class="form-control"
value="{{ request.form.admin_username or '' }}" required>
</div>
<div class="form-group">
<label for="admin_email">Email</label>
<input type="email" id="admin_email" name="admin_email" class="form-control"
value="{{ request.form.admin_email or '' }}" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="admin_password">Password</label>
<input type="password" id="admin_password" name="admin_password" class="form-control" required>
<small class="form-help">Minimum 6 characters</small>
</div>
<div class="form-group">
<label for="confirm_password">Confirm Password</label>
<input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
</div>
</div>
<div class="admin-info">
<h3>Administrator Privileges</h3>
<p>
{% if is_initial_setup %}
This account will have full access to manage users, teams, and projects within your company.
{% else %}
This administrator will have full control over the new company and its users, teams, and projects.
{% endif %}
</p>
</div>
</div>
<!-- Form Actions -->
<div class="form-actions">
{% if is_super_admin %}
<a href="{{ url_for('companies.admin_company') }}" class="btn btn-secondary">
<i class="ti ti-arrow-left"></i> Back to Dashboard
</a>
{% endif %}
<button type="submit" class="btn btn-success">
<i class="ti ti-rocket"></i> {% if is_initial_setup %}Create Company & Admin Account{% else %}Create New Company{% endif %}
</button>
</div>
</form>
{% if is_initial_setup and existing_companies > 0 %}
<div class="alternative-actions">
<p>Already have an account?</p>
<a href="{{ url_for('login') }}" class="btn btn-secondary">Go to Login</a>
</div>
{% endif %}
{% endif %}
</div>
<script>
// Form validation
function validatePasswords() {
const password = document.getElementById('admin_password').value;
const confirmPassword = document.getElementById('confirm_password').value;
const confirmField = document.getElementById('confirm_password');
if (password && confirmPassword && password !== confirmPassword) {
confirmField.setCustomValidity('Passwords do not match');
return false;
} else {
confirmField.setCustomValidity('');
return true;
}
}
document.getElementById('confirm_password').addEventListener('input', validatePasswords);
document.getElementById('admin_password').addEventListener('input', validatePasswords);
// Form submission validation
document.querySelector('.company-setup-form').addEventListener('submit', function(e) {
if (!validatePasswords()) {
e.preventDefault();
alert('Please ensure passwords match before submitting.');
}
});
</script>
<style>
.company-setup-form {
max-width: 800px;
margin: 0 auto;
}
.form-section {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 30px;
margin-bottom: 30px;
}
.form-section h2 {
margin-top: 0;
margin-bottom: 20px;
color: #333;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
}
.info-message {
background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
border: 1px solid #b3d9ff;
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
text-align: center;
}
.info-message h3 {
margin-top: 0;
color: #0066cc;
font-size: 24px;
}
.info-message p {
margin-bottom: 0;
color: #555;
font-size: 16px;
}
.error-message {
background: #fff5f5;
border: 1px solid #fed7d7;
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
text-align: center;
}
.error-message h3 {
margin-top: 0;
color: #c53030;
font-size: 24px;
}
.error-message p {
margin-bottom: 20px;
color: #555;
font-size: 16px;
}
.admin-info {
background: #e7f3ff;
border: 1px solid #b3d9ff;
border-radius: 8px;
padding: 20px;
margin-top: 20px;
}
.admin-info h3 {
margin-top: 0;
margin-bottom: 10px;
color: #0066cc;
font-size: 16px;
}
.admin-info p {
margin-bottom: 0;
color: #555;
line-height: 1.5;
}
.alternative-actions {
text-align: center;
margin-top: 30px;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
}
.alternative-actions p {
margin-bottom: 15px;
color: #666;
}
</style>
{% endblock %}