Skip to content

Commit d994355

Browse files
developeranazdeveloperanaz
authored
Merge pull request #2 from developeranaz/admin-lite-mode-unencrypted
Create Lite-mode.html
2 parents 1d911e6 + 24a6b1e commit d994355

File tree

2 files changed

+137
-0
lines changed

2 files changed

+137
-0
lines changed

‎Admin/Unencrypted/Lite-mode.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>URL Shortener</title>
6+
</head>
7+
<body>
8+
<h1>URL Shortener</h1>
9+
<label for="uniqueid">Unique ID:</label>
10+
<input type="text" id="uniqueid" name="uniqueid">
11+
<br>
12+
<label for="url">URL:</label>
13+
<input type="text" id="url" name="url">
14+
<br>
15+
<button id="shorten-btn">Shorten</button>
16+
<p id="status"></p>
17+
<script>
18+
const GIST_ID = '1xxx1x1x1x1x1x1x1x1';
19+
const FILE_NAME = 'your-gist-filename.txt';
20+
const GITHUB_TOKEN = 'ghp_XxXxxXXXxXX7XCcCK';
21+
22+
const uniqueidInput = document.getElementById('uniqueid');
23+
const urlInput = document.getElementById('url');
24+
const shortenBtn = document.getElementById('shorten-btn');
25+
const statusMsg = document.getElementById('status');
26+
27+
shortenBtn.addEventListener('click', () => {
28+
const uniqueid = uniqueidInput.value;
29+
const url = urlInput.value;
30+
31+
fetch(`https://api.github.com/gists/${GIST_ID}`, {
32+
headers: {
33+
'Authorization': `Bearer ${GITHUB_TOKEN}`,
34+
},
35+
})
36+
.then(res => res.json())
37+
.then(gist => {
38+
const fileContent = gist.files[FILE_NAME].content;
39+
40+
const newLine = `${uniqueid} ${url}\n`;
41+
const updatedContent = fileContent + newLine;
42+
43+
return fetch(`https://api.github.com/gists/${GIST_ID}`, {
44+
method: 'PATCH',
45+
headers: {
46+
'Authorization': `Bearer ${GITHUB_TOKEN}`,
47+
'Content-Type': 'application/json',
48+
},
49+
body: JSON.stringify({
50+
files: {
51+
[FILE_NAME]: {
52+
content: updatedContent,
53+
},
54+
},
55+
}),
56+
});
57+
})
58+
.then(res => {
59+
if (res.ok) {
60+
statusMsg.textContent = 'URL shortened successfully!';
61+
uniqueidInput.value = '';
62+
urlInput.value = '';
63+
} else {
64+
statusMsg.textContent = 'Error shortening URL.';
65+
}
66+
})
67+
.catch(err => {
68+
console.error(err);
69+
statusMsg.textContent = 'Error shortening URL.';
70+
});
71+
});
72+
</script>
73+
</body>
74+
</html>

‎Admin/Unencrypted/Readme.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
2+
# ⚠️Caution⚠️
3+
This HTML file is only intended to be used on the localhost or by opening it locally via a web browser. Serving this webpage publicly is not recommended as it can lead to the exposure of both the HTML and your access tokens.
4+
# Cloudflare URL Shortener Admin Panel
5+
6+
This is a simple admin panel for Cloudflare's URL shortener service. The panel allows you to manage shortened URLs through a user-friendly interface.
7+
8+
## How to use
9+
10+
To use the admin panel, follow these steps:
11+
12+
1. Download the HTML file to your local directory or copy the contents and paste them into your code editor. Save the file with the `.html` extension.
13+
14+
2. In the HTML file, update the following values to match your own setup:
15+
16+
```
17+
const GIST_ID = '1xxx1x1x1x1x1x1x1x1';
18+
const FILE_NAME = 'your-gist-filename.txt';
19+
const GITHUB_TOKEN = 'ghp_XxXxxXXXxXX7XCcCK';
20+
```
21+
22+
`GIST_ID`: The ID of your Gist file where the short URLs are stored
23+
24+
`FILE_NAME`: The name of the file within the Gist where the short URLs are stored
25+
26+
`GITHUB_TOKEN`: A personal access token with the necessary permissions to access your Gist file
27+
28+
Once you have updated the values, you can open the HTML file in your web browser to access the admin panel.
29+
30+
31+
## Creating a Gist Link
32+
33+
To create a Gist link, follow these steps:
34+
35+
1. Create a GitHub account if you don't already have one.
36+
2. Go to gist.github.com in your web browser.
37+
3. Click the "New gist" button in the top-right corner of the page.
38+
4. In the "Filename" field, enter a unique filename for your Gist.
39+
5. In the "Add file" field, enter any text you like on the first line.
40+
6. Click the "Create public gist" button at the bottom of the page.
41+
7. Once the Gist is created, copy the URL of the page and save it for later.
42+
8. In your HTML file, replace the file name, Gist ID, and URL as needed.
43+
44+
for example The link https://gist.github.com/developeranaz/919999999999999999055346c contains the unique ID 919999999999999999055346c
45+
46+
47+
![Demo](https://raw.githubusercontent.com/developeranaz/Serverless-URL-Shortner/main/admin-lite-mode-unencrypted/Admin/Unencrypted/1.png)
48+
49+
50+
51+
## Obtaining a GitHub Token with Only Gist Access
52+
53+
To obtain a GitHub token with only Gist access, follow these steps:
54+
55+
1. Log in to your GitHub account.
56+
2. Go to the "Settings" page for your account.
57+
3. Click the "Developer settings" link in the sidebar.
58+
4. Click the "Personal access tokens" link in the sidebar.
59+
5. Click the "Generate new token" button.
60+
6. In the "Note" field, enter a description for the token (e.g., "Gist access token").
61+
7. Under "Select scopes", click the checkbox next to "gist".
62+
8. Click the "Generate token" button at the bottom of the page.
63+
9. Copy the token that is displayed on the screen and use it as needed in your code.

0 commit comments

Comments
 (0)