Created
November 24, 2019 07:27
-
-
Save RosemaryOrchard/f583ed3d603cba58cf9f73dbb56c0c48 to your computer and use it in GitHub Desktop.
A sample UI for a Media Endpoint
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| $myURL = 'URL_GOES_HERE'; | |
| $myLoginURL = 'URL_GOES_HERE'; | |
| function urlMatches($url1, $url2) | |
| { | |
| if ($url1 == $url2) return true; | |
| if ($url1 . '/' == $url2) return true; | |
| if ($url1 == $url2 . '/') return true; | |
| return false; | |
| } | |
| echo <<<HTML | |
| <html style="-webkit-touch-callout:none;" lang="en"> | |
| <head> | |
| <style>body{-webkit-text-size-adjust:none;}</style> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <meta name="description" content=""> | |
| <meta name="author" content="Rosemary Orchard"> | |
| <title>Sign in · Drafts Course</title> | |
| <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/sign-in/"> | |
| <!-- Bootstrap core CSS --> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> | |
| HTML; | |
| if (array_key_exists('code', $_GET) && array_key_exists('me', $_GET)) { | |
| //user entered URL to log in | |
| if ($_GET['me'] === $myLoginURL || $_GET['me'] === $myLoginURL.'/') { | |
| //verify token | |
| $postFields = [ | |
| 'code' => $_GET['code'], | |
| 'redirect_uri' => $myURL, | |
| 'client_id' => $myURL | |
| ]; | |
| $ch = curl_init(); | |
| curl_setopt($ch, CURLOPT_URL, "https://indieauth.com/auth"); | |
| curl_setopt($ch, CURLOPT_HTTPHEADER, array('Accept: application/json')); | |
| curl_setopt($ch, CURLOPT_POST, count($postFields)); | |
| curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($postFields)); | |
| curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); | |
| $serverOutput = json_decode(curl_exec($ch), true); | |
| $httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE); | |
| curl_close($ch); | |
| // Further processing ... | |
| if ($httpcode == 200 && array_key_exists('me', $serverOutput) && urlMatches($serverOutput['me'], $_GET['me'])) { | |
| echo <<<HTML | |
| <style> | |
| .bd-placeholder-img { | |
| font-size: 1.125rem; | |
| text-anchor: middle; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| @media (min-width: 768px) { | |
| .bd-placeholder-img-lg { | |
| font-size: 3.5rem; | |
| } | |
| } | |
| .jumbotron { | |
| padding-top: 3rem; | |
| padding-bottom: 3rem; | |
| margin-bottom: 0; | |
| background-color: #fff; | |
| } | |
| @media (min-width: 768px) { | |
| .jumbotron { | |
| padding-top: 6rem; | |
| padding-bottom: 6rem; | |
| } | |
| } | |
| .jumbotron p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .jumbotron-heading { | |
| font-weight: 300; | |
| } | |
| .jumbotron .container { | |
| max-width: 40rem; | |
| } | |
| footer { | |
| padding-top: 3rem; | |
| padding-bottom: 3rem; | |
| } | |
| footer p { | |
| margin-bottom: .25rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="navbar navbar-dark bg-dark shadow-sm"> | |
| <div class="container d-flex justify-content-between"> | |
| <a href="#" class="navbar-brand d-flex align-items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg> | |
| <strong>Media</strong> | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <main role="main"> | |
| <div class="album py-5 bg-light"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="card-deck"> | |
| HTML; | |
| $files = array_diff(scandir('.'), array('.', '..', 'index.php', 'media-endpoint.php')); | |
| usort($files, function($a, $b) { | |
| return filemtime($a) < filemtime($b); | |
| }); | |
| foreach ($files as $file) { | |
| $time = date('Y-m-d H:i', filemtime($file)); | |
| echo <<<HTML | |
| <div class="card" style="width: 18rem;"> | |
| <div class="card-body"> | |
| <h5 class="title">$file</h5> | |
| <p class="card-text"><small class="text-muted">$time</small></p> | |
| </div> | |
| <a href="$file"><img src="$file" class="card-img-top" style="max-width: 18rem; max-height: 18rem; object-fit: contain; overflow: hidden;"></a> | |
| </div> | |
| HTML; | |
| } | |
| echo <<<HTML | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="text-muted"> | |
| <div class="container"> | |
| <p class="float-right"> | |
| <a href="#">Back to top</a> | |
| </p> | |
| </div> | |
| </footer> | |
| HTML; | |
| } else { | |
| //urls don't match | |
| } | |
| } else { | |
| //not me | |
| } | |
| } else { | |
| //show log in | |
| echo <<<HTML | |
| <style> | |
| html, | |
| body { | |
| height: 100%; | |
| } | |
| body { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| padding-top: 40px; | |
| padding-bottom: 40px; | |
| background-color: #f5f5f5; | |
| } | |
| .form-signin { | |
| width: 100%; | |
| max-width: 330px; | |
| padding: 15px; | |
| margin: auto; | |
| } | |
| .form-signin .checkbox { | |
| font-weight: 400; | |
| } | |
| .form-signin .form-control { | |
| position: relative; | |
| box-sizing: border-box; | |
| height: auto; | |
| padding: 10px; | |
| font-size: 16px; | |
| } | |
| .form-signin .form-control:focus { | |
| z-index: 2; | |
| } | |
| .form-signin input[type="email"] { | |
| margin-bottom: -1px; | |
| border-bottom-right-radius: 0; | |
| border-bottom-left-radius: 0; | |
| } | |
| .form-signin input[type="password"] { | |
| margin-bottom: 10px; | |
| border-top-left-radius: 0; | |
| border-top-right-radius: 0; | |
| } | |
| .bd-placeholder-img { | |
| font-size: 1.125rem; | |
| text-anchor: middle; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| @media (min-width: 768px) { | |
| .bd-placeholder-img-lg { | |
| font-size: 3.5rem; | |
| } | |
| } | |
| </style> | |
| <!-- Custom styles for this template --> | |
| <link href="signin.css" rel="stylesheet"> | |
| </head> | |
| <body class="text-center"> | |
| <form class="form-signin" action="https://indieauth.com/auth" method="get"> | |
| <h1 class="h3 mb-3 font-weight-normal">Sign in</h1> | |
| <label for="inputEmail" class="sr-only">Email address</label> | |
| <input type="me" name="me" id="inputUrl" class="form-control" placeholder="https://..." required="" autofocus=""> | |
| <input type="hidden" name="client_id" value="$myURL" /> | |
| <input type="hidden" name="redirect_uri" value="$myURL" /> | |
| <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> | |
| </form> | |
| HTML; | |
| } | |
| echo <<<HTML | |
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> | |
| </body> | |
| </html> | |
| HTML; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment