FE-47: Added tokenization functionality

app/bootstrap.js

@@ -13,5 +13,4 @@ angular.element(document).ready(function () {
         angular.bootstrap(document, ['app']);
     });
 
-    // angular.bootstrap(document, ['app']);
 });

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);

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
+                            | Токенизация

app/components/top-panel/top-panel.pug

@@ -7,19 +7,7 @@
                         span {{$ctrl.profileName}}&nbsp
                         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()") Закрыть

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']);

tokenization/tokenization.js

@@ -0,0 +1,44 @@
+const tokenizer = angular.module('tokenizer', []);
+
+tokenizer.component('tokenizer', {
+    template: `
+    <div class="row">
+        <div class="col-md-2"></div>
+        <div class="col-md-8">
+            <div class="x_panel tile">
+                <div class="x_content">
+                    <form>
+                        <div class="form-group">
+                            <label><h4>Ваш токен для инициализации платежной формы</h4></label>
+                            <textarea rows="15" type="text" class="form-control" ng-model="$ctrl.token"></textarea>
+                        </div>
+                        <button type="button" class="btn btn-primary" ng-click="$ctrl.back()">Назад</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>`,
+    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']);
+    });
+});

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")