232 lines
7.5 KiB
HTML
232 lines
7.5 KiB
HTML
<!doctype html>
|
|
<html lang="en" ng-app="PWDLanding" ng-controller="LoginController">
|
|
<head>
|
|
<script src="https://unpkg.com/angular@1.6.6/angular.min.js"></script>
|
|
<script src="https://unpkg.com/angular-cookies@1.6.6/angular-cookies.min.js"></script>
|
|
<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="" />
|
|
|
|
<title>Play with Kubernetes</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/bootstrap@4.0.0-beta/dist/css/bootstrap.min.css"
|
|
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
|
|
crossorigin="anonymous"
|
|
/>
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="/assets/landing.css" rel="stylesheet" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="header clearfix">
|
|
<nav>
|
|
<ul class="nav nav-pills float-right">
|
|
<li class="nav-item">
|
|
<a
|
|
class="nav-link"
|
|
href="https://github.com/play-with-docker/play-with-docker"
|
|
>Contribute</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="jumbotron" ng-cloak>
|
|
<img src="https://avatars.githubusercontent.com/u/13629408?v=4" />
|
|
<h1 class="display-3">Play with Kubernetes</h1>
|
|
<p class="lead">
|
|
A simple, interactive and fun playground to learn Kubernetes
|
|
</p>
|
|
<div ng-hide="loggedIn" class="btn-group" role="group">
|
|
<button
|
|
id="btnGroupDrop1"
|
|
type="button"
|
|
class="btn btn-primary dropdown-toggle"
|
|
data-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
Login
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
|
<a
|
|
ng-repeat="provider in providers"
|
|
class="dropdown-item"
|
|
ng-click="login(provider)"
|
|
>{{provider}}</a
|
|
>
|
|
</div>
|
|
</div>
|
|
<form id="landingForm" method="POST" action="/">
|
|
<p ng-show="loggedIn">
|
|
<a
|
|
class="btn btn-lg btn-success"
|
|
href="#"
|
|
ng-click="start()"
|
|
role="button"
|
|
>Start</a
|
|
>
|
|
</p>
|
|
<input id="stack" type="hidden" name="stack" value="" />
|
|
<input id="stack_name" type="hidden" name="stack_name" value="" />
|
|
<input id="image_name" type="hidden" name="image_name" value="" />
|
|
</form>
|
|
</div>
|
|
|
|
<div class="row marketing">
|
|
<div class="col-lg-12">
|
|
<p>
|
|
Play with Kubernetes is a labs site provided by
|
|
<a href="https://docker.com">Docker</a> and created by Tutorius.
|
|
Play with Kubernetes is a playground which allows users to run K8s
|
|
clusters in a matter of seconds. It gives the experience of having a
|
|
free Alpine Linux Virtual Machine in browser. Under the hood
|
|
Docker-in-Docker (DinD) is used to give the effect of multiple
|
|
VMs/PCs.
|
|
</p>
|
|
<p>
|
|
If you want to learn more about Kubernetes, consider the
|
|
<a href="https://training.play-with-kubernetes.com/"
|
|
>Play with Kubernetes Classroom</a
|
|
>
|
|
which provides more directed learning using an integrated Play with
|
|
Kubernetes commandline.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footer">
|
|
<p>© Play with Kubernetes 2017 - 2023</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script
|
|
crossorigin="anonymous"
|
|
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
|
|
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script
|
|
crossorigin="anonymous"
|
|
src="https://unpkg.com/popper.js@1.11.0/dist/umd/popper.min.js"
|
|
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script
|
|
crossorigin="anonymous"
|
|
src="https://unpkg.com/bootstrap@4.0.0-beta/dist/js/bootstrap.min.js"
|
|
integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script>
|
|
angular.module("PWDLanding", []).controller("LoginController", [
|
|
"$scope",
|
|
"$http",
|
|
"$window",
|
|
function ($scope, $http, $window) {
|
|
$scope.providers = [];
|
|
$scope.loggedIn = false;
|
|
$scope.user = null;
|
|
|
|
function checkLoggedIn() {
|
|
$http({
|
|
method: "GET",
|
|
url: "/users/me",
|
|
}).then(
|
|
function (response) {
|
|
$scope.user = response.data;
|
|
$scope.loggedIn = true;
|
|
},
|
|
function (response) {
|
|
$scope.user = null;
|
|
$scope.loggedIn = false;
|
|
},
|
|
);
|
|
}
|
|
|
|
checkLoggedIn();
|
|
|
|
$http({
|
|
method: "GET",
|
|
url: "/oauth/providers",
|
|
}).then(
|
|
function (response) {
|
|
$scope.providers = response.data;
|
|
if ($scope.providers.length == 0) {
|
|
$scope.loggedIn = true;
|
|
}
|
|
},
|
|
function (response) {
|
|
console.log("ERROR", response);
|
|
},
|
|
);
|
|
|
|
$scope.login = function (provider) {
|
|
var width = screen.width * 0.6;
|
|
// fixed height as the login window is not responsive
|
|
var height = 620;
|
|
var x = screen.width / 2 - width / 2;
|
|
var y = screen.height / 2 - height / 2;
|
|
$window.open(
|
|
"/oauth/providers/" + provider + "/login",
|
|
"PWDLogin",
|
|
"width=" + width + ",height=" + height + ",left=" + x + ",top=" + y,
|
|
);
|
|
var eventMethod = window.addEventListener
|
|
? "addEventListener"
|
|
: "attachEvent";
|
|
var eventer = window[eventMethod];
|
|
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
|
|
// Listen to message from child window
|
|
eventer(
|
|
messageEvent,
|
|
function (e) {
|
|
if (e.data === "done") {
|
|
checkLoggedIn();
|
|
}
|
|
},
|
|
false,
|
|
);
|
|
};
|
|
|
|
$scope.start = function () {
|
|
function getParameterByName(name, url) {
|
|
if (!url) url = window.location.href;
|
|
name = name.replace(/[\[\]]/g, "\\$&");
|
|
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
|
|
results = regex.exec(url);
|
|
if (!results) return null;
|
|
if (!results[2]) return "";
|
|
return decodeURIComponent(results[2].replace(/\+/g, " "));
|
|
}
|
|
|
|
var stack = getParameterByName("stack");
|
|
if (stack) {
|
|
document.getElementById("stack").value = stack;
|
|
}
|
|
var stackName = getParameterByName("stack_name");
|
|
if (stackName) {
|
|
document.getElementById("stack_name").value = stackName;
|
|
}
|
|
var imageName = getParameterByName("image_name");
|
|
if (imageName) {
|
|
document.getElementById("image_name").value = imageName;
|
|
}
|
|
document.getElementById("landingForm").submit();
|
|
};
|
|
},
|
|
]);
|
|
</script>
|
|
</body>
|
|
</html>
|