|
<div id="modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="modalTitle">Modal Title</h2>
|
|
<button class="close-btn" onclick="closeModal()">×</button>
|
|
</div>
|
|
<div id="modalBody">
|
|
<!-- Login Modal -->
|
|
<div id="loginModal" style="display: none;">
|
|
<h2>Login</h2>
|
|
<form action="/login" method="POST">
|
|
<div class="alert error" id="loginError"></div>
|
|
<div class="form-group">
|
|
<label>Username or Email</label>
|
|
<input type="text" name="username" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Password</label>
|
|
<input type="password" name="password" required>
|
|
</div>
|
|
<button type="submit" class="btn" style="width: 100%;">Login</button>
|
|
<p style="text-align: center; margin-top: 1rem;">
|
|
Don't have an account? <a href="#" onclick="showModal('register'); return false;">Sign up</a>
|
|
</p>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Register Modal -->
|
|
<div id="registerModal" style="display: none;">
|
|
<h2>Sign Up</h2>
|
|
<form onsubmit="submitRegister(event); return false;">
|
|
<div class="alert error" id="registerError"></div>
|
|
<div class="form-group">
|
|
<label>Email</label>
|
|
<input type="email" name="email" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Username</label>
|
|
<input type="text" name="username" required minlength="4" maxlength="15">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Password</label>
|
|
<input type="password" name="password" required>
|
|
</div>
|
|
<button type="submit" class="btn" style="width: 100%;">Sign Up</button>
|
|
<p style="text-align: center; margin-top: 1rem;">
|
|
Already have an account? <a href="#" onclick="showModal('login'); return false;">Login</a>
|
|
</p>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Create Rant Modal -->
|
|
<div id="createRantModal" style="display: none;">
|
|
<h2>Create Rant</h2>
|
|
<form onsubmit="submitCreateRant(event); return false;">
|
|
<div class="alert error" id="rantError"></div>
|
|
<div class="form-group">
|
|
<label>What's on your mind?</label>
|
|
<textarea name="rant" placeholder="Share your thoughts..." required></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Tags (comma separated)</label>
|
|
<input type="text" name="tags" placeholder="rant, javascript, devops">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Type</label>
|
|
<select name="type">
|
|
<option value="1">Rant</option>
|
|
<option value="2">Collab</option>
|
|
<option value="3">Question</option>
|
|
<option value="4">devRant</option>
|
|
<option value="5">Random</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn" style="width: 100%;">Post Rant</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Edit Profile Modal -->
|
|
<div id="editProfileModal" style="display: none;">
|
|
<h2>Edit Profile</h2>
|
|
<form onsubmit="submitEditProfile(event); return false;">
|
|
<div class="alert success" id="profileSuccess"></div>
|
|
<div class="form-group">
|
|
<label>About</label>
|
|
<textarea name="about" placeholder="Tell us about yourself..."></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Skills</label>
|
|
<input type="text" name="skills" placeholder="JavaScript, Python, DevOps">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Location</label>
|
|
<input type="text" name="location" placeholder="San Francisco, CA">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Website</label>
|
|
<input type="url" name="website" placeholder="https://example.com">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>GitHub Username</label>
|
|
<input type="text" name="github" placeholder="username">
|
|
</div>
|
|
<button type="submit" class="btn" style="width: 100%;">Update Profile</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
async function submitRegister(event) {
|
|
event.preventDefault();
|
|
const formData = new FormData(event.target);
|
|
formData.append('app', 3);
|
|
formData.append('type', 1);
|
|
|
|
const response = await fetch('/api/users', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
closeModal();
|
|
showModal('login');
|
|
alert('Registration successful! Please login.');
|
|
} else {
|
|
document.getElementById('registerError').textContent = data.error;
|
|
document.getElementById('registerError').classList.add('active');
|
|
}
|
|
}
|
|
</script>
|