KEYCLOAK-10673 updated text-security to 2.0
This commit is contained in:
Erik Jan de Wit
Stian Thorgersen
parent
8c6f926ccb
commit
b19355dd76
23 changed files with 38 additions and 7129 deletions
|
|
@ -1,2 +1,2 @@
|
|||
parent=base
|
||||
styles=node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css node_modules/select2/select2.css css/styles.css lib/angular/treeview/css/angular.treeview.css node_modules/text-security/dist/text-security.css
|
||||
styles=node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css node_modules/select2/select2.css css/styles.css lib/angular/treeview/css/angular.treeview.css node_modules/text-security/text-security.css
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
demo.html
|
||||
.eslintrc*
|
||||
.vscode/
|
||||
.idea/
|
||||
|
|
@ -8,7 +8,8 @@ width="5px"> circle <img
|
|||
src="https://cdn.rawgit.com/noppa/text-security/master/assets/circle.svg"
|
||||
width="10px"> and square <img
|
||||
src="https://cdn.rawgit.com/noppa/text-security/master/assets/square.svg"
|
||||
width="10px">. For example, setting `font-family: "text-security-circle"` for
|
||||
width="10px">. For example, setting
|
||||
`font-family: "text-security-circle"` for
|
||||
an element should then display all the element's characters in a concealed
|
||||
way, like it was a password field.
|
||||
|
||||
|
|
@ -18,16 +19,22 @@ fact, the project was created for this exact purpose [as an answer to a
|
|||
StackOverflow
|
||||
question](https://stackoverflow.com/questions/36935576/how-to-make-input-type-tel-work-as-type-password/36950075#36950075).
|
||||
|
||||
## Version 2 Alpha
|
||||
You are looking at the branch for version 2, which is currently in alpha. Not everything works yet
|
||||
and things will break later. On the bright side, [issue #4](https://github.com/noppa/text-security/issues/4)
|
||||
is fixed in this branch.
|
||||
|
||||
## Installation
|
||||
```
|
||||
npm install text-security
|
||||
npm install text-security@alpha
|
||||
```
|
||||
|
||||
You can use the fonts by adding this repo as a dependency and including
|
||||
`dist/text-security.css` in your project, like so
|
||||
`text-security.css` in your project
|
||||
|
||||
`<link rel="stylesheet" type="text/css"
|
||||
href="node_modules/text-security/dist/text-security.css">`
|
||||
```html
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/text-security/text-security.css">
|
||||
```
|
||||
|
||||
## Building with custom modifications
|
||||
If you want to make your own tweaks, the `npm run build` command has two
|
||||
|
|
@ -45,8 +52,4 @@ followed by the name of the shape, like `text-security-disc`.
|
|||
|
||||
## Demo
|
||||
*demo.html* contains a proof-of-concept demo file, which you can just open in
|
||||
any browser. The same thing can also be found [as a
|
||||
fiddle](https://jsfiddle.net/449Lamue/6/). In development, you can also try
|
||||
out the library by just including the css using RawGit `<link
|
||||
rel="stylesheet" type="text/css"
|
||||
href="https://rawgit.com/noppa/text-security/master/dist/text-security.css">`
|
||||
any browser. The same thing can also be found [as a fiddle](https://jsfiddle.net/449Lamue/6/).
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
<?xml version="1.0"?>
|
||||
<svg viewBox="0 0 200 400" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="
|
||||
M 100, 200
|
||||
m -50, 0
|
||||
a 50,50 0 1,0 100,0
|
||||
a 50,50 0 1,0 -100,0
|
||||
|
||||
M 100, 200
|
||||
m 40, 0
|
||||
a 40,40 0 1,1 -80,0
|
||||
a 40,40 0 1,1 80,0
|
||||
"
|
||||
fill-rule="evenodd"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 346 B |
|
|
@ -1,5 +0,0 @@
|
|||
<?xml version="1.0"?>
|
||||
<svg viewBox="0 0 140 500" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="70" cy="250" r="55"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 148 B |
|
|
@ -1,5 +0,0 @@
|
|||
<?xml version="1.0"?>
|
||||
<svg viewBox="0 0 300 500" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="250" width="220" height="220"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 161 B |
Binary file not shown.
File diff suppressed because it is too large
Load diff
|
Before Width: | Height: | Size: 151 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load diff
|
Before Width: | Height: | Size: 224 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load diff
|
Before Width: | Height: | Size: 84 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -1,24 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'text-security-circle';
|
||||
src: url('text-security-circle.eot');
|
||||
src: url('text-security-circle.eot?#iefix') format('embedded-opentype'),
|
||||
url('text-security-circle.woff') format('woff'),
|
||||
url('text-security-circle.ttf') format('truetype'),
|
||||
url('text-security-circle.svg#text-security') format('svg');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'text-security-square';
|
||||
src: url('text-security-square.eot');
|
||||
src: url('text-security-square.eot?#iefix') format('embedded-opentype'),
|
||||
url('text-security-square.woff') format('woff'),
|
||||
url('text-security-square.ttf') format('truetype'),
|
||||
url('text-security-square.svg#text-security') format('svg');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'text-security-disc';
|
||||
src: url('text-security-disc.eot');
|
||||
src: url('text-security-disc.eot?#iefix') format('embedded-opentype'),
|
||||
url('text-security-disc.woff') format('woff'),
|
||||
url('text-security-disc.ttf') format('truetype'),
|
||||
url('text-security-disc.svg#text-security') format('svg');
|
||||
}
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
var
|
||||
icons2font = require('svgicons2svgfont'),
|
||||
fs = require('fs'),
|
||||
path = require('path'),
|
||||
svg2ttf = require('svg2ttf'),
|
||||
ttf2eot = require('ttf2eot'),
|
||||
ttf2woff = require('ttf2woff'),
|
||||
args = require('yargs').argv;
|
||||
/**
|
||||
* We need to loop through the unicode character list and pass them all for svgicons2svgfont.
|
||||
* If you want to reduce the file-sizes with the cost of worse character support, you can
|
||||
* specify --max={number} when building. This number will be the highest supported character
|
||||
* code. For example, building with `npm run build -- --max=126` would only support the Basic Latin unicode block.
|
||||
*
|
||||
* @todo Perhaps this could be better achieved by just defining the notdef glyph?
|
||||
* That would probably reduce the file sizes quite a bit, but I'm not quite sure how that would work with the
|
||||
* tff and woff versions.
|
||||
* @param {number=} [max=767]
|
||||
*/
|
||||
var MAX_VALUE = args.max || 767;
|
||||
/**
|
||||
* Comma-separated list of the supported shapes.
|
||||
* @param {string} [shapes='circle,square,disc']
|
||||
*/
|
||||
var SHAPES = args.shapes || 'circle,square,disc';
|
||||
|
||||
var styleTemplate = fs.readFileSync('style-template.css', 'utf-8'), stylesheet = '',
|
||||
characters = [];
|
||||
|
||||
for (var i = 0; i <= MAX_VALUE; i++){
|
||||
characters.push(String.fromCharCode(i));
|
||||
}
|
||||
|
||||
function bufferFrom(source) {
|
||||
return typeof Buffer.from === 'function' ? Buffer.from(source) : new Buffer(source);
|
||||
}
|
||||
|
||||
function logError(err) {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
var DIST_DIR = path.join(__dirname, 'dist');
|
||||
|
||||
if (!fs.existsSync(DIST_DIR)) {
|
||||
fs.mkdirSync(DIST_DIR);
|
||||
}
|
||||
|
||||
SHAPES.split(',').forEach(function (shape) {
|
||||
var
|
||||
fontName = 'text-security-' + shape,
|
||||
fontPath = path.join(DIST_DIR, fontName),
|
||||
fontStream = icons2font({
|
||||
fontName: fontName
|
||||
});
|
||||
|
||||
fontStream
|
||||
.pipe(fs.createWriteStream(fontPath + '.svg'))//Create the .svg font
|
||||
.on('finish', function () {
|
||||
//Create the other formats using the newly created font and Fontello's conversion libs
|
||||
|
||||
var ttf = svg2ttf(fs.readFileSync(fontPath + '.svg', 'utf-8'), {});
|
||||
fs.writeFileSync(fontPath + '.ttf', bufferFrom(ttf.buffer), 'utf-8');
|
||||
|
||||
// ttf2eot and ttf2woff expect a buffer, while svg2ttf seems to expect a string
|
||||
// this would be better read from the buffer, but will do for now
|
||||
var ttfFile = fs.readFileSync(fontPath + '.ttf');
|
||||
|
||||
var eot = ttf2eot(ttfFile, {});
|
||||
fs.writeFile(fontPath + '.eot', bufferFrom(eot.buffer), 'utf-8', logError);
|
||||
|
||||
var woff = ttf2woff(ttfFile, {});
|
||||
fs.writeFile(fontPath + '.woff', bufferFrom(woff.buffer), 'utf-8', logError);
|
||||
})
|
||||
.on('error', logError);
|
||||
|
||||
var glyph = fs.createReadStream(path.join(__dirname, 'assets', shape + '.svg'));
|
||||
glyph.metadata = {
|
||||
unicode: characters,
|
||||
name: shape
|
||||
};
|
||||
fontStream.write(glyph);
|
||||
fontStream.end();
|
||||
//Append the new shape to the generated stylesheet
|
||||
stylesheet += styleTemplate.replace(/\{\{shape}}/g, shape) + '\n';
|
||||
});
|
||||
|
||||
fs.writeFile(path.join(__dirname, 'dist', 'text-security.css'), stylesheet, logError);
|
||||
|
|
@ -1,27 +1,28 @@
|
|||
{
|
||||
"_from": "text-security@1.0.1",
|
||||
"_id": "text-security@1.0.1",
|
||||
"_from": "text-security@alpha",
|
||||
"_id": "text-security@2.0.0-alpha.2",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-Y5fStAKoEvLr6h2oz/nkSm+P3b5f3t+JAnNkycFJr15mz32XvrfBONjO+fNAnKaP5+YuD69tVNmlmKmfZu9ZGw==",
|
||||
"_integrity": "sha512-0eV+ULZUYnFqR0hslpYRlw4zjOxyd9TVPoAK0yKastxhpDtNll42Z+FfebPsM28aDBeAj9z7oIKI2imU/blLzg==",
|
||||
"_location": "/text-security",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "version",
|
||||
"type": "tag",
|
||||
"registry": true,
|
||||
"raw": "text-security@1.0.1",
|
||||
"raw": "text-security@alpha",
|
||||
"name": "text-security",
|
||||
"escapedName": "text-security",
|
||||
"rawSpec": "1.0.1",
|
||||
"rawSpec": "alpha",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "1.0.1"
|
||||
"fetchSpec": "alpha"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"#USER",
|
||||
"/"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/text-security/-/text-security-1.0.1.tgz",
|
||||
"_shasum": "9a04f42c322123b1f1fffa49d1d62c638fe72ba3",
|
||||
"_spec": "text-security@1.0.1",
|
||||
"_where": "/home/abstractj/github/keycloak/keycloak-server-pull-requests/themes/src/main/resources/theme/keycloak/common/resources",
|
||||
"_resolved": "https://registry.npmjs.org/text-security/-/text-security-2.0.0-alpha.2.tgz",
|
||||
"_shasum": "7774b254565d9f6ca88878d843a5fbcaa702a636",
|
||||
"_spec": "text-security@alpha",
|
||||
"_where": "/home/edewit/workspace/keycloak/keycloak/themes/src/main/resources/theme/keycloak/common/resources",
|
||||
"author": {
|
||||
"name": "Oskari Noppa"
|
||||
},
|
||||
|
|
@ -32,17 +33,21 @@
|
|||
"deprecated": false,
|
||||
"description": "Cross-browser alternative to -webkit-text-security",
|
||||
"devDependencies": {
|
||||
"svg2ttf": "4.0.0",
|
||||
"svgicons2svgfont": "5.0.0",
|
||||
"ttf2eot": "2.0.0",
|
||||
"ttf2woff": "2.0.1",
|
||||
"yargs": "4.6.0"
|
||||
"clean-css": "^4.2.1",
|
||||
"eslint": "^5.10.0",
|
||||
"svg2ttf": "^4.1.0",
|
||||
"svgson": "^3.0.0"
|
||||
},
|
||||
"files": [
|
||||
"text-security-disc.woff",
|
||||
"text-security.css"
|
||||
],
|
||||
"homepage": "https://github.com/noppa/text-security#readme",
|
||||
"keywords": [
|
||||
"-webkit-text-security",
|
||||
"conceal",
|
||||
"password"
|
||||
"password",
|
||||
"dots"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "index.js",
|
||||
|
|
@ -56,5 +61,5 @@
|
|||
"prebuild": "npm install",
|
||||
"test": ""
|
||||
},
|
||||
"version": "1.0.1"
|
||||
"version": "2.0.0-alpha.2"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'text-security-{{shape}}';
|
||||
src: url('text-security-{{shape}}.eot');
|
||||
src: url('text-security-{{shape}}.eot?#iefix') format('embedded-opentype'),
|
||||
url('text-security-{{shape}}.woff') format('woff'),
|
||||
url('text-security-{{shape}}.ttf') format('truetype'),
|
||||
url('text-security-{{shape}}.svg#text-security') format('svg');
|
||||
}
|
||||
|
|
@ -24,6 +24,6 @@
|
|||
"patternfly": "3.59.4",
|
||||
"rcue": "3.48.1",
|
||||
"select2": "3.5.1",
|
||||
"text-security": "1.0.1"
|
||||
"text-security": "2.0.0-alpha.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue