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
on:
workflow_dispatch:
push:
branches:
- main
- master
env:
REGISTRY_NAME: ghcr.io
IMAGE_NAME: nostr-rs-relay
jobs:
ci:
name: CI
uses: ./.github/workflows/ci.yml
# ci:
# name: CI
# uses: ./.github/workflows/ci.yml
build_and_push:
needs: [ci]
# needs: [ci]
name: Build and Push
runs-on: ubuntu-latest
steps:
@ -32,13 +37,29 @@ jobs:
username: ${{ github.repository_owner }}
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
uses: docker/build-push-action@v4
with:
context: .
file: ./Dockerfile
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
run: echo ${{ steps.docker_build.outputs.digest }}

View File

@ -266,73 +266,82 @@ async fn handle_web_request(
}
let html = r#"
<!doctype HTML>
<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;
}
<!DOCTYPE html>
<html lang="en">
.container {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
}
<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 !important; /* Make sure this override takes precedence */
color: white;
}
a {
color: pink;
}
a {
color: pink !important;
}
input[type="text"] {
width: 100%;
max-width: 500px;
box-sizing: border-box;
overflow-x: auto;
white-space: nowrap;
}
</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;
}
.btn-primary {
background-color: #ff4081 !important;
}
</style>
<title>Join Nostr - Enter your pubkey</title>
</head>
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>
</body>
</html>
<body>
<div class="container py-5">
<div class="row">
<div class="col-lg-6 mx-auto">
<h1 class="text-center mb-4">Enter your pubkey</h1>
<form action="/invoice" onsubmit="return checkForm(this);">
<div class="form-group">
<input type="text" name="pubkey" class="form-control" id="pubkey-input" placeholder="Public Key" required>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="terms" required>
<label class="form-check-label" for="terms">I agree to the <a href="/terms">terms and conditions</a></label>
</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()
.status(StatusCode::OK)
@ -445,89 +454,94 @@ async fn handle_web_request(
let html_result = format!(
r#"
<!DOCTYPE html>
<html>
<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>
<!DOCTYPE html>
<html lang="en">
<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>
const copyButton = document.getElementById("copy-button");
if (navigator.clipboard) {{
copyButton.addEventListener("click", function() {{
const textToCopy = "{}";
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>
a {{
color: pink;
}}
.btn {{
background-color: #bb5f0d;
color: white;
}}
.btn:hover {{
background-color: #8f29f4;
}}
#copy-button {{
margin-top: 10px;
}}
</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,
qr_code,
invoice_info.bolt11,
pubkey,
invoice_info.bolt11
pubkey
);
Ok(Response::builder()
@ -582,30 +596,41 @@ async fn handle_web_request(
let html_result = format!(
r#"
<!DOCTYPE html>
<html>
<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>
<!DOCTYPE html>
<html lang="en">
<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