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> <head>
body { <meta charset="utf-8">
display: flex; <meta name="viewport" content="width=device-width, initial-scale=1">
flex-direction: column; <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
align-items: center; <style>
text-align: center; body {
font-family: Arial, sans-serif; background-color: #6320a7 !important; /* Make sure this override takes precedence */
background-color: #6320a7; color: white;
color: white; }
}
a {
.container { color: pink !important;
display: flex; }
justify-content: center;
align-items: center; .btn-primary {
height: 400px; background-color: #ff4081 !important;
} }
</style>
a { <title>Join Nostr - Enter your pubkey</title>
color: pink; </head>
}
<body>
input[type="text"] { <div class="container py-5">
width: 100%; <div class="row">
max-width: 500px; <div class="col-lg-6 mx-auto">
box-sizing: border-box; <h1 class="text-center mb-4">Enter your pubkey</h1>
overflow-x: auto; <form action="/invoice" onsubmit="return checkForm(this);">
white-space: nowrap; <div class="form-group">
} <input type="text" name="pubkey" class="form-control" id="pubkey-input" placeholder="Public Key" required>
</style> </div>
</head> <div class="form-check">
<body> <input class="form-check-input" type="checkbox" id="terms" required>
<div style="width:75%;"> <label class="form-check-label" for="terms">I agree to the <a href="/terms">terms and conditions</a></label>
<h1>Enter your pubkey</h1> </div>
<form action="/invoice" onsubmit="return checkForm(this);"> <div class="form-group mt-4">
<input type="text" name="pubkey" id="pubkey-input"><br><br> <button type="submit" class="btn btn-primary btn-block">Submit</button>
<input type="checkbox" id="terms" required> </div>
<label for="terms">I agree to the <a href="/terms">terms and conditions</a></label><br><br> </form>
<button type="submit">Submit</button> <div class="form-group">
</form> <button id="get-public-key-btn" class="btn btn-primary btn-block">Get Public Key</button>
<button id="get-public-key-btn">Get Public Key</button> </div>
</div> </div>
<script> </div>
function checkForm(form) { </div>
if (!form.terms.checked) {
alert("Please agree to the terms and conditions"); <script>
return false; function checkForm(form) {
} if (!form.terms.checked) {
return true; alert("Please agree to the terms and conditions");
} return false;
}
const pubkeyInput = document.getElementById('pubkey-input'); return true;
const getPublicKeyBtn = document.getElementById('get-public-key-btn'); }
getPublicKeyBtn.addEventListener('click', async function() {
try { const pubkeyInput = document.getElementById('pubkey-input');
const publicKey = await window.nostr.getPublicKey(); const getPublicKeyBtn = document.getElementById('get-public-key-btn');
pubkeyInput.value = publicKey; getPublicKeyBtn.addEventListener('click', async function() {
} catch (error) { try {
console.error(error); const publicKey = await window.nostr.getPublicKey();
} pubkeyInput.value = publicKey;
}); } catch (error) {
</script> console.error(error);
</body> }
</html> });
</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"> <head>
<style> <meta charset="utf-8">
body {{ <meta name="viewport" content="width=device-width, initial-scale=1">
display: flex; <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
flex-direction: column; <style>
align-items: center; body {{
text-align: center; background-color: #6320a7;
font-family: Arial, sans-serif; color: white;
background-color: #6320a7 ; }}
color: white;
}} a {{
#copy-button {{ color: pink;
background-color: #bb5f0d ; }}
color: white;
padding: 10px 20px; .btn {{
border-radius: 5px; background-color: #bb5f0d;
border: none; color: white;
cursor: pointer; }}
}}
#copy-button:hover {{ .btn:hover {{
background-color: #8f29f4; background-color: #8f29f4;
}} }}
.container {{
display: flex; #copy-button {{
justify-content: center; margin-top: 10px;
align-items: center; }}
height: 400px; </style>
}} <title>Join Nostr - Invoice</title>
a {{ </head>
color: pink;
}} <body>
</style> <div class="container py-5">
</head> <div class="row">
<body> <div class="col-lg-6 mx-auto">
<div style="width:75%;"> <h3 class="text-center mb-4">
<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>.
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>
</h3>
</div> <div class="text-center" style="max-height: 300px;">
<div> {}
<div style="max-height: 300px;"> </div>
{}
</div> <div class="text-center mt-4">
</div> <p id="text-area" style="overflow-wrap: break-word;">{}</p>
<div> <button id="copy-button" class="btn">Copy</button>
<div style="width: 75%;"> </div>
<p style="overflow-wrap: break-word; width: 500px;">{}</p>
<button id="copy-button">Copy</button> <div class="text-center mt-4">
</div> <p>This page will not refresh</p>
<div> <p>Verify admission <a href="/account?pubkey={}">here</a> once you have paid</p>
<p> This page will not refresh </p> </div>
<p> Verify admission <a href=/account?pubkey={}>here</a> once you have paid</p> </div>
</div> </div>
</div> </div>
</body>
</html> <script>
const copyButton = document.getElementById("copy-button");
const textArea = document.getElementById("text-area");
<script> if (navigator.clipboard) {{
const copyButton = document.getElementById("copy-button"); copyButton.addEventListener("click", function() {{
if (navigator.clipboard) {{ const textToCopy = textArea.textContent;
copyButton.addEventListener("click", function() {{ navigator.clipboard.writeText(textToCopy).then(function() {{
const textToCopy = "{}"; console.log("Text copied to clipboard");
navigator.clipboard.writeText(textToCopy).then(function() {{ }}, function(err) {{
console.log("Text copied to clipboard"); console.error("Could not copy text: ", err);
}}, function(err) {{ }});
console.error("Could not copy text: ", err); }});
}}); }} else {{
}}); copyButton.style.display = "none";
}} else {{ console.warn("Clipboard API is not supported in this browser");
copyButton.style.display = "none"; }}
console.warn("Clipboard API is not supported in this browser"); </script>
}}
</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"> <head>
<style> <meta charset="utf-8">
body {{ <meta name="viewport" content="width=device-width, initial-scale=1">
display: flex; <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
flex-direction: column; <style>
align-items: center; body {{
text-align: center; background-color: #6320a7;
font-family: Arial, sans-serif; color: white;
background-color: #6320a7; }}
color: white;
height: 100vh; .vh-100 {{
}} height: 100vh;
</style> }}
</head>
<body> h5 {{
<div> color: white;
<h5>{} {} admitted</h5> }}
</div> </style>
</body> <title>Bootstrap Admissions</title>
</html> </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