173 lines
5.6 KiB
HTML
173 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OSVauco Admin - Ny kunde</title>
|
|
<style>
|
|
body {
|
|
background-color: #121212;
|
|
color: #e0e0e0;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
margin: 0;
|
|
}
|
|
.container {
|
|
width: 100%;
|
|
max-width: 500px;
|
|
padding: 2rem;
|
|
background: #1e1e1e;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
label {
|
|
font-weight: 500;
|
|
}
|
|
input {
|
|
background: #2c2c2c;
|
|
border: 1px solid #444;
|
|
color: #e0e0e0;
|
|
padding: 0.8rem;
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
}
|
|
button {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
padding: 1rem;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
transition: background-color 0.3s;
|
|
}
|
|
button:hover {
|
|
background-color: #45a049;
|
|
}
|
|
button:disabled {
|
|
background-color: #555;
|
|
cursor: not-allowed;
|
|
}
|
|
.spinner {
|
|
border: 4px solid #f3f3f3;
|
|
border-top: 4px solid #3498db;
|
|
border-radius: 50%;
|
|
width: 30px;
|
|
height: 30px;
|
|
animation: spin 1s linear infinite;
|
|
margin: 1rem auto;
|
|
display: none;
|
|
}
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
#result {
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
}
|
|
.success {
|
|
background-color: #2e7d32;
|
|
color: white;
|
|
}
|
|
.error {
|
|
background-color: #c62828;
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>OSVauco Admin — Ny kunde</h1>
|
|
<form id="create-customer-form">
|
|
<label for="customer_name">Customer Name</label>
|
|
<input type="text" id="customer_name" name="customer_name" required>
|
|
|
|
<label for="project_id">Project ID</label>
|
|
<input type="text" id="project_id" name="project_id" required>
|
|
|
|
<label for="billing_account_id">Billing Account ID</label>
|
|
<input type="text" id="billing_account_id" name="billing_account_id" required>
|
|
|
|
<label for="alert_email">Alert Email</label>
|
|
<input type="email" id="alert_email" name="alert_email" required>
|
|
|
|
<label for="container_image">Container Image</label>
|
|
<input type="text" id="container_image" name="container_image" required>
|
|
|
|
<label for="region">Region</label>
|
|
<input type="text" id="region" name="region" value="europe-north1" required>
|
|
|
|
<p style="color:#aaa; font-size:0.85rem; margin:0">
|
|
⚠️ Dette oppretter et nytt GCP-prosjekt og koster penger. Bekreft at
|
|
alle verdier er riktige før du trykker.
|
|
</p>
|
|
<button type="submit">Create Customer</button>
|
|
</form>
|
|
<div class="spinner" id="spinner"></div>
|
|
<div id="result"></div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('create-customer-form').addEventListener('submit', async function(event) {
|
|
event.preventDefault();
|
|
|
|
const form = event.target;
|
|
const formData = new FormData(form);
|
|
const data = Object.fromEntries(formData.entries());
|
|
|
|
const spinner = document.getElementById('spinner');
|
|
const resultDiv = document.getElementById('result');
|
|
const submitButton = form.querySelector('button');
|
|
|
|
spinner.style.display = 'block';
|
|
resultDiv.innerHTML = '';
|
|
resultDiv.className = '';
|
|
submitButton.disabled = true;
|
|
|
|
try {
|
|
const response = await fetch('/admin/create-customer', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
resultDiv.textContent = `Success! Customer ${result.customer} created with project ID ${result.project_id}.`;
|
|
resultDiv.classList.add('success');
|
|
form.reset();
|
|
} else {
|
|
resultDiv.textContent = `Error: ${result.detail}`;
|
|
resultDiv.classList.add('error');
|
|
}
|
|
} catch (error) {
|
|
resultDiv.textContent = `An unexpected error occurred: ${error.message}`;
|
|
resultDiv.classList.add('error');
|
|
} finally {
|
|
spinner.style.display = 'none';
|
|
submitButton.disabled = false;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|