1.0.1 • Published 5 years ago
ui-login v1.0.1
ui-login
An user login web element
Dependencies
node 8.9.3-LTS
Usage
<!-- Load polyfills; note that "loader" will load these async -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
<!-- Load a custom element definition via HTMLImports -->
<link rel="import" href="/ui-login/element/index.html">
<!-- Use the custom element -->
<ui-login logo="image-url.png" action="url/action" password-reset="url/password-reset" csrf="secret"/>
<!-- Interact with the upgraded element -->
<script>
window.addEventListener('WebComponentsReady', function() {
// At this point we are guaranteed that all required polyfills have loaded,
// all HTML imports have loaded, and all defined custom elements have upgraded
let element = document.querySelector('ui-login');
console.assert(element instanceof UILoginViewController);
element.logo = 'http://some.image.com/url';
});
</script>
Customize styles:
ui-login {
--ui-login-font-family: [customize];
--ui-login-container-bg-color: [customize];
--ui-login-container-border-color: [customize];
--ui-login-input-border-color: [customize];
--ui-login-input-text-color: [customize];
--ui-login-input-bg-color: [customize];
--ui-login-button-bg-color: [customize];
--ui-login-button-hover-color: [customize];
--ui-login-button-text-color: [customize];
--ui-login-button-text-hover-color: [customize];
--ui-login-button-border-color: [customize];
--ui-login-button-border-hover-color: [customize];
--ui-login-text-color: [customize];
--ui-login-text-error-color: [customize];
--ui-login-link-color: [customize];
--ui-login-link-hover-color: [customize];
}
- In Firefox, due to lack of support for ShadyCSS, the CSS variables need to be assigned in the host document (where you use the ui-login element)
Tests:
$ npm install;
$ npm test; #Open browser and navigate to IP
1.0.1
5 years ago
1.0.0
5 years ago
0.4.3
6 years ago
0.4.2
6 years ago
0.4.1
6 years ago
0.4.0
6 years ago
0.3.0
6 years ago
0.2.2
6 years ago
0.2.1
6 years ago
0.2.0
6 years ago
0.1.20
6 years ago
0.1.19
6 years ago
0.1.18
6 years ago
0.1.17
6 years ago
0.1.16
6 years ago
0.1.15
6 years ago
0.1.14
6 years ago
0.1.13
6 years ago
0.1.12
6 years ago
0.1.11
6 years ago
0.1.10
6 years ago
0.1.9
6 years ago
0.1.8
6 years ago
0.1.7
6 years ago
0.1.6
6 years ago
0.1.5
6 years ago
0.1.4
6 years ago
0.1.3
6 years ago
0.1.2
6 years ago
0.1.1
6 years ago
0.1.0
6 years ago