OIDC test - move to www base
This commit is contained in:
1 parent
d572067cf6
commit
f2810a7950
12 files changed
+13
-725
No files matched your search
@@ -1,9 +0,0 @@
|
||||
OIDC_CLIENT_ID=fitness-oidc
|
||||
OIDC_CLIENT_SECRET=egebuqzZfVnjjBG9JDQ8tjW3TzV9gJurvT7qfB6c2SX2nPBNeaGycDfx4788QzJd
|
||||
OIDC_REDIRECT_URI=https://fitness.matt-cloud.com/pgapi/auth/oidc/callback
|
||||
OIDC_AUTH_ENDPOINT=https://auth.matt-cloud.com/oidc/auth
|
||||
OIDC_TOKEN_ENDPOINT=https://auth.matt-cloud.com/oidc/token
|
||||
OIDC_USERINFO_ENDPOINT=https://auth.matt-cloud.com/oidc/userinfo
|
||||
OIDC_LOGOUT_ENDPOINT=https://auth.matt-cloud.com/logout
|
||||
# Optional: the default redirect after logout
|
||||
OIDC_POST_LOGOUT_REDIRECT_URI=https://fitness.matt-cloud.com/
|
||||
@@ -1,59 +0,0 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
require_once __DIR__ . '/config.php';
|
||||
require_once __DIR__ . '/vendor/autoload.php';
|
||||
|
||||
use Fitness\OIDC\OIDC;
|
||||
|
||||
// Ensure a state was sent back.
|
||||
if (!isset($_GET['state']) || !isset($_SESSION['oidc_state'])) {
|
||||
http_response_code(400);
|
||||
exit('Missing state parameter.');
|
||||
}
|
||||
|
||||
// Verify the state matches what we stored.
|
||||
if ($_GET['state'] !== $_SESSION['oidc_state']) {
|
||||
http_response_code(400);
|
||||
exit('Invalid state.');
|
||||
}
|
||||
|
||||
// Clean up the session variables.
|
||||
$state = $_SESSION['oidc_state'];
|
||||
$nonce = $_SESSION['oidc_nonce'];
|
||||
unset($_SESSION['oidc_state'], $_SESSION['oidc_nonce']);
|
||||
|
||||
if (!isset($_GET['code'])) {
|
||||
http_response_code(400);
|
||||
exit('Missing authorization code.');
|
||||
}
|
||||
|
||||
$code = $_GET['code'];
|
||||
$oidc = new OIDC();
|
||||
|
||||
try {
|
||||
// Exchange code for tokens.
|
||||
$tokens = $oidc->exchangeCode($code);
|
||||
|
||||
// Validate ID token (minimal).
|
||||
$idInfo = $oidc->validateIDToken($tokens['id_token'], $nonce);
|
||||
|
||||
// Get userinfo (includes groups because of scope).
|
||||
$userInfo = $oidc->getUserInfo($tokens['access_token']);
|
||||
|
||||
// Store everything we need in the session.
|
||||
$_SESSION['user'] = [
|
||||
'id_token' => $tokens['id_token'],
|
||||
'access_token'=> $tokens['access_token'],
|
||||
'refresh_token'=> $tokens['refresh_token'] ?? null,
|
||||
'expires_in' => $tokens['expires_in'] ?? null,
|
||||
'id_info' => $idInfo,
|
||||
'user_info' => $userInfo,
|
||||
];
|
||||
} catch (\Throwable $e) {
|
||||
http_response_code(500);
|
||||
exit('Error during OIDC exchange: ' . $e->getMessage());
|
||||
}
|
||||
|
||||
// Clean up the query string (code, state) by redirecting to the home page.
|
||||
header('Location: /');
|
||||
exit;
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"require": {
|
||||
"guzzlehttp/guzzle": "^7.0",
|
||||
"firebase/php-jwt": "^6.0"
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
session_start();
|
||||
|
||||
/**
|
||||
* Load environment variables. If you don't use phpdotenv,
|
||||
* copy the values from .env directly here.
|
||||
*/
|
||||
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
|
||||
$dotenv->load();
|
||||
|
||||
/**
|
||||
* Basic OIDC configuration – keep all secrets out of source‑control.
|
||||
*/
|
||||
define('OIDC_CLIENT_ID', getenv('OIDC_CLIENT_ID'));
|
||||
define('OIDC_CLIENT_SECRET', getenv('OIDC_CLIENT_SECRET'));
|
||||
define('OIDC_REDIRECT_URI', getenv('OIDC_REDIRECT_URI'));
|
||||
define('OIDC_AUTH_ENDPOINT', getenv('OIDC_AUTH_ENDPOINT'));
|
||||
define('OIDC_TOKEN_ENDPOINT', getenv('OIDC_TOKEN_ENDPOINT'));
|
||||
define('OIDC_USERINFO_ENDPOINT', getenv('OIDC_USERINFO_ENDPOINT'));
|
||||
define('OIDC_LOGOUT_ENDPOINT', getenv('OIDC_LOGOUT_ENDPOINT'));
|
||||
define('OIDC_POST_LOGOUT_REDIRECT_URI', getenv('OIDC_POST_LOGOUT_REDIRECT_URI'));
|
||||
@@ -1,38 +0,0 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
require_once __DIR__ . '/config.php';
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fitness Site – OIDC Demo</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; margin: 2rem; }
|
||||
.info { margin-top: 1rem; }
|
||||
pre { background: #f4f4f4; padding: 1rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Fitness Site – OIDC Demo</h1>
|
||||
|
||||
<?php if (!isset($_SESSION['user'])): ?>
|
||||
<p>You are not logged in.</p>
|
||||
<p><a href="/login.php"><button>Login with Authelia</button></a></p>
|
||||
<?php else: ?>
|
||||
<p>Logged in as: <strong><?=htmlspecialchars($_SESSION['user']['user_info']['name'] ?? 'N/A')?></strong></p>
|
||||
|
||||
<div class="info">
|
||||
<h2>User Information</h2>
|
||||
<pre><?=htmlspecialchars(json_encode($_SESSION['user']['user_info'], JSON_PRETTY_PRINT))?></pre>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<h2>ID Token Payload (claims)</h2>
|
||||
<pre><?=htmlspecialchars(json_encode($_SESSION['user']['id_info'], JSON_PRETTY_PRINT))?></pre>
|
||||
</div>
|
||||
|
||||
<p><a href="/logout.php"><button>Logout</button></a></p>
|
||||
<?php endif; ?>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,18 +0,0 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
require_once __DIR__ . '/config.php';
|
||||
require_once __DIR__ . '/vendor/autoload.php';
|
||||
|
||||
use Fitness\OIDC\OIDC;
|
||||
|
||||
// Generate a cryptographically random state & nonce.
|
||||
$state = bin2hex(random_bytes(16));
|
||||
$nonce = bin2hex(random_bytes(16));
|
||||
|
||||
// Persist them in the session to validate later.
|
||||
$_SESSION['oidc_state'] = $state;
|
||||
$_SESSION['oidc_nonce'] = $nonce;
|
||||
|
||||
$oidc = new OIDC();
|
||||
header('Location: ' . $oidc->buildAuthUrl($state, $nonce));
|
||||
exit;
|
||||
@@ -1,15 +0,0 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
require_once __DIR__ . '/config.php';
|
||||
|
||||
// Destroy the PHP session.
|
||||
session_start();
|
||||
session_destroy();
|
||||
|
||||
// Redirect the user to Authelia’s logout endpoint.
|
||||
// Authelia will clean its session and then redirect back.
|
||||
$logoutUrl = OIDC_LOGOUT_ENDPOINT
|
||||
. '?post_logout_redirect_uri=' . urlencode(OIDC_POST_LOGOUT_REDIRECT_URI);
|
||||
|
||||
header('Location: ' . $logoutUrl);
|
||||
exit;
|
||||
@@ -1,91 +0,0 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace Fitness\OIDC;
|
||||
|
||||
use GuzzleHttp\Client;
|
||||
use Firebase\JWT\JWT;
|
||||
use Firebase\JWT\Key;
|
||||
|
||||
class OIDC
|
||||
{
|
||||
private Client $http;
|
||||
|
||||
public function __construct()
|
||||
{
|
||||
$this->http = new Client(['http_errors' => false]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the Auth URL that redirects the user to Authelia.
|
||||
*/
|
||||
public function buildAuthUrl(string $state, string $nonce): string
|
||||
{
|
||||
$params = [
|
||||
'response_type' => 'code',
|
||||
'client_id' => OIDC_CLIENT_ID,
|
||||
'redirect_uri' => OIDC_REDIRECT_URI,
|
||||
'scope' => 'openid profile email groups',
|
||||
'state' => $state,
|
||||
'nonce' => $nonce,
|
||||
];
|
||||
|
||||
return OIDC_AUTH_ENDPOINT . '?' . http_build_query($params);
|
||||
}
|
||||
|
||||
/**
|
||||
* Exchange the Authorization Code for tokens.
|
||||
*/
|
||||
public function exchangeCode(string $code): array
|
||||
{
|
||||
$response = $this->http->post(OIDC_TOKEN_ENDPOINT, [
|
||||
'auth' => [OIDC_CLIENT_ID, OIDC_CLIENT_SECRET],
|
||||
'form_params' => [
|
||||
'grant_type' => 'authorization_code',
|
||||
'code' => $code,
|
||||
'redirect_uri' => OIDC_REDIRECT_URI,
|
||||
],
|
||||
]);
|
||||
|
||||
if ($response->getStatusCode() !== 200) {
|
||||
throw new \RuntimeException('Token endpoint returned ' . $response->getStatusCode());
|
||||
}
|
||||
|
||||
return json_decode((string)$response->getBody(), true, 512, JSON_THROW_ON_ERROR);
|
||||
}
|
||||
|
||||
/**
|
||||
* Call /userinfo with the access token.
|
||||
*/
|
||||
public function getUserInfo(string $accessToken): array
|
||||
{
|
||||
$response = $this->http->get(OIDC_USERINFO_ENDPOINT, [
|
||||
'headers' => [
|
||||
'Authorization' => 'Bearer ' . $accessToken,
|
||||
],
|
||||
]);
|
||||
|
||||
if ($response->getStatusCode() !== 200) {
|
||||
throw new \RuntimeException('Userinfo endpoint returned ' . $response->getStatusCode());
|
||||
}
|
||||
|
||||
return json_decode((string)$response->getBody(), true, 512, JSON_THROW_ON_ERROR);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate the ID Token (minimal validation for demo purposes).
|
||||
*/
|
||||
public function validateIDToken(string $idToken, string $nonce): array
|
||||
{
|
||||
// Authelia uses RS256 by default, but your config says "none".
|
||||
// We'll decode without verification if alg is "none".
|
||||
$decoded = JWT::decode($idToken, new Key('', ''), ['none', 'RS256']);
|
||||
|
||||
// Check nonce matches what we stored in session.
|
||||
if ($decoded->nonce !== $nonce) {
|
||||
throw new \RuntimeException('Invalid nonce');
|
||||
}
|
||||
|
||||
return (array)$decoded;
|
||||
}
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
<!-- index.html (served by PHP) -->
|
||||
<input type="file" id="photo" style="display:none;">
|
||||
<div id="drop" style="border:2px dashed #bbb; padding:20px;">
|
||||
Drag photo here or click to choose
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const drop = document.getElementById('drop');
|
||||
const photoInput = document.getElementById('photo');
|
||||
|
||||
drop.onclick = () => photoInput.click();
|
||||
|
||||
drop.addEventListener('dragover', e => { e.preventDefault(); drop.style.background='#eef'; });
|
||||
drop.addEventListener('dragleave', e => { e.preventDefault(); drop.style.background=''; });
|
||||
|
||||
drop.addEventListener('drop', e => {
|
||||
e.preventDefault();
|
||||
drop.style.background='';
|
||||
const file = e.dataTransfer.files[0];
|
||||
upload(file);
|
||||
});
|
||||
|
||||
photoInput.addEventListener('change', () => upload(photoInput.files[0]));
|
||||
|
||||
async function upload(file) {
|
||||
// 1️⃣ Send file to PHP, which will forward it to Flask
|
||||
const form = new FormData();
|
||||
form.append('photo', file);
|
||||
|
||||
const res = await fetch('/api/upload_photo', { // <-- PHP endpoint
|
||||
method: 'POST',
|
||||
body: form
|
||||
});
|
||||
|
||||
const json = await res.json();
|
||||
console.log('Uploaded:', json);
|
||||
}
|
||||
</script>
|
||||
-314
@@ -1,314 +0,0 @@
|
||||
<?php
|
||||
/**
|
||||
* photos.php - Service Provider Photo Gallery Implementation
|
||||
* Requirements:
|
||||
* 1. Upload multiple images via PHP Frontend
|
||||
* 2. Display gallery with thumbnail selection
|
||||
* 3. Use Flask API for storage and metadata
|
||||
* 4. Store photos in file system (not database BLOBs)
|
||||
*/
|
||||
require_once __DIR__ . '/config.php';
|
||||
|
||||
// Validate provider ID
|
||||
if (!isset($_GET['id']) || empty($_GET['id'])) {
|
||||
die('Provider ID missing. Use: photos.php?id=123');
|
||||
}
|
||||
$provider_id = $_GET['id'];
|
||||
|
||||
// Fetch existing photos from API
|
||||
$api_url = BASE_API_URL . '/providers/' . urlencode($provider_id) . "/photos";
|
||||
$existing_photos = [];
|
||||
try {
|
||||
$response = file_get_contents($api_url);
|
||||
$existing_photos = json_decode($response, true);
|
||||
if (isset($existing_photos['error'])) {
|
||||
trigger_error($existing_photos['error'], E_USER_WARNING);
|
||||
$existing_photos = [];
|
||||
}
|
||||
} catch (Exception $e) {
|
||||
trigger_error('API error: ' . $e->getMessage(), E_USER_WARNING);
|
||||
}
|
||||
|
||||
// Check upload permissions
|
||||
$has_upload_perm = true; // Add authorization logic here
|
||||
|
||||
// Generate unique token for upload (security)
|
||||
$upload_token = bin2hex(random_bytes(16));
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Photos for Service Provider #<?php echo htmlspecialchars($provider_id); ?></title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 30px;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.upload-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.upload-btn {
|
||||
padding: 10px 20px;
|
||||
background: #3a86ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.upload-btn:hover {
|
||||
background: #1d66cc;
|
||||
}
|
||||
#preview-container {
|
||||
display: none;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.photo-item {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 5px;
|
||||
}
|
||||
.photo-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.main-indicator {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #3a86ff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #666;
|
||||
}
|
||||
.no-photos {
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
color: #777;
|
||||
}
|
||||
.error {
|
||||
color: #e74c3c;
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Photos for Service Provider #<?php echo htmlspecialchars($provider_id); ?></h1>
|
||||
|
||||
<?php if (isset($existing_photos['error'])): ?>
|
||||
<div class="error">
|
||||
<?php echo htmlspecialchars($existing_photos['error']); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($has_upload_perm): ?>
|
||||
<div class="upload-section">
|
||||
<input type="file" id="photo-upload" name="photos[]" multiple accept="image/*">
|
||||
<button id="upload-btn" class="upload-btn">Upload Photos</button>
|
||||
</div>
|
||||
<div id="preview-container"></div>
|
||||
<?php else: ?>
|
||||
<p>Upload permissions disabled. Contact administrator.</p>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="loading" id="loading">
|
||||
Loading photos...
|
||||
</div>
|
||||
|
||||
<div id="gallery">
|
||||
<?php if (empty($existing_photos)): ?>
|
||||
<div class="no-photos">
|
||||
<h2>No photos uploaded yet</h2>
|
||||
<p>Upload images to display them here</p>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<?php foreach ($existing_photos as $photo): ?>
|
||||
<div class="photo-item">
|
||||
<input type="radio" name="main_photo" value="<?php echo htmlspecialchars($photo['path']); ?>" <?php echo $photo['is_main'] ? 'checked' : ''; ?> class="main-radio">
|
||||
<img src="<?php echo htmlspecialchars($photo['path']); ?>" alt="Service provider photo">
|
||||
<?php if ($photo['is_main']): ?>
|
||||
<div class="main-indicator"></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const photoInput = document.getElementById('photo-upload');
|
||||
const previewContainer = document.getElementById('preview-container');
|
||||
const gallery = document.getElementById('gallery');
|
||||
const loading = document.getElementById('loading');
|
||||
|
||||
// Show preview on file selection
|
||||
photoInput.addEventListener('change', function(e) {
|
||||
if (this.files.length > 0) {
|
||||
previewContainer.style.display = 'flex';
|
||||
}
|
||||
|
||||
previewContainer.innerHTML = '';
|
||||
for (let i = 0; i < this.files.length; i++) {
|
||||
const file = this.files[i];
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function(e) {
|
||||
const preview = document.createElement('div');
|
||||
preview.className = 'photo-item';
|
||||
|
||||
preview.innerHTML = `
|
||||
<input type="radio" name="main_photo" value="${file.name}"
|
||||
class="main-radio"
|
||||
style="position: absolute; top: 2px; left: 2px;">
|
||||
<img src="${e.target.result}"
|
||||
alt="Photo preview">
|
||||
<div style="position: absolute; top: 2px; right: 2px;
|
||||
width: 16px; height: 16px;
|
||||
background: #3a86ff;
|
||||
border-radius: 50%;"></div>
|
||||
`;
|
||||
|
||||
previewContainer.appendChild(preview);
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle upload button
|
||||
document.getElementById('upload-btn').addEventListener('click', async () => {
|
||||
const fileInput = document.getElementById('photo-upload');
|
||||
if (!fileInput.files.length) {
|
||||
alert('Please select at least one photo to upload');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
for (let i = 0; i < fileInput.files.length; i++) {
|
||||
formData.append('photos[]', fileInput.files[i]);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
BASE_API_URL . '/providers/<?php echo urlencode($provider_id); ?>/photos',
|
||||
{
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'X-Upload-Token': '<?php echo $upload_token; ?>'
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`API error: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Add new photos to gallery
|
||||
data.paths.forEach(path => {
|
||||
const newPhoto = document.createElement('div');
|
||||
newPhoto.className = 'photo-item';
|
||||
|
||||
newPhoto.innerHTML = `
|
||||
<input type="radio" name="main_photo" value="${path}"
|
||||
class="main-radio"
|
||||
style="position: absolute; top: 2px; left: 2px;">
|
||||
<img src="${path}"
|
||||
alt="New photo"
|
||||
style="object-fit: cover;">
|
||||
<div style="position: absolute; top: 2px; right: 2px;
|
||||
width: 16px; height: 16px;
|
||||
background: #3a86ff;
|
||||
border-radius: 50%;"></div>
|
||||
`;
|
||||
|
||||
gallery.appendChild(newPhoto);
|
||||
});
|
||||
|
||||
// Reset form
|
||||
fileInput.value = '';
|
||||
previewContainer.style.display = 'none';
|
||||
|
||||
// Update main photo selection (if any)
|
||||
const mainRadios = gallery.querySelectorAll('.main-radio');
|
||||
if (mainRadios.length > 0) {
|
||||
mainRadios[0].checked = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Upload failed:', error);
|
||||
alert('Upload failed: ' + error.message);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle main photo selection
|
||||
gallery.addEventListener('change', async (e) => {
|
||||
if (e.target.className === 'main-radio') {
|
||||
const mainPhoto = e.target.value;
|
||||
const providerId = '<?php echo $provider_id; ?>';
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
BASE_API_URL . '/providers/${providerId}/main_photo',
|
||||
{
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
photo_path: mainPhoto
|
||||
})
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`API error: ${response.status}`);
|
||||
}
|
||||
|
||||
// Update visuals
|
||||
gallery.querySelectorAll('.main-indicator').forEach(ind => {
|
||||
ind.style.display = 'none';
|
||||
});
|
||||
e.target.parentElement.querySelector('.main-indicator').style.display = 'block';
|
||||
} catch (error) {
|
||||
console.error('Setting main photo failed:', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Hide loading message
|
||||
loading.style.display = 'none';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
-114
@@ -1,114 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fitness Tracker</title>
|
||||
<style>
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th, td { border: 1px solid #ddd; padding: 8px; }
|
||||
th { background:#f0f0f0; }
|
||||
#drop-zone { border: 2px dashed #aaa; padding: 1rem; text-align:center; cursor:pointer; }
|
||||
#drop-zone.hover { background:#e0e0ff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Providers</h1>
|
||||
<button id="add-provider-btn">Add Provider</button>
|
||||
<table id="providers-table">
|
||||
<thead><tr><th>ID</th><th>Name</th><th>Phone</th><th>Photo</th></tr></thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
|
||||
<!-- Add Provider Modal -->
|
||||
<div id="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);">
|
||||
<div style="background:#fff; margin:5% auto; padding:1rem; width:300px; position:relative;">
|
||||
<h2>Add Provider</h2>
|
||||
<label>Name: <input type="text" id="p-name"></label><br>
|
||||
<label>Age: <input type="number" id="p-age"></label><br>
|
||||
<label>Phone: <input type="text" id="p-phone"></label><br>
|
||||
<label>Rates: <input type="text" id="p-rates" placeholder='{"hourly":70}'></label><br>
|
||||
<label>Private: <input type="checkbox" id="p-private"></label><br>
|
||||
|
||||
<div id="drop-zone">Drag photo or click to upload</div>
|
||||
<input type="file" id="p-file" style="display:none;">
|
||||
<br>
|
||||
<button id="save-provider">Save</button>
|
||||
<button id="cancel-provider">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API = 'http://localhost:5000';
|
||||
|
||||
// ----------- Fetch & render providers -----------------
|
||||
async function loadProviders() {
|
||||
const res = await fetch(`${API}/providers`);
|
||||
const data = await res.json();
|
||||
const tbody = document.querySelector('#providers-table tbody');
|
||||
tbody.innerHTML = '';
|
||||
data.forEach(p => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `
|
||||
<td>${p.id}</td>
|
||||
<td>${p.name}</td>
|
||||
<td>${p.phone}</td>
|
||||
<td><img src="${p.photo}" width="50"></td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
}
|
||||
loadProviders();
|
||||
|
||||
// ----------- Modal handling -----------------
|
||||
const modal = document.getElementById('modal');
|
||||
const addBtn = document.getElementById('add-provider-btn');
|
||||
const cancelBtn = document.getElementById('cancel-provider');
|
||||
const dropZone = document.getElementById('drop-zone');
|
||||
const fileInput = document.getElementById('p-file');
|
||||
let uploadedPhotoUrl = null;
|
||||
|
||||
addBtn.onclick = () => { modal.style.display='block'; }
|
||||
cancelBtn.onclick = () => { modal.style.display='none'; }
|
||||
|
||||
dropZone.onclick = () => fileInput.click();
|
||||
|
||||
fileInput.onchange = () => uploadFile(fileInput.files[0]);
|
||||
|
||||
dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('hover'); });
|
||||
dropZone.addEventListener('dragleave', e => { e.preventDefault(); dropZone.classList.remove('hover'); });
|
||||
dropZone.addEventListener('drop', e => {
|
||||
e.preventDefault(); dropZone.classList.remove('hover');
|
||||
uploadFile(e.dataTransfer.files[0]);
|
||||
});
|
||||
|
||||
async function uploadFile(file) {
|
||||
const formData = new FormData();
|
||||
formData.append('photo', file);
|
||||
const resp = await fetch(`${API}/upload_photo`, { method: 'POST', body: formData });
|
||||
uploadedPhotoUrl = await resp.text(); // /uploads/xxxx.jpg
|
||||
dropZone.textContent = '✓ Uploaded';
|
||||
}
|
||||
|
||||
// ----------- Save provider -----------------
|
||||
const saveBtn = document.getElementById('save-provider');
|
||||
saveBtn.onclick = async () => {
|
||||
const payload = {
|
||||
name: document.getElementById('p-name').value,
|
||||
age: parseInt(document.getElementById('p-age').value, 10),
|
||||
phone: document.getElementById('p-phone').value,
|
||||
rates: JSON.parse(document.getElementById('p-rates').value),
|
||||
private: document.getElementById('p-private').checked,
|
||||
photo: uploadedPhotoUrl
|
||||
};
|
||||
await fetch(`${API}/providers`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
modal.style.display='none';
|
||||
loadProviders(); // refresh table
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user