Mercurial > prosody-modules

view mod_invites_page/html/client.html @ 4293:edde5905744a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
mod_s2s_keepalive: Don't send whitespace keepalives before s2sin stream is open Could possibly result in whitespace before the XML and stream header, which isn't allowed by the parser. Don't think s2sout is affected, as the stream is opened early and doesn't have to wait for the other end. Thanks Ge0rG
author Kim Alvefur <zash@zash.se>
date Thu, 10 Dec 2020 11:57:03 +0100
parents 36795f773faf
children 09b8144051ea
line wrap: on
line source

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Invite to {site_name}</title>
	<link rel="stylesheet" href="/share/bootstrap4/css/bootstrap.min.css">
	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
	<link rel="manifest" href="/site.webmanifest">
	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
	<meta name="msapplication-TileColor" content="#fbd308">
	<meta name="theme-color" content="#fbd308">
</head>
<body>
	<div id="background" class="fixed-top overflow-hidden"></div>
	<div id="form" class="container col-md-10 col-md-offset-1 col-sm-8 col-sm-offset-2 col-lg-10 col-lg-offset-1 mt-2 mt-md-5">
		<div class="card rounded-lg shadow">
			<h1 class="card-header rounded-lg rounded-lg">
				Join {site_name} with {app.name}<br/>
			</h1>
			<div class="card-body">
				<div id="qr-button-container" class="float-right w-25 border border-info p-3 d-none">
					<strong>Tip:</strong> You can open this invite
					on your mobile device by scanning a barcode with
					your camera.
					<button id="qr-modal-show" class="mt-2 d-block btn btn-secondary" title="Send this invite to your device"
						data-toggle="modal" data-target="#qr-modal">
							<img src="{static}/qr-logo.png" alt="QR code icon" class="align-middle h-50 mt-1" style="display:inline" >
							Scan with mobile device
					</button>
				</div>
			
				{inviter?<p>You have been invited to chat on {site_name} using XMPP,
				a secure and decentralized messaging network.</p>}

				{inviter&<p>You have been invited to chat with {inviter} on {site_name},
				part of the XMPP secure and decentralized messaging network.</p>}

				<p>You can start chatting right away with {app.name}. Let's get started!</p>

				<div class="card m-3 client-card {app.platforms#app-platform-{item|lower|classname} } flex-wrap col-sm-12 col-md-8 col-lg-5">
					<div class="row no-gutters h-100">
						<div class="col-md-4">
							<img src="{app.image|relurl}" class="p-2 img-fluid" alt="{app.imagetext?}">
						</div>
						<div class="col-md-8 h-100">
							<div class="card-body d-flex flex-column h-100">
								<h5 class="card-title text-nowrap mb-1">{app.name}</h5>
								<div>
									{app.platforms#<span class="badge badge-info client-platform-badge client-platform-badge-{item|lower|classname} mr-1 mb-3">{item}</span> }
								</div>
								<p class="card-text">{app.text}</p>
								<!-- <a href="{app.link}" class="btn btn-primary mt-md-auto">Install</a> -->
							</div>
						</div>
					</div>
				</div>

				<h3 style="clear:both">Step 1: Install {app.name}</h3>

				<p>{app.download.text?Download·and·install·{app.name}·below:}</p>

				<div class="ml-5">
					{app.download.buttons#
						{item.image&
							<a href="{item.url}" {item.target&target="{item.target}"} rel="noopener">
								<img src="{item.image}" {item.alttext&alt="{item.alttext}"}>
							</a>
						}
						{item.text&
							<a href="{item.url}" {item.target&target="{item.target}"} class="btn btn-primary" rel="noopener">
								{item.text}
							</a>
						}
					}
				</div>

				<p class="mt-3">After successfully installing {app.name}, come back to this page and <strong>continue with Step 2</strong>.</p>

				<h3>Step 2: Activate your account</h3>

				<p>Installed ok? Great! <strong>Click or tap the button below</strong> to accept your invite and continue with your account setup:</p>

				<div>
					<a href="{uri}" id="uri-cta" class="btn btn-primary ml-5 mt-1 mb-3">Accept invite using {app.name}</a><br/>
				</div>

				<p>After clicking the button you will be taken to {app.name} to finish setting up your new {site_name} account.</p>
			</div>
		</div>
	</div>

	<div class="modal" tabindex="-1" role="dialog" id="qr-modal">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Scan invite code</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<p>You can transfer this invite to your mobile device by scanning a code with your camera.</p>
					<div id="qr-info-url" class="tab-pane show active">
						<p>Use a <em>QR code</em> scanner on your mobile device to scan the code below:</p>
						<div id="qr-invite-page" class="w-50 p-1 mx-auto"></div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>

	<script src="/share/jquery/jquery.min.js"></script>
	<script src="/share/bootstrap4/js/bootstrap.min.js"></script>
	<script src="{static}/qrcode.min.js"></script>
	<script>
		$(function () {
			// If QR lib loaded ok, show QR button on desktop devices
			if(window.QRCode) {
				$('#qr-modal').one('show.bs.modal', function (e) {
					new QRCode(document.getElementById("qr-invite-page"), document.location.href);
				});
				$('#qr-button-container').addClass("d-md-block");
			}
		});
	</script>
</body>
</html>