Merge pull request #10 from mroxso/bootstrap

Bootstrap
This commit is contained in:
PascalR 2023-08-15 21:56:18 +02:00 committed by GitHub
commit 02da57961c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 222 additions and 176 deletions

View File

@ -1,18 +1,23 @@
name: Docker Build and Push name: Docker Build and Push
on: on:
workflow_dispatch:
push: push:
branches: branches:
- main - main
- master - master
env:
REGISTRY_NAME: ghcr.io
IMAGE_NAME: nostr-rs-relay
jobs: jobs:
ci: # ci:
name: CI # name: CI
uses: ./.github/workflows/ci.yml # uses: ./.github/workflows/ci.yml
build_and_push: build_and_push:
needs: [ci] # needs: [ci]
name: Build and Push name: Build and Push
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
@ -32,13 +37,29 @@ jobs:
username: ${{ github.repository_owner }} username: ${{ github.repository_owner }}
password: ${{ secrets.GITHUB_TOKEN }} password: ${{ secrets.GITHUB_TOKEN }}
- name: Build and push - name: Collecting Metadata
id: meta
uses: docker/metadata-action@v4
with:
images: ${{ env.REGISTRY_NAME }}/${{ github.repository_owner }}/${{ env.IMAGE_NAME }}
- name: Building And Pushing Image
id: docker_build id: docker_build
uses: docker/build-push-action@v4 uses: docker/build-push-action@v4
with: with:
context: . context: .
file: ./Dockerfile
push: true push: true
tags: ghcr.io/${{ github.repository_owner }}/nostr-rs-relay:latest tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}
# - name: Build and push
# id: docker_build
# uses: docker/build-push-action@v4
# with:
# context: .
# push: true
# tags: ghcr.io/${{ github.repository_owner }}/nostr-rs-relay:latest
- name: Image digest - name: Image digest
run: echo ${{ steps.docker_build.outputs.digest }} run: echo ${{ steps.docker_build.outputs.digest }}

View File

@ -266,73 +266,82 @@ async fn handle_web_request(
} }
let html = r#" let html = r#"
<!doctype HTML> <!DOCTYPE html>
<head> <html lang="en">
<meta charset="UTF-8">
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-family: Arial, sans-serif;
background-color: #6320a7;
color: white;
}
.container { <head>
display: flex; <meta charset="utf-8">
justify-content: center; <meta name="viewport" content="width=device-width, initial-scale=1">
align-items: center; <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
height: 400px; <style>
} body {
background-color: #6320a7 !important; /* Make sure this override takes precedence */
color: white;
}
a { a {
color: pink; color: pink !important;
} }
input[type="text"] { .btn-primary {
width: 100%; background-color: #ff4081 !important;
max-width: 500px; }
box-sizing: border-box; </style>
overflow-x: auto; <title>Join Nostr - Enter your pubkey</title>
white-space: nowrap; </head>
}
</style>
</head>
<body>
<div style="width:75%;">
<h1>Enter your pubkey</h1>
<form action="/invoice" onsubmit="return checkForm(this);">
<input type="text" name="pubkey" id="pubkey-input"><br><br>
<input type="checkbox" id="terms" required>
<label for="terms">I agree to the <a href="/terms">terms and conditions</a></label><br><br>
<button type="submit">Submit</button>
</form>
<button id="get-public-key-btn">Get Public Key</button>
</div>
<script>
function checkForm(form) {
if (!form.terms.checked) {
alert("Please agree to the terms and conditions");
return false;
}
return true;
}
const pubkeyInput = document.getElementById('pubkey-input'); <body>
const getPublicKeyBtn = document.getElementById('get-public-key-btn'); <div class="container py-5">
getPublicKeyBtn.addEventListener('click', async function() { <div class="row">
try { <div class="col-lg-6 mx-auto">
const publicKey = await window.nostr.getPublicKey(); <h1 class="text-center mb-4">Enter your pubkey</h1>
pubkeyInput.value = publicKey; <form action="/invoice" onsubmit="return checkForm(this);">
} catch (error) { <div class="form-group">
console.error(error); <input type="text" name="pubkey" class="form-control" id="pubkey-input" placeholder="Public Key" required>
} </div>
}); <div class="form-check">
</script> <input class="form-check-input" type="checkbox" id="terms" required>
</body> <label class="form-check-label" for="terms">I agree to the <a href="/terms">terms and conditions</a></label>
</html> </div>
<div class="form-group mt-4">
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
</form>
<div class="form-group">
<button id="get-public-key-btn" class="btn btn-primary btn-block">Get Public Key</button>
</div>
</div>
</div>
</div>
<script>
function checkForm(form) {
if (!form.terms.checked) {
alert("Please agree to the terms and conditions");
return false;
}
return true;
}
const pubkeyInput = document.getElementById('pubkey-input');
const getPublicKeyBtn = document.getElementById('get-public-key-btn');
getPublicKeyBtn.addEventListener('click', async function() {
try {
const publicKey = await window.nostr.getPublicKey();
pubkeyInput.value = publicKey;
} catch (error) {
console.error(error);
}
});
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
"#; "#;
Ok(Response::builder() Ok(Response::builder()
.status(StatusCode::OK) .status(StatusCode::OK)
@ -445,89 +454,94 @@ async fn handle_web_request(
let html_result = format!( let html_result = format!(
r#" r#"
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-family: Arial, sans-serif;
background-color: #6320a7 ;
color: white;
}}
#copy-button {{
background-color: #bb5f0d ;
color: white;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
}}
#copy-button:hover {{
background-color: #8f29f4;
}}
.container {{
display: flex;
justify-content: center;
align-items: center;
height: 400px;
}}
a {{
color: pink;
}}
</style>
</head>
<body>
<div style="width:75%;">
<h3>
To use this relay, an admission fee of {} sats is required. By paying the fee, you agree to the <a href='terms'>terms</a>.
</h3>
</div>
<div>
<div style="max-height: 300px;">
{}
</div>
</div>
<div>
<div style="width: 75%;">
<p style="overflow-wrap: break-word; width: 500px;">{}</p>
<button id="copy-button">Copy</button>
</div>
<div>
<p> This page will not refresh </p>
<p> Verify admission <a href=/account?pubkey={}>here</a> once you have paid</p>
</div>
</div>
</body>
</html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<style>
body {{
background-color: #6320a7;
color: white;
}}
<script> a {{
const copyButton = document.getElementById("copy-button"); color: pink;
if (navigator.clipboard) {{ }}
copyButton.addEventListener("click", function() {{
const textToCopy = "{}"; .btn {{
navigator.clipboard.writeText(textToCopy).then(function() {{ background-color: #bb5f0d;
console.log("Text copied to clipboard"); color: white;
}}, function(err) {{ }}
console.error("Could not copy text: ", err);
}}); .btn:hover {{
}}); background-color: #8f29f4;
}} else {{ }}
copyButton.style.display = "none";
console.warn("Clipboard API is not supported in this browser"); #copy-button {{
}} margin-top: 10px;
</script> }}
</style>
<title>Join Nostr - Invoice</title>
</head>
<body>
<div class="container py-5">
<div class="row">
<div class="col-lg-6 mx-auto">
<h3 class="text-center mb-4">
To use this relay, an admission fee of {} sats is required. By paying the fee, you agree to the <a href='terms'>terms</a>.
</h3>
<div class="text-center" style="max-height: 300px;">
{}
</div>
<div class="text-center mt-4">
<p id="text-area" style="overflow-wrap: break-word;">{}</p>
<button id="copy-button" class="btn">Copy</button>
</div>
<div class="text-center mt-4">
<p>This page will not refresh</p>
<p>Verify admission <a href="/account?pubkey={}">here</a> once you have paid</p>
</div>
</div>
</div>
</div>
<script>
const copyButton = document.getElementById("copy-button");
const textArea = document.getElementById("text-area");
if (navigator.clipboard) {{
copyButton.addEventListener("click", function() {{
const textToCopy = textArea.textContent;
navigator.clipboard.writeText(textToCopy).then(function() {{
console.log("Text copied to clipboard");
}}, function(err) {{
console.error("Could not copy text: ", err);
}});
}});
}} else {{
copyButton.style.display = "none";
console.warn("Clipboard API is not supported in this browser");
}}
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
"#, "#,
settings.pay_to_relay.admission_cost, settings.pay_to_relay.admission_cost,
qr_code, qr_code,
invoice_info.bolt11, invoice_info.bolt11,
pubkey, pubkey
invoice_info.bolt11
); );
Ok(Response::builder() Ok(Response::builder()
@ -582,30 +596,41 @@ async fn handle_web_request(
let html_result = format!( let html_result = format!(
r#" r#"
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-family: Arial, sans-serif;
background-color: #6320a7;
color: white;
height: 100vh;
}}
</style>
</head>
<body>
<div>
<h5>{} {} admitted</h5>
</div>
</body>
</html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<style>
body {{
background-color: #6320a7;
color: white;
}}
.vh-100 {{
height: 100vh;
}}
h5 {{
color: white;
}}
</style>
<title>Bootstrap Admissions</title>
</head>
<body>
<div class="d-flex justify-content-center align-items-center vh-100">
<h5 class="text-break">{ } { } admitted</h5>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
"#, "#,
pubkey, text pubkey, text