Skip to content

Commit

Permalink
setup form restyle
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zaki-1052
Zaki-1052 committed Jul 1, 2024
1 parent 3927283 commit 3ba1b22
Show file tree
Hide file tree
Showing 3 changed files with 170 additions and 38 deletions.
97 changes: 97 additions & 0 deletions public/setup.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
/* styles.css */

/* General Styles */
body {
font-family: Arial, sans-serif;
background-color: #121212;
color: #e0e0e0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: auto; /* Prevents overflow */
}

/* Container */
.container {
background-color: #1e1e1e;
padding: 20px 40px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
max-width: 400px;
width: 100%;
text-align: center;
overflow-y: auto; /* Enables vertical scroll if needed */
}

/* Form */
form {
display: flex;
flex-direction: column;
}

/* Form Group */
.form-group {
margin-bottom: 15px;
text-align: left;
}

.form-group label {
display: block;
margin-bottom: 5px;
color: #bbbbbb;
}

.form-group input {
width: 100%;
padding: 8px;
box-sizing: border-box;
border: 1px solid #333;
border-radius: 4px;
background-color: #2c2c2c;
color: #e0e0e0;
transition: border-color 0.3s;
}

.form-group input:focus {
border-color: #007bff;
}

/* Button */
button {
padding: 10px 15px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #0056b3;
}

/* Link */
a {
color: #007bff;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* Completion Message */
.completion-message {
margin: 20px auto;
max-width: 600px;
padding: 10px;
background-color: #1e1e1e;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
text-align: center;
color: #e0e0e0;
}
92 changes: 59 additions & 33 deletions public/setup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,45 +3,71 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Setup</title>
<title>Welcome to GPTPortal Setup</title>
<link rel="stylesheet" href="setup.css">
</head>
<body>
<h1>Setup</h1>
<form id="setupForm">
<label for="username">Username (required):</label>
<input type="text" id="username" name="username" required><br>

<label for="password">Password (required):</label>
<input type="password" id="password" name="password" required><br>

<label for="openaiApiKey">OpenAI API Key (optional):</label>
<input type="text" id="openaiApiKey" name="openaiApiKey"><br>

<label for="googleApiKey">Google API Key (optional):</label>
<input type="text" id="googleApiKey" name="googleApiKey"><br>

<label for="mistralApiKey">Mistral API Key (optional):</label>
<input type="text" id="mistralApiKey" name="mistralApiKey"><br>

<label for="claudeApiKey">Claude API Key (optional):</label>
<input type="text" id="claudeApiKey" name="claudeApiKey"><br>

<button type="submit">Submit</button>
</form>
<div class="container">
<h1>Welcome to GPTPortal</h1>
<p>Please fill in the form below to set up your account. Refer to the <a href="https://github.com/Zaki-1052/GPTPortal" target="_blank" rel="noopener noreferrer"><b>GPT Portal Documentation</b></a> for information on how to obtain the required <b>API keys.</b></p>
<p>This information is <i>purely</i> stored <b>locally</b> to your computer, and <u>cannot</u> be transmitted over the internet!</p>
<form id="setupForm">
<div class="form-group">
<label for="username">Username (required):</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password (required):</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="openaiApiKey">OpenAI API Key (recommended):</label>
<input type="text" id="openaiApiKey" name="openaiApiKey">
</div>
<div class="form-group">
<label for="claudeApiKey">Claude API Key (encouraged):</label>
<input type="text" id="claudeApiKey" name="claudeApiKey">
</div>
<div class="form-group">
<label for="googleApiKey">Google API Key (optional):</label>
<input type="text" id="googleApiKey" name="googleApiKey">
</div>
<div class="form-group">
<label for="mistralApiKey">Mistral API Key (optional):</label>
<input type="text" id="mistralApiKey" name="mistralApiKey">
</div>
<div class="form-group">
<label for="qroqApiKey">QROQ API Key (optional):</label>
<input type="text" id="qroqApiKey" name="qroqApiKey">
</div>
<div class="form-group">
<label for="openrouterApiKey">OpenRouter API Key (optional):</label>
<input type="text" id="openrouterApiKey" name="openrouterApiKey">
</div>
<div class="form-group">
<label for="codestralApiKey">Codestral API Key (optional):</label>
<input type="text" id="codestralApiKey" name="codestralApiKey">
</div>
<button type="submit">Submit</button>
</form>
</div>
<script src="script.js"></script>

<script>
document.getElementById('setupForm').addEventListener('submit', function (event) {
event.preventDefault();

const formData = {
username: document.getElementById('username').value,
password: document.getElementById('password').value,
openaiApiKey: document.getElementById('openaiApiKey').value,
googleApiKey: document.getElementById('googleApiKey').value,
mistralApiKey: document.getElementById('mistralApiKey').value,
claudeApiKey: document.getElementById('claudeApiKey').value
};
username: document.getElementById('username').value,
password: document.getElementById('password').value,
openaiApiKey: document.getElementById('openaiApiKey').value,
claudeApiKey: document.getElementById('claudeApiKey').value,
googleApiKey: document.getElementById('googleApiKey').value,
mistralApiKey: document.getElementById('mistralApiKey').value,
qroqApiKey: document.getElementById('qroqApiKey').value,
openrouterApiKey: document.getElementById('openrouterApiKey').value,
codestralApiKey: document.getElementById('codestralApiKey').value
};

fetch('/setup', {
method: 'POST',
Expand All @@ -61,11 +87,11 @@ <h1>Setup</h1>
});

// Inform the user to restart the server manually
document.body.innerHTML = '<h2>Setup is now complete. Please restart the server and access the web app at <a href="http://localhost:3000">localhost:3000</a>. Reload the page now .... You can simply paste `node server.js` into your Terminal to start again. It is already copied to your clipboard.</h2>';
document.body.innerHTML = '<h2 class="completion-message">Setup is now complete. Please restart the server and access the web app at <a href="http://localhost:3000">localhost:3000</a>. Please: Reload the page now .... You can simply paste this command: `node server.js` into your Terminal to start it again. It is already copied to your clipboard.</h2>';
// Redirect to /portal after 3 seconds
setTimeout(() => {
window.location.href = `${baseURL}/portal`;
}, 5000);
}, 10000);

// Call the endpoint to restart the server
fetch('/restart-server', {
Expand All @@ -89,4 +115,4 @@ <h1>Setup</h1>
</script>

</body>
</html>
</html>
19 changes: 14 additions & 5 deletions server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,21 +97,30 @@ app.get('/setup', (req, res) => {
});

app.post('/setup', (req, res) => {
const { username, password, openaiApiKey, googleApiKey, mistralApiKey, claudeApiKey } = req.body;
const { username, password, openaiApiKey, claudeApiKey, googleApiKey, mistralApiKey, qroqApiKey, openrouterApiKey, codestralApiKey } = req.body;

let envContent = `USER_USERNAME=${username}\nUSER_PASSWORD=${password}\n`;

if (openaiApiKey) {
envContent += `OPENAI_API_KEY=${openaiApiKey}\n`;
}
if (claudeApiKey) {
envContent += `CLAUDE_API_KEY=${claudeApiKey}\n`;
}
if (googleApiKey) {
envContent += `GOOGLE_API_KEY=${googleApiKey}\n`;
envContent += `GOOGLE_API_KEY=${googleApiKey}\n`;
}
if (mistralApiKey) {
envContent += `MISTRAL_API_KEY=${mistralApiKey}\n`;
envContent += `MISTRAL_API_KEY=${mistralApiKey}\n`;
}
if (claudeApiKey) {
envContent += `CLAUDE_API_KEY=${claudeApiKey}\n`;
if (qroqApiKey) {
envContent += `QROQ_API_KEY=${qroqApiKey}\n`;
}
if (openrouterApiKey) {
envContent += `OPENROUTER_API_KEY=${openrouterApiKey}\n`;
}
if (codestralApiKey) {
envContent += `CODESTRAL_API_KEY=${codestralApiKey}\n`;
}

fs.writeFileSync('.env', envContent);
Expand Down

0 comments on commit 3ba1b22

Please sign in to comment.