Skip to content

Commit d2a203b

Browse files
hummusonrailshummusonrails
authored
Merge pull request #2 from bencgreenberg/update-api-key-field
style changes
2 parents 9e1ff81 + 2f823ed commit d2a203b

File tree

3 files changed

+63
-44
lines changed

3 files changed

+63
-44
lines changed

‎popup.html‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<link rel="stylesheet" href="styles.css">
5-
</head>
6-
<body>
7-
<h1>ChatGPT Email Reviewer</h1>
8-
<p>Select a writing style:</p>
9-
<form id="styleForm">
10-
<label><input type="checkbox" name="style" value="friendly"> Friendly</label><br>
11-
<label><input type="checkbox" name="style" value="business"> Business</label><br>
12-
<label><input type="checkbox" name="style" value="authoritative"> Authoritative</label><br>
13-
<label><input type="checkbox" name="style" value="personal"> Personal</label><br>
14-
<label><input type="checkbox" name="style" value="casual"> Casual</label><br>
15-
<label><input type="checkbox" name="style" value="serious"> Serious</label><br>
16-
<label><input type="checkbox" name="style" value="lighthearted"> Lighthearted</label><br>
17-
</form>
18-
19-
<p>Enter your OpenAI API key:</p>
20-
<input type="text" id="apiKeyInput" placeholder="API Key">
21-
<p>Enter the delimiter for your signature:</p>
22-
<input type="text" id="signatureDelimiter" placeholder="--">
23-
<p></p>
24-
<button id="saveButton">Save API Key</button>
25-
<button id="reviewButton">Review Email</button>
26-
<script src="popup.js"></script>
27-
28-
<p><a href="https://github.com/sponsors/bencgreenberg" target="_blank">Support this work by sponsoring me on GitHub</a></p>
29-
</body>
3+
<head>
4+
<link rel="stylesheet" href="styles.css">
5+
</head>
6+
<body>
7+
<h1>ChatGPT Email Reviewer</h1>
8+
<div class="settings-section">
9+
<p>Enter your OpenAI API key:</p>
10+
<input type="password" id="apiKeyInput" placeholder="API Key" readonly>
11+
<button id="editApiKeyButton">Edit</button>
12+
<p>Enter the delimiter for your signature:</p>
13+
<input type="text" id="signatureDelimiter" placeholder="--">
14+
<button id="saveButton">Save Settings</button>
15+
</div>
16+
<p>Select a writing style:</p>
17+
<form id="styleForm">
18+
<label><input type="checkbox" name="style" value="friendly"> Friendly</label><br>
19+
<label><input type="checkbox" name="style" value="business"> Business</label><br>
20+
<label><input type="checkbox" name="style" value="authoritative"> Authoritative</label><br>
21+
<label><input type="checkbox" name="style" value="personal"> Personal</label><br>
22+
<label><input type="checkbox" name="style" value="casual"> Casual</label><br>
23+
<label><input type="checkbox" name="style" value="serious"> Serious</label><br>
24+
<label><input type="checkbox" name="style" value="lighthearted"> Lighthearted</label><br>
25+
<br />
26+
</form>
27+
<button id="reviewButton" class="review-button">Review Email</button>
28+
<script src="popup.js"></script>
29+
<p><a href="https://github.com/sponsors/bencgreenberg" target="_blank">Support this work by sponsoring me on GitHub</a></p>
30+
</body>
3031
</html>

‎popup.js‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
1-
document.getElementById("saveButton").addEventListener("click", () => {
2-
const apiKey = document.getElementById("apiKeyInput").value;
3-
const signatureDelimiter = document.getElementById("signatureDelimiter").value;
1+
const apiKeyInput = document.getElementById('apiKeyInput');
2+
const signatureDelimiterInput = document.getElementById('signatureDelimiter');
3+
const editApiKeyButton = document.getElementById('editApiKeyButton');
4+
const saveButton = document.getElementById('saveButton');
5+
6+
saveButton.addEventListener("click", () => {
7+
const apiKey = apiKeyInput.value;
8+
const signatureDelimiter = signatureDelimiterInput.value;
49
chrome.storage.sync.set({ apiKey, signatureDelimiter }, () => {
510
alert("API key and signature delimiter saved.");
11+
apiKeyInput.readOnly = true;
12+
apiKeyInput.type = 'password';
613
});
714
});
815

@@ -15,10 +22,15 @@ document.getElementById("reviewButton").addEventListener("click", () => {
1522
});
1623

1724
chrome.storage.sync.get(["apiKey", "signatureDelimiter"], result => {
18-
if (result.apiKey) {
19-
document.getElementById("apiKeyInput").value = result.apiKey;
20-
}
25+
apiKeyInput.value = result.apiKey || '';
26+
2127
if (result.signatureDelimiter) {
22-
document.getElementById("signatureDelimiter").value = result.signatureDelimiter;
28+
signatureDelimiterInput.value = result.signatureDelimiter;
2329
}
24-
});
30+
});
31+
32+
editApiKeyButton.addEventListener('click', () => {
33+
apiKeyInput.readOnly = false;
34+
apiKeyInput.type = 'text';
35+
apiKeyInput.focus();
36+
});

‎styles.css‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
body {
22
font-family: Arial, sans-serif;
3-
width: 300px;
3+
padding: 15px;
4+
}
5+
6+
.settings-section {
7+
background-color: #f2f2f2;
48
padding: 10px;
9+
margin-bottom: 10px;
510
}
611

7-
button {
8-
margin-top: 10px;
12+
.review-button {
913
background-color: #4CAF50;
10-
border: none;
1114
color: white;
12-
padding: 5px 15px;
13-
text-align: center;
14-
text-decoration: none;
15-
display: inline-block;
16-
font-size: 14px;
15+
border: none;
16+
padding: 10px 15px;
1717
cursor: pointer;
18+
margin-top: 10px;
19+
font-weight: bold;
20+
}
21+
22+
.review-button:hover {
23+
background-color: #3f9a40;
1824
}

0 commit comments

Comments
 (0)