From bb30f395bdf757fbff420881ac30568ac319f4bf Mon Sep 17 00:00:00 2001 From: Ildar Galeev Date: Sat, 1 Oct 2016 14:01:25 +0300 Subject: [PATCH] FE-47: Added tokenization functionality --- app/bootstrap.js | 1 - app/components/sidebar/sidebar.js | 8 ++--- app/components/sidebar/sidebar.pug | 4 +++ app/components/top-panel/top-panel.pug | 12 ------- gulpfile.js | 27 +++++++++++++++- tokenization/tokenization.js | 44 ++++++++++++++++++++++++++ tokenization/tokenization.pug | 12 +++++++ 7 files changed, 90 insertions(+), 18 deletions(-) create mode 100644 tokenization/tokenization.js create mode 100644 tokenization/tokenization.pug diff --git a/app/bootstrap.js b/app/bootstrap.js index a9caaf4..f142baa 100644 --- a/app/bootstrap.js +++ b/app/bootstrap.js @@ -13,5 +13,4 @@ angular.element(document).ready(function () { angular.bootstrap(document, ['app']); }); - // angular.bootstrap(document, ['app']); }); diff --git a/app/components/sidebar/sidebar.js b/app/components/sidebar/sidebar.js index 0163f2b..03e6765 100644 --- a/app/components/sidebar/sidebar.js +++ b/app/components/sidebar/sidebar.js @@ -2,10 +2,10 @@ const sidebar = angular.module('sidebar', []); sidebar.component('sidebar', { templateUrl: 'components/sidebar/sidebar.html', - controller: function ($location) { - this.$routerOnActivate = () => { - const path = $location.path(); - console.log(path); + controller: function ($window, $location) { + + this.getToken = () => { + $window.location.href = '/tokenization.html'; }; this.isActive = location => _.includes($location.path(), location); diff --git a/app/components/sidebar/sidebar.pug b/app/components/sidebar/sidebar.pug index b5c3cd6..a992615 100644 --- a/app/components/sidebar/sidebar.pug +++ b/app/components/sidebar/sidebar.pug @@ -15,3 +15,7 @@ a(ng-link="['\Shops\']") i.fa.fa-shopping-cart | Мои магазины + li(ng-class="{active: $ctrl.isActive('/tokenization')}") + a(ng-click="$ctrl.getToken()") + i.fa.fa-key + | Токенизация diff --git a/app/components/top-panel/top-panel.pug b/app/components/top-panel/top-panel.pug index 22b0103..5bdf3cf 100644 --- a/app/components/top-panel/top-panel.pug +++ b/app/components/top-panel/top-panel.pug @@ -7,19 +7,7 @@ span {{$ctrl.profileName}}  span.fa.fa-angle-down ul.dropdown-menu.dropdown-usermenu.pull-right - li(data-toggle="modal" data-target=".bs-example-modal-lg") - a(href="") - i.fa.fa-key.pull-right - | Показать токен li(ng-click="$ctrl.logout()") a(href="") i.fa.fa-sign-out.pull-right | Выйти - - .modal.fade.bs-example-modal-lg - .modal-dialog.modal-lg - .modal-content - .modal-body - textarea.form-control(rows="15") {{$ctrl.token}} - .modal-footer - button.btn.btn-success(data-dismiss="modal" ng-click="$ctrl.copyToken()") Закрыть diff --git a/gulpfile.js b/gulpfile.js index 5a53cec..dbc6e76 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -42,6 +42,20 @@ gulp.task('sources', () => { .pipe(livereload()); }); +gulp.task('tokenizationSources', () => { + return gulp.src([ + 'tokenization/tokenization.js' + ]) + .pipe(babel({ + presets: ['es2015'] + })) + .pipe(header('/* Build time: ${datetime} */ \n', { + datetime: new Date() + })) + .pipe(gulp.dest('dist')) + .pipe(livereload()); +}); + gulp.task('styles', () => { return gulp.src('app/assets/styles.less') .pipe(less()) @@ -90,6 +104,15 @@ gulp.task('index', () => { .pipe(livereload()); }); +gulp.task('tokenization', () => { + return gulp.src('tokenization/tokenization.pug') + .pipe(pug({ + pretty: true + })) + .pipe(gulp.dest('dist')) + .pipe(livereload()); +}); + gulp.task('keycloak', () => { return gulp.src('app/keycloak.json') .pipe(gulp.dest('dist')); @@ -108,7 +131,9 @@ gulp.task('connect', () => { gulp.task('watch', () => { livereload.listen(); gulp.watch(['app/**/*.js', 'app/**/*.pug'], ['sources']); + gulp.watch('tokenization/tokenization.js', ['tokenizationSources']); gulp.watch('app/index.pug', ['index']); + gulp.watch('tokenization/tokenization.pug', ['tokenization']); gulp.watch('app/assets/**/*.less', ['styles']); }); @@ -124,5 +149,5 @@ gulp.task('capiMock', () => { }); }); -gulp.task('build', ['index', 'sources', 'styles', 'vendorScripts', 'vendorStyles', 'keycloak']); +gulp.task('build', ['index', 'tokenization', 'sources', 'tokenizationSources', 'styles', 'vendorScripts', 'vendorStyles', 'keycloak']); gulp.task('default', ['connect', 'watch', 'build']); diff --git a/tokenization/tokenization.js b/tokenization/tokenization.js new file mode 100644 index 0000000..1715cd0 --- /dev/null +++ b/tokenization/tokenization.js @@ -0,0 +1,44 @@ +const tokenizer = angular.module('tokenizer', []); + +tokenizer.component('tokenizer', { + template: ` +
+
+
+
+
+
+
+ + +
+ +
+
+
+
+
`, + controller: function ($window, Tokenizer) { + this.token = Tokenizer.auth.token; + this.back = () => { + $window.location.href = '/'; + }; + } +}); + +angular.element(document).ready(function () { + const keycloak = new Keycloak({ + url: 'http://localhost:31245/auth', + realmAccess: 'offline_access', + realm: 'external', + clientId: 'tokenizer' + }); + keycloak.init({onLoad: 'login-required'}).success(function () { + tokenizer.factory('Tokenizer', function () { + return { + auth: keycloak, + }; + }); + angular.bootstrap(document, ['tokenizer']); + }); +}); diff --git a/tokenization/tokenization.pug b/tokenization/tokenization.pug new file mode 100644 index 0000000..03924d7 --- /dev/null +++ b/tokenization/tokenization.pug @@ -0,0 +1,12 @@ +doctype html +html(lang="en") + head + meta(charset="utf-8") + base(href="/") + title Private Office + link(href="vendor.min.css" rel="stylesheet") + link(href="styles.css" rel="stylesheet") + body.nav-md + tokenizer + script(src="vendor.min.js") + script(src="tokenization.js")