bluesky-oauth-kit
Version:
A complete OAuth backend implementation for Bluesky
60 lines (56 loc) • 2.52 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width, height=device-height, viewport-fit=cover">
<title>{{title}}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.blue.min.css">
<style>
body {
padding: calc(env(safe-area-inset-top) + 30px) calc(env(safe-area-inset-right) + 20px) calc(env(safe-area-inset-bottom) + 30px) calc(env(safe-area-inset-left) + 20px);
text-align: center;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
padding-bottom: 50px;
}
header > a {
display: block;
margin-bottom: 5px;
}
@media (prefers-color-scheme: dark) {
svg path {
fill: #fff;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<a class="cp">
<svg preserveAspectRatio="none" viewBox="0 0 600 530" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z" fill="#208bfe"/>
</svg>
</a>
<br>
</header>
<div id="login">
<h1>Login</h1>
<article>
<form action="/oauth/login">
<input type="text" name="handle" placeholder="your-handle.bsky.social">
<button type="submit">Sign in with Bluesky</button>
</form>
</article>
</div>
</div>
</body>
</html>