154 lines
7.3 KiB
HTML
154 lines
7.3 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en" ng-app="PWDLanding" ng-controller="LoginController">
|
|
<head>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-cookies.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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/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://zdnet2.cbsistatic.com/hub/i/r/2015/07/21/bb0de0fc-5d9c-47c3-96dd-42ed50858fdb/resize/370xauto/8999227b80cc063f94a76f2b628b0499/kubernetes-logo.png" />
|
|
<h1 class="display-3">Play with Kubernetes</h1>
|
|
<p class="lead">A simple, interactive and fun playground to learn Kuberentes</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 Kuberentes (PWK) is a project hacked by <a href="https://www.twitter.com/marcosnils">Marcos Lilljedahl</a> and <a href="https://www.twitter.com/xetorthio">Jonathan Leibiusky</a> and sponsored by Docker Inc.</p>
|
|
<p>PWK is a K8s 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>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footer">
|
|
<p>© Play with K8s 2017</p>
|
|
</footer>
|
|
|
|
</div>
|
|
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/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) {
|
|
console.log('ERROR', 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>
|
|
|