196 lines
8.4 KiB
PHP
196 lines
8.4 KiB
PHP
<?php
|
|
session_start();
|
|
require_once 'includes/flash_messages.php';
|
|
|
|
if (!isset($_SESSION['user_id'])) {
|
|
header('Location: login.php');
|
|
exit();
|
|
}
|
|
|
|
// Pre-fill display name with username
|
|
$displayName = $_SESSION['username'] ?? '';
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Complete Your Profile</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css">
|
|
<style>
|
|
.skill-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
background-color: #007bff;
|
|
color: white;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 50rem;
|
|
margin-right: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.skill-tag .btn-close {
|
|
margin-left: 0.5rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="index.php">SocialApp</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container mt-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8 col-lg-6">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body p-4">
|
|
<h1 class="card-title text-center mb-4">Setup Your Profile</h1>
|
|
<?php display_flash_message(); ?>
|
|
<p class="text-center text-muted mb-4">Welcome! Let's get your profile ready.</p>
|
|
|
|
<form action="handle_profile_setup.php" method="POST" id="profileForm">
|
|
<div class="mb-3">
|
|
<label for="display_name" class="form-label">Display Name</label>
|
|
<input type="text" class="form-control" id="display_name" name="display_name" value="<?php echo htmlspecialchars($displayName); ?>" required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="description" class="form-label">Description</label>
|
|
<textarea class="form-control" id="description" name="description" rows="3" placeholder="Tell us a little about yourself"></textarea>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="occupation" class="form-label">Occupation</label>
|
|
<select class="form-select" id="occupation" name="occupation">
|
|
<option selected>Choose...</option>
|
|
<option value="Developer">Developer</option>
|
|
<option value="Designer">Designer</option>
|
|
<option value="Manager">Manager</option>
|
|
<option value="Student">Student</option>
|
|
<option value="Other">Other</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="skill_input" class="form-label">Skills (up to 10)</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="skill_input" placeholder="e.g., PHP, Svelte, Marketing">
|
|
<button class="btn btn-outline-primary" type="button" id="add_skill_btn">Add</button>
|
|
</div>
|
|
<div id="skills_container" class="mt-2"></div>
|
|
<input type="hidden" name="skills" id="skills_hidden_input">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label">Location</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="location_display" name="location_display" placeholder="City, Country" readonly>
|
|
<button class="btn btn-outline-secondary" type="button" id="get_location_btn">Get Location</button>
|
|
</div>
|
|
<input type="hidden" name="city" id="city_input">
|
|
<input type="hidden" name="country" id="country_input">
|
|
</div>
|
|
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary btn-lg">Save and Continue</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const addSkillBtn = document.getElementById('add_skill_btn');
|
|
const skillInput = document.getElementById('skill_input');
|
|
const skillsContainer = document.getElementById('skills_container');
|
|
const skillsHiddenInput = document.getElementById('skills_hidden_input');
|
|
const getLocationBtn = document.getElementById('get_location_btn');
|
|
const locationDisplay = document.getElementById('location_display');
|
|
const cityInput = document.getElementById('city_input');
|
|
const countryInput = document.getElementById('country_input');
|
|
|
|
let skills = [];
|
|
|
|
function renderSkills() {
|
|
skillsContainer.innerHTML = '';
|
|
skills.forEach((skill, index) => {
|
|
const skillTag = document.createElement('div');
|
|
skillTag.className = 'skill-tag';
|
|
skillTag.innerHTML = `
|
|
<span>${skill}</span>
|
|
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
|
|
`;
|
|
skillTag.querySelector('.btn-close').addEventListener('click', () => {
|
|
skills.splice(index, 1);
|
|
renderSkills();
|
|
});
|
|
skillsContainer.appendChild(skillTag);
|
|
});
|
|
skillsHiddenInput.value = JSON.stringify(skills);
|
|
}
|
|
|
|
addSkillBtn.addEventListener('click', () => {
|
|
const skill = skillInput.value.trim();
|
|
if (skill && skills.length < 10 && !skills.includes(skill)) {
|
|
skills.push(skill);
|
|
skillInput.value = '';
|
|
renderSkills();
|
|
}
|
|
});
|
|
|
|
skillInput.addEventListener('keypress', function(event) {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
addSkillBtn.click();
|
|
}
|
|
});
|
|
|
|
getLocationBtn.addEventListener('click', () => {
|
|
if ("geolocation" in navigator) {
|
|
locationDisplay.value = "Fetching location...";
|
|
navigator.geolocation.getCurrentPosition(async (position) => {
|
|
const lat = position.coords.latitude;
|
|
const lon = position.coords.longitude;
|
|
|
|
try {
|
|
// Using a free reverse geocoding API
|
|
const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`);
|
|
const data = await response.json();
|
|
|
|
const city = data.address.city || data.address.town || data.address.village || 'Unknown City';
|
|
const country = data.address.country || 'Unknown Country';
|
|
|
|
locationDisplay.value = `${city}, ${country}`;
|
|
cityInput.value = city;
|
|
countryInput.value = country;
|
|
|
|
} catch (error) {
|
|
locationDisplay.value = "Could not fetch location details.";
|
|
console.error("Error fetching location details:", error);
|
|
}
|
|
}, (error) => {
|
|
locationDisplay.value = "Location access denied.";
|
|
console.error("Geolocation error:", error);
|
|
});
|
|
} else {
|
|
locationDisplay.value = "Geolocation is not available.";
|
|
}
|
|
});
|
|
|
|
document.getElementById('profileForm').addEventListener('submit', function() {
|
|
// Ensure the hidden input is up-to-date before submitting
|
|
skillsHiddenInput.value = JSON.stringify(skills);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|