api-console-assets
Version:
This repo only exists to publish api console components to npm
162 lines (144 loc) • 5.5 kB
HTML
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>authorization-panel demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../arc-demo-helpers/raml-demo-page.html">
<link rel="import" href="../../oauth-authorization/oauth2-authorization.html">
<link rel="import" href="../../oauth-authorization/oauth1-authorization.html">
<link rel="import" href="../../iron-meta/iron-meta.html">
<link rel="import" href="../authorization-panel.html">
<style is="custom-style">
:root {
--arc-font-common-base: {
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
};
--arc-font-subhead: {
@apply --arc-font-common-base;
font-weight: 400;
font-size: 16px;
line-height: 24px;
};
--empty-info: {
@apply --paper-font-body1;
color: rgba(0, 0, 0, 0.74);
font-size: 16px;
};
}
html,
body {
margin: 0;
padding: 0;
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
output {
white-space: pre-wrap;
word-break: break-all;
display: block;
margin: 12px 0;
}
#settings {
margin-top: 40px;
}
</style>
</head>
<body unresolved>
<template is="dom-bind" id="app">
<iron-meta key="auth-methods" value='[null, "digest", "oauth1", "oauth2"]'></iron-meta>
<raml-demo-page selected-object="{{selected}}" is-method="{{isMethod}}">
<paper-item data-url$="[[testRaml]]">Test case with RAML 1.0</paper-item>
<paper-item main-menu class="checkable-menu"><paper-item-body>No steps</paper-item-body><paper-checkbox checked="{{noSteps}}"></paper-checkbox></paper-item>
<h1>Authorization panel</h1>
<div main>
<authorization-panel no-steps="[[noSteps]]" redirect-url="[[redirectUrl]]" secured-by="[[selected.securedBy]]" on-selected-changed="_selectedChanged" auth-required="{{authRequired}}" auth-valid="{{authValid}}"></authorization-panel>
<oauth2-authorization></oauth2-authorization>
<oauth1-authorization></oauth1-authorization>
<template is="dom-if" if="[[authRequired]]">
<p>Authorization is <b>required</b> for this endpoint.</p>
</template>
<template is="dom-if" if="[[!authRequired]]">
<p>Authorization is <b>not required</b> for this endpoint.</p>
</template>
<template is="dom-if" if="[[authValid]]">
<p>Authorization is <b>valid</b> for given settings.</p>
</template>
<template is="dom-if" if="[[!authValid]]">
<p>Authorization is <b>not valid</b> for given settings.</p>
</template>
<output id="settings">[[settings]]</output>
<output id="state">[[state]]</output>
<fieldset>
<legend>Events based API</legend>
<paper-input label="Header name" value="{{headerName}}"></paper-input>
<paper-input label="Header value" value="{{headerValue}}"></paper-input>
<paper-button raised on-tap="sendHeaderEvent">Send event</paper-button>
</fieldset>
</div>
</template>
</raml-demo-page>
<script>
(function(app) {
app.redirectUrl = location.href.replace(/authorization-panel\/demo\/(raml\.html)?/,
'oauth-authorization/oauth-popup.html');
app.settings = '';
app.state = '';
app.headerName = 'authorization';
app.headerValue = '';
app._selectedChanged = function(e) {
if (e.detail.value === 'digest') {
app.fire('url-value-changed', {
value: 'https://api.domain.com/endpoint'
});
app.fire('http-method-changed', {
value: 'GET'
});
}
};
app.sendHeaderEvent = function() {
app.fire('request-header-changed', {
name: app.headerName,
value: app.headerValue
});
};
window.addEventListener('authorization-settings-changed', function(e) {
var data = e.detail;
if (!data.settings) {
app.settings = '';
} else {
var txt = 'Authorization type: ' + data.type + '\n\n';
txt += JSON.stringify(data.settings, null, 2);
app.settings = txt;
}
});
window.addEventListener('authorization-type-changed', function(e) {
var type = e.detail.type;
app.state = 'Selected authorization method: ' + type;
});
var path = location.pathname;
if (~path.indexOf('.html')) {
path = path.substr(0, path.lastIndexOf('/') + 1);
}
var ramlRoot = location.protocol + '//' + location.host + path;
app.testRaml = ramlRoot + 'test.raml';
})(document.querySelector('#app'));
</script>
</body>
</html>