Add company feature.
This commit is contained in:
Jens Luedicke
261
templates/setup_company.html
Normal file
261
templates/setup_company.html
Normal file
@@ -0,0 +1,261 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="admin-container">
|
||||
<h1>
|
||||
{% if is_initial_setup %}
|
||||
Welcome to TimeTrack
|
||||
{% else %}
|
||||
Create New Company
|
||||
{% endif %}
|
||||
</h1>
|
||||
|
||||
<!-- Info Message -->
|
||||
{% if is_initial_setup %}
|
||||
<div class="info-message">
|
||||
<h3>🎉 Let's Get Started!</h3>
|
||||
<p>Set up your company and create the first administrator account to begin using TimeTrack.</p>
|
||||
</div>
|
||||
{% elif is_super_admin %}
|
||||
<div class="info-message">
|
||||
<h3>🏢 New Company Setup</h3>
|
||||
<p>Create a new company with its own administrator. This will be a separate organization within TimeTrack.</p>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="error-message">
|
||||
<h3>⚠️ 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('admin_company') }}" class="btn btn-secondary">
|
||||
← Back to Dashboard
|
||||
</a>
|
||||
{% endif %}
|
||||
<button type="submit" class="btn btn-success">
|
||||
🚀 {% 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 %}
|
||||
Reference in New Issue
Block a user