117 lines
4.3 KiB
HTML
117 lines
4.3 KiB
HTML
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
|
<link rel="import" href="../../padlock.html">
|
|
<link rel="import" href="../view/view.html">
|
|
<link rel="import" href="../password-input/password-input.html">
|
|
<link rel="import" href="../toggle/toggle.html">
|
|
<link rel="import" href="../dialog/dialog.html">
|
|
<link rel="import" href="../slider/slider.html">
|
|
<link rel="import" href="../../styles/shared-styles.html">
|
|
<link rel="import" href="../view/view-styles.html">
|
|
<link rel="import" href="generator-view-styles.html">
|
|
|
|
<dom-module id="padlock-generator-view">
|
|
|
|
<template>
|
|
|
|
<style include="shared-styles"></style>
|
|
<style include="view-styles"></style>
|
|
<style include="generator-view-styles"></style>
|
|
|
|
<div class="tap-highlight">
|
|
<padlock-password-input value="{{ value }}" select-all-on-focus></padlock-password-input>
|
|
</div>
|
|
<padlock-toggle-button label="a-z" value="{{ includeLowerCase }}"></padlock-toggle-button>
|
|
<padlock-toggle-button label="A-Z" value="{{ includeUpperCase }}"></padlock-toggle-button>
|
|
<padlock-toggle-button label="0-9" value="{{ includeNumbers }}"></padlock-toggle-button>
|
|
<padlock-toggle-button label="?+-()/%&..." value="{{ includeOther }}"></padlock-toggle-button>
|
|
<padlock-slider min="5" max="50" value="{{ length }}"></padlock-slider>
|
|
<button on-tap="generate">Regenerate</button>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
/* global Polymer, padlock */
|
|
|
|
(function(Polymer, ViewBehavior, rand, platform) {
|
|
"use strict";
|
|
|
|
Polymer({
|
|
is: "padlock-generator-view",
|
|
behaviors: [ViewBehavior],
|
|
properties: {
|
|
value: {
|
|
type: String,
|
|
value: "",
|
|
notify: true
|
|
},
|
|
length: {
|
|
type: Number,
|
|
value: 10
|
|
},
|
|
includeLowerCase: {
|
|
type: Boolean,
|
|
value: true
|
|
},
|
|
includeUpperCase: {
|
|
type: Boolean,
|
|
value: true
|
|
},
|
|
includeNumbers: {
|
|
type: Boolean,
|
|
value: true
|
|
},
|
|
includeOther: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
field: {
|
|
type: Boolean,
|
|
observer: "_fieldChanged"
|
|
}
|
|
},
|
|
observers: [
|
|
"generate(length, includeLowerCase, includeUpperCase, includeNumbers, includeOther)"
|
|
],
|
|
ready: function() {
|
|
this._fieldChanged();
|
|
},
|
|
show: function() {
|
|
this.generate();
|
|
ViewBehavior.show.apply(this, arguments);
|
|
},
|
|
generate: function() {
|
|
var charSet = "";
|
|
this.includeLowerCase && (charSet += rand.chars.lower);
|
|
this.includeUpperCase && (charSet += rand.chars.upper);
|
|
this.includeNumbers && (charSet += rand.chars.numbers);
|
|
this.includeOther && (charSet += rand.chars.other);
|
|
|
|
this.value = charSet ? rand.randomString(this.length, charSet) : "";
|
|
},
|
|
leftHeaderButton: function() {
|
|
this.fire("back", {field: this.field});
|
|
},
|
|
rightHeaderButton: function() {
|
|
if (this.field) {
|
|
this.fire("back", {field: this.field, value: this.value});
|
|
} else {
|
|
this.copyToClipboard();
|
|
}
|
|
},
|
|
_fieldChanged: function() {
|
|
this.leftHeaderIcon = this.field ? "cancel" : "left";
|
|
this.rightHeaderIcon = this.field ? "check" : "copy";
|
|
this.headerTitle = this.field && this.field.name || "Generate";
|
|
},
|
|
copyToClipboard: function() {
|
|
platform.setClipboard(this.value);
|
|
this.fire("notify", {message: "Copied to clipboard!", type: "success", duration: 1500});
|
|
}
|
|
});
|
|
|
|
})(Polymer, padlock.ViewBehavior, padlock.rand, padlock.platform);
|
|
|
|
</script>
|
|
|
|
</dom-module>
|