Flash Vue Component added

packages/Webkul/Admin/package.json

@@ -1,20 +1,23 @@
 {
-    "private": true,
+  "private": true,
-    "scripts": {
+  "scripts": {
-        "dev": "npm run development",
+    "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch-poll": "npm run watch -- --watch-poll",
+    "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "prod": "npm run production",
+    "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
-    },
+  },
-    "devDependencies": {
+  "devDependencies": {
-        "axios": "^0.18",
+    "axios": "^0.18",
-        "cross-env": "^5.1.4",
+    "cross-env": "^5.1.4",
-        "laravel-mix": "^2.1",
+    "laravel-mix": "^2.1",
-        "laravel-mix-merge-manifest": "^0.1.1",
+    "laravel-mix-merge-manifest": "^0.1.1",
-        "jquery": "^3.2",
+    "jquery": "^3.2",
-        "vue": "^2.1.10"
+    "vue": "^2.1.10"
-    }
+  },
-}
+  "dependencies": {
+    "vee-validate": "^2.1.0-beta.3"
+  }
+}

packages/Webkul/Admin/src/Http/routes.php

@@ -22,6 +22,11 @@ Route::group(['middleware' => ['web']], function () {
                 'view' => 'admin::users.index'
             ])->name('admin.users.index');
 
+            Route::get('/account', 'Webkul\User\Http\Controllers\AccountController@edit')->defaults('_config', [
+                'view' => 'admin::account.edit'
+            ])->name('admin.account.edit');
+        
+            Route::put('/account', 'Webkul\User\Http\Controllers\AccountController@update')->name('admin.account.update');
 
             Route::get('/permissions', 'Webkul\User\Http\Controllers\PermissionController@index')->defaults('_config', [
                 'view' => 'admin::permissions.index'

packages/Webkul/Admin/src/Providers/AdminServiceProvider.php

@@ -50,13 +50,16 @@ class AdminServiceProvider extends ServiceProvider
         Event::listen('admin.menu.build', function($menu) {
             $menu->add('dashboard', 'Dashboard', route('admin.dashboard.index'), 1, 'icon-dashboard');
 
-            $menu->add('configuration', 'Configure', route('admin.users.index'), 6, 'icon-configuration');
+            $menu->add('configuration', 'Configure', route('admin.account.edit'), 6, 'icon-configuration');
+
+            $menu->add('configuration.account', 'My Account', route('admin.account.edit'), 1, '');
 
             $menu->add('settings', 'Settings', '', 6, 'icon-settings');
 
             $menu->add('settings.users', 'Users', route('admin.users.index'), 1, '');
 
             $menu->add('settings.roles', 'Roles', route('admin.permissions.index'), 2, '');
+
         });
     }
 
@@ -73,21 +76,21 @@ class AdminServiceProvider extends ServiceProvider
         });
 
         view()->composer('admin::layouts.nav-aside', function($view) {
-            $menu = current(Event::fire('admin.menu.create'));
+            $parentMenu = current(Event::fire('admin.menu.create'));
-
+            $menu = [];
-            foreach ($menu->items as $item) {
+            foreach ($parentMenu->items as $item) {
-                $currentKey = current(explode('.', $menu->currentKey));
+                $currentKey = current(explode('.', $parentMenu->currentKey));
                 if($item['key'] != $currentKey)
                     continue;
 
                 $menu = [
-                    'items' => $menu->sortItems($item['children']),
+                    'items' => $parentMenu->sortItems($item['children']),
-                    'current' => $menu->current,
+                    'current' => $parentMenu->current,
-                    'currentKey' => $menu->currentKey
+                    'currentKey' => $parentMenu->currentKey
                 ];
-
-                $view->with('menu', $menu);
             }
+
+            $view->with('menu', $menu);
         });
     }
 

packages/Webkul/Admin/src/Resources/assets/js/app.js

@@ -0,0 +1,24 @@
+window.jQuery = window.$ = $ = require('jquery');
+window.Vue = require('vue');
+window.VeeValidate = require('vee-validate');
+
+Vue.use(VeeValidate);
+
+$(document).ready(function () {
+    const form = new Vue({
+        el: 'form',
+        
+        mounted: function() {
+            this.addServerErrors()
+        },
+
+        methods: {
+            addServerErrors: function() {
+                // this.errors.add('email', "Hello")
+                // for (var key in serverErrors) {
+                //     this.errors.add(key, serverErrors[key][0])
+                // }
+            }
+        }
+    });
+});

packages/Webkul/Admin/src/Resources/assets/sass/app.scss

@@ -13,30 +13,6 @@ body {
     font-weight: 500;
 }
 
-* {
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-*:focus {
-    outline: none;
-}
-
-a:link,
-a:hover,
-a:visited,
-a:focus,
-a:active {
-  text-decoration: none;
-}
-
-ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
 .navbar-top  {
     height: 60px;
     background: #FFFFFF;
@@ -168,7 +144,24 @@ ul {
     }
 
     .content {
-        padding: 15px;
+        padding: 25px;
-        padding-left: 295px;
+        padding-left: 305px;
+
+        .page-header {
+            display: block;
+
+            .page-title {
+                float: left;
+            }
+
+            .page-action {
+                float: right;
+            }
+        }
+
+        .page-content {
+            width: 100%;
+            display: inline-block;
+        }
     }
 }

packages/Webkul/Admin/src/Resources/views/account/edit.blade.php

@@ -0,0 +1,53 @@
+@extends('admin::layouts.master')
+
+@section('content')
+    @include ('admin::layouts.nav-aside')
+
+    <div class="content">
+        <form method="POST" action="">
+            <div class="page-header">
+                <div class="page-title">
+                    <h1>
+                        {{ __('My Account') }}
+                    </h1>
+                </div>
+
+                <div class="page-action">
+                    <button type="submit" class="btn btn-lg btn-primary">
+                        {{ __('Save') }}
+                    </button>
+                </div>
+            </div>
+
+            <div class="page-content">
+                
+                <div class="form-container">
+                    @csrf()
+                    <input name="_method" type="hidden" value="PUT">
+
+                    <div class="control-group" :class="[errors.first('name') ? 'has-error' : '']">
+                        <label for="">{{ __('Name') }}</label>
+                        <input type="text" v-validate="'required'" class="control" name="name" value="{{ $user->name }}"/>
+                        <span class="control-error" v-if="errors.first('name')">@{{ errors.first('name') }}</span>
+                    </div>
+
+                    <div class="control-group" :class="[errors.first('email') ? 'has-error' : '']">
+                        <label for="">{{ __('Email') }}</label>
+                        <input type="text" v-validate="'required|email'" class="control" name="email" value="{{ $user->email }}"/>
+                        <span class="control-error" v-if="errors.first('email')">@{{ errors.first('email') }}</span>
+                    </div>
+
+                    <div class="control-group">
+                        <label for="">{{ __('Password') }}</label>
+                        <input type="text" class="control" name="password"/>
+                    </div>
+
+                    <div class="control-group">
+                        <label for="">{{ __('Confirm Password') }}</label>
+                        <input type="text" class="control" name="confirm_password"/>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+@stop

packages/Webkul/Admin/src/Resources/views/layouts/master.blade.php

@@ -16,6 +16,12 @@
     </head>
     
     <body>
+        <div id="app">
+
+            <flash-wrapper ref='flashes'></flash-wrapper>
+
+        </div>
+        
         @include ('admin::layouts.nav-top')
 
         @include ('admin::layouts.nav-left')
@@ -26,8 +32,26 @@
 
         </div>
 
+        <script type="text/javascript" src="{{ asset('vendor/webkul/admin/assets/js/admin.js') }}"></script>
         <script type="text/javascript" src="{{ asset('vendor/webkul/ui/assets/js/ui.js') }}"></script>
 
+        <script type="text/javascript">
+            window.flashMessages= [];
+            @if($success = session('success'))
+                window.flashMessages = [{'type': 'alert-success', 'message': "{{ $success }}" }];
+            @elseif($warning = session('warning')))
+                window.flashMessages = [{'type': 'alert-warning', 'message': "{{ $warning }}" }];
+            @elseif($error = session('error')))
+                window.flashMessages = [{'type': 'alert-error', 'message': "{{ $error }}" }];
+            @endif
+
+            window.serverErrors = [];
+            @if (count($errors))
+                window.serverErrors = @json($errors->getMessages());
+            @endif
+        </script>
+
         @yield('javascript')
+
     </body>
 </html>

packages/Webkul/Admin/src/Resources/views/layouts/nav-aside.blade.php

@@ -1,15 +1,17 @@
-<div class="aside-nav">
+@if(count($menu))
-    <ul>
+    <div class="aside-nav">
-        @foreach($menu['items'] as $menu)
+        <ul>
-            <li class="{{ $menu['active'] ? 'active' : '' }}">
+            @foreach($menu['items'] as $menu)
-                <a href="{{ $menu['url'] }}">
+                <li class="{{ $menu['active'] ? 'active' : '' }}">
-                    {{ $menu['name'] }}
+                    <a href="{{ $menu['url'] }}">
+                        {{ $menu['name'] }}
 
-                    @if ($menu['active'])
+                        @if ($menu['active'])
-                        <i class="angle-right-icon"></i>
+                            <i class="angle-right-icon"></i>
-                    @endif
+                        @endif
-                </a>
+                    </a>
-            </li>
+                </li>
-        @endforeach
+            @endforeach
-    </ul>
+        </ul>
-</div>
+    </div>
+@endif

packages/Webkul/Admin/src/Resources/views/layouts/nav-left.blade.php

@@ -1,11 +1,11 @@
 <div class="navbar-left">
     <ul class="menubar">
-        @foreach($menu->items as $menu)
+        @foreach($menu->items as $menuItem)
-            <li class="menu-item {{ $menu['active'] ? 'active' : '' }}">
+            <li class="menu-item {{ $menu->getActive($menuItem) }}">
-                <a href="{{ $menu['url'] }}">
+                <a href="{{ $menuItem['url'] }}">
-                    <span class="icon {{ $menu['icon-class'] }}">
+                    <span class="icon {{ $menuItem['icon-class'] }}">
                     </span>
-                    {{ $menu['name'] }}
+                    {{ $menuItem['name'] }}
                 </a>
             </li>
         @endforeach

packages/Webkul/Admin/src/Resources/views/layouts/nav-top.blade.php

@@ -29,7 +29,7 @@
                         <label>Account</label>
                         <ul>
                             <li>
-                                <a href="">My Account</a>
+                                <a href="{{ route('admin.account.edit') }}">My Account</a>
                             </li>
                             <li>
                                 <a href="{{ route('admin.session.destroy') }}">Logout</a>

packages/Webkul/Ui/src/Http/routes.php

@@ -2,7 +2,7 @@
 
 Route::view('/ui-kit', 'ui::ui-kit');
 
-Route::get('/users', function () {
+// Route::get('/users', function () {
-    $users = \Webkul\User\Models\Admin::paginate(1);
+//     $users = \Webkul\User\Models\Admin::paginate(1);
-    echo $users->links();
+//     echo $users->links();
-});
+// });

packages/Webkul/Ui/src/Menu.php

@@ -77,4 +77,24 @@ class Menu {
 
 		return $items;
 	}
+
+	/**
+	 * Method to find the active links
+	 *
+	 * @param  array $item Item that needs to be checked if active
+	 * @return string
+	 */
+	public function getActive($item)
+	{
+		$url = trim($item['url'], '/');
+
+		if ($this->current === $url)
+		{
+			return 'active current';
+		}
+
+		if (strpos($this->currentKey, $item['key']) === 0) {
+			return 'active';
+		}
+	}
 }

packages/Webkul/Ui/src/Providers/UiServiceProvider.php

@@ -22,8 +22,8 @@ class UiServiceProvider extends ServiceProvider
 
         $this->loadViewsFrom(__DIR__ . '/../Resources/views', 'ui');
 
-        Paginator::defaultView('ui::pagination');
+        Paginator::defaultView('ui::partials.pagination');
-        Paginator::defaultSimpleView('ui::pagination');
+        Paginator::defaultSimpleView('ui::partials.pagination');
 
     }
 

packages/Webkul/Ui/src/Resources/assets/images/Icon-Sm-Cross-White.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Sm-Cross</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-Sm-Cross" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Icon-Cross-Sm" transform="translate(6.000000, 6.000000)" stroke="#ffffff" stroke-width="2">
+            <path d="M0,0 L6,6" id="Path-2"></path>
+            <path d="M0,0 L6,6" id="Path-2" transform="translate(3.000000, 3.000000) scale(-1, 1) translate(-3.000000, -3.000000) "></path>
+        </g>
+    </g>
+</svg>

packages/Webkul/Ui/src/Resources/assets/js/app.js

@@ -0,0 +1,26 @@
+$(document).ready(function () {
+    function addFlash(flash) {
+        flashMessages.push(flash)
+    }
+
+    Vue.component('flash-wrapper', require('./components/flash-wrapper'))
+    Vue.component('flash', require('./components/flash'))
+
+    const app = new Vue({
+        el: '#app',
+
+        mounted: function() {
+            this.addFlashMessages()
+        },
+
+        methods: {
+            addFlashMessages: function() {
+                const flashes = this.$refs.flashes
+
+                flashMessages.forEach(function(flash) {
+                    flashes.addFlash(flash)
+                }, this);
+            }
+        }
+    });
+})

packages/Webkul/Ui/src/Resources/assets/js/components/flash-wrapper.vue

@@ -0,0 +1,39 @@
+<template>
+    <transition-group
+        tag='div'
+        name="flash-wrapper"
+        class='alert-wrapper'
+    >
+        <flash
+            v-for='(flash, index) in flashes'
+            :key='flash.uid'
+            :flash="flash"
+            @onRemoveFlash="removeFlash($event)"
+        ></flash>
+    </transition-group>
+</template>
+
+<script>
+    export default {
+        data: function() {
+            return {
+                uid: 1,
+
+                flashes: []
+            }
+        },
+
+        methods: {
+            addFlash: function(flash) {
+                flash.uid = this.uid++;
+                this.flashes.push(flash)
+            },
+
+            removeFlash: function(flash) {
+                let index = this.flashes.indexOf(flash)
+
+                this.flashes.splice(index, 1)
+            }
+        }
+    }
+</script>

packages/Webkul/Ui/src/Resources/assets/js/components/flash.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="alert" v-bind:class="flash.type">
+        <span class="icon white-cross-sm-icon" @click="remove"></span>
+        <p>{{ flash.message }}</p>  
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['flash'],
+
+        created: function() {
+            var this_this = this;
+            setTimeout(function() {
+                this_this.$emit('onRemoveFlash', this_this.flash)
+            }, 1000)
+        },
+
+        methods: {
+            remove: function() {
+                this.$emit('onRemoveFlash', this.flash)
+            }
+        }
+    }
+</script>

packages/Webkul/Ui/src/Resources/assets/sass/_variables.scss

@@ -1,5 +1,5 @@
 $brand-color: #0041FF;
-$danger-color: #FF5656;
+$danger-color: #FC6868;
 $success-color: #4CAF50;
 $warning-color: #FFC107;
 $control-border-color: #C7C7C7;

packages/Webkul/Ui/src/Resources/assets/sass/animations.scss

@@ -0,0 +1,28 @@
+@keyframes jelly {
+    0% {
+        transform: translateY(0px) scale(0.7);
+        opacity: 0;
+    }
+    70% {
+        transform: translateY(5px) scale(1.05);
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(0px) scale(1);
+        opacity: 1;
+    }
+}
+@keyframes jelly-out {
+    0% {
+        transform: translateY(0px) scale(1);
+        opacity: 1;
+    }
+    30% {
+        transform: translateY(-5px) scale(1.05);
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(0px) scale(0.7);
+        opacity: 0;
+    }
+}

packages/Webkul/Ui/src/Resources/assets/sass/app.scss

@@ -2,6 +2,37 @@
 @import "icons";
 @import "variables";
 @import "mixins";
+@import "animations";
+
+* {
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+*:focus {
+    outline: none;
+}
+
+a:link,
+a:hover,
+a:visited,
+a:focus,
+a:active {
+  text-decoration: none;
+}
+
+ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+h1 {
+    font-size: 28px;
+    color: #3A3A3A;
+    margin-top: 0;
+}
 
 .btn {
     @include box-shadow(0 1px 4px 0 rgba(0, 0, 0, 0.20), 0 0 8px 0 rgba(0, 0, 0, 0.10));
@@ -262,7 +293,7 @@
         margin-bottom: 25px;
         font-size: 15px;
         color: #333333;
-        width: 550px;
+        width: 750px;
         max-width: 100%;
 
         label {
@@ -303,7 +334,6 @@
 
         .control-error {
             display: block;
-            font-style: italic;
             color: #FF5656;
             margin-top: 5px;
         }
@@ -312,4 +342,51 @@
             border-color: $danger-color;
         }
     }
+}
+
+.alert-wrapper {
+    width: 300px;
+    top: 10px;
+    right: 10px;
+    position: fixed;
+    z-index: 3;
+
+    .alert {
+        width: 300px;
+        padding: 15px;
+        border-radius: 3px;
+        display: inline-block;
+        box-shadow: 0px 4px 15.36px 0.64px rgba(0, 0, 0, 0.1), 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
+        position: relative;
+        animation: jelly 0.5s ease-in-out;
+        transform-origin: center top;
+        z-index: 500;
+        margin-bottom: 10px;
+
+        &.alert-error {
+            background: $danger-color;
+        }
+
+        &.alert-success {
+            background: $success-color;
+        }
+
+        &.alert-warning {
+            background: $warning-color;
+        }
+
+        .icon {
+            position: absolute;
+            right: 10px;
+            top: 10px;
+            cursor: pointer;
+        }
+
+        p {
+            color: #FFFFFF;
+            margin: 0px;
+            padding: 0px;
+            font-size: 15px;
+        }
+    }
 }

packages/Webkul/Ui/src/Resources/assets/sass/icons.scss

@@ -60,4 +60,10 @@
     background-image: url('../images/Arrow-Down.svg');
     width: 14px;
     height: 8px;
+}
+
+.white-cross-sm-icon {
+    background-image: url('../images/Icon-Sm-Cross-White.svg');
+    width: 18px;
+    height: 18px;
 }

packages/Webkul/Ui/webpack.mix.js

@@ -6,7 +6,10 @@ var publicPath = '../../../public/vendor/webkul/ui/assets';
 
 mix.setPublicPath(publicPath).mergeManifest();
 
-mix.js([__dirname + '/src/Resources/assets/js/dropdown.js'], 'js/ui.js')
+mix.js([
+        __dirname + '/src/Resources/assets/js/app.js',
+        __dirname + '/src/Resources/assets/js/dropdown.js'
+    ], 'js/ui.js')
     .copyDirectory( __dirname + '/src/Resources/assets/images', publicPath + '/images')
     .sass( __dirname + '/src/Resources/assets/sass/app.scss', 'css/ui.css')
     .options({

packages/Webkul/User/src/Http/Controllers/AccountController.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace Webkul\User\Http\Controllers;
+
+/**
+ * Admin user account controller
+ *
+ * @author    Jitendra Singh <jitendra@webkul.com>
+ * @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
+ */
+class AccountController extends Controller
+{
+    protected $_config;
+
+    public function __construct()
+    {
+        $this->_config = request('_config');
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function edit()
+    {
+        $user = auth()->guard('admin')->user();
+
+        return view($this->_config['view'], compact('user'));
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function update()
+    {
+        $this->validate(request(), [
+            'name' => 'required',
+            'email' => 'email',
+            // 'password' => 'required|confirmed'
+        ]);
+        
+        $user::update(request('name', 'email', 'password'));
+
+        session()->flash('success', 'Account changes saved successfully.');
+
+        return back();
+    }
+}

packages/Webkul/User/src/Http/Controllers/Controller.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace Webkul\User\Http\Controllers;
+
+use Illuminate\Foundation\Bus\DispatchesJobs;
+use Illuminate\Routing\Controller as BaseController;
+use Illuminate\Foundation\Validation\ValidatesRequests;
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+
+class Controller extends BaseController
+{
+    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
+}

public/vendor/webkul/admin/assets/css/admin.css

@@ -6,31 +6,6 @@
   font-weight: 500;
 }
 
-* {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-*:focus {
-  outline: none;
-}
-
-a:link,
-a:hover,
-a:visited,
-a:focus,
-a:active {
-  text-decoration: none;
-}
-
-ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
 .navbar-top {
   height: 60px;
   background: #FFFFFF;
@@ -158,6 +133,23 @@ ul {
 }
 
 .content-container .content {
-  padding: 15px;
+  padding: 25px;
-  padding-left: 295px;
+  padding-left: 305px;
+}
+
+.content-container .content .page-header {
+  display: block;
+}
+
+.content-container .content .page-header .page-title {
+  float: left;
+}
+
+.content-container .content .page-header .page-action {
+  float: right;
+}
+
+.content-container .content .page-content {
+  width: 100%;
+  display: inline-block;
 }

public/vendor/webkul/ui/assets/css/ui.css

@@ -59,6 +59,115 @@
   height: 8px;
 }
 
+.white-cross-sm-icon {
+  background-image: url("../images/Icon-Sm-Cross-White.svg");
+  width: 18px;
+  height: 18px;
+}
+
+@-webkit-keyframes jelly {
+  0% {
+    -webkit-transform: translateY(0px) scale(0.7);
+            transform: translateY(0px) scale(0.7);
+    opacity: 0;
+  }
+  70% {
+    -webkit-transform: translateY(5px) scale(1.05);
+            transform: translateY(5px) scale(1.05);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(0px) scale(1);
+            transform: translateY(0px) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes jelly {
+  0% {
+    -webkit-transform: translateY(0px) scale(0.7);
+            transform: translateY(0px) scale(0.7);
+    opacity: 0;
+  }
+  70% {
+    -webkit-transform: translateY(5px) scale(1.05);
+            transform: translateY(5px) scale(1.05);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(0px) scale(1);
+            transform: translateY(0px) scale(1);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes jelly-out {
+  0% {
+    -webkit-transform: translateY(0px) scale(1);
+            transform: translateY(0px) scale(1);
+    opacity: 1;
+  }
+  30% {
+    -webkit-transform: translateY(-5px) scale(1.05);
+            transform: translateY(-5px) scale(1.05);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(0px) scale(0.7);
+            transform: translateY(0px) scale(0.7);
+    opacity: 0;
+  }
+}
+
+@keyframes jelly-out {
+  0% {
+    -webkit-transform: translateY(0px) scale(1);
+            transform: translateY(0px) scale(1);
+    opacity: 1;
+  }
+  30% {
+    -webkit-transform: translateY(-5px) scale(1.05);
+            transform: translateY(-5px) scale(1.05);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(0px) scale(0.7);
+            transform: translateY(0px) scale(0.7);
+    opacity: 0;
+  }
+}
+
+* {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+*:focus {
+  outline: none;
+}
+
+a:link,
+a:hover,
+a:visited,
+a:focus,
+a:active {
+  text-decoration: none;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+h1 {
+  font-size: 28px;
+  color: #3A3A3A;
+  margin-top: 0;
+}
+
 .btn {
   -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 0 8px 0 rgba(0, 0, 0, 0.1);
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 0 8px 0 rgba(0, 0, 0, 0.1);
@@ -327,7 +436,7 @@
   margin-bottom: 25px;
   font-size: 15px;
   color: #333333;
-  width: 550px;
+  width: 750px;
   max-width: 100%;
 }
 
@@ -370,11 +479,60 @@
 
 .form-container .control-group .control-error {
   display: block;
-  font-style: italic;
   color: #FF5656;
   margin-top: 5px;
 }
 
 .form-container .control-group.has-error .control {
-  border-color: #FF5656;
+  border-color: #FC6868;
+}
+
+.alert-wrapper {
+  width: 300px;
+  top: 10px;
+  right: 10px;
+  position: fixed;
+  z-index: 3;
+}
+
+.alert-wrapper .alert {
+  width: 300px;
+  padding: 15px;
+  border-radius: 3px;
+  display: inline-block;
+  -webkit-box-shadow: 0px 4px 15.36px 0.64px rgba(0, 0, 0, 0.1), 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
+          box-shadow: 0px 4px 15.36px 0.64px rgba(0, 0, 0, 0.1), 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
+  position: relative;
+  -webkit-animation: jelly 0.5s ease-in-out;
+          animation: jelly 0.5s ease-in-out;
+  -webkit-transform-origin: center top;
+          transform-origin: center top;
+  z-index: 500;
+  margin-bottom: 10px;
+}
+
+.alert-wrapper .alert.alert-error {
+  background: #FC6868;
+}
+
+.alert-wrapper .alert.alert-success {
+  background: #4CAF50;
+}
+
+.alert-wrapper .alert.alert-warning {
+  background: #FFC107;
+}
+
+.alert-wrapper .alert .icon {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;
+}
+
+.alert-wrapper .alert p {
+  color: #FFFFFF;
+  margin: 0px;
+  padding: 0px;
+  font-size: 15px;
 }

public/vendor/webkul/ui/assets/images/Icon-Sm-Cross-White.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Sm-Cross</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-Sm-Cross" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Icon-Cross-Sm" transform="translate(6.000000, 6.000000)" stroke="#ffffff" stroke-width="2">
+            <path d="M0,0 L6,6" id="Path-2"></path>
+            <path d="M0,0 L6,6" id="Path-2" transform="translate(3.000000, 3.000000) scale(-1, 1) translate(-3.000000, -3.000000) "></path>
+        </g>
+    </g>
+</svg>

public/vendor/webkul/ui/assets/images/Icon-Sm-White-Cross.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Sm-Cross</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-Sm-Cross" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Icon-Cross-Sm" transform="translate(6.000000, 6.000000)" stroke="#ffffff" stroke-width="2">
+            <path d="M0,0 L6,6" id="Path-2"></path>
+            <path d="M0,0 L6,6" id="Path-2" transform="translate(3.000000, 3.000000) scale(-1, 1) translate(-3.000000, -3.000000) "></path>
+        </g>
+    </g>
+</svg>

public/vendor/webkul/ui/assets/js/ui.js

@@ -60,22 +60,273 @@
 /******/ 	__webpack_require__.p = "/";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ 	return __webpack_require__(__webpack_require__.s = 1);
 /******/ })
 /************************************************************************/
 /******/ ([
-/* 0 */
+/* 0 */,
-/***/ (function(module, exports, __webpack_require__) {
-
-__webpack_require__(1);
-module.exports = __webpack_require__(3);
-
-
-/***/ }),
 /* 1 */
 /***/ (function(module, exports, __webpack_require__) {
 
-window.jQuery = window.$ = $ = __webpack_require__(2);
+__webpack_require__(2);
+__webpack_require__(11);
+module.exports = __webpack_require__(13);
+
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+$(document).ready(function () {
+    function addFlash(flash) {
+        flashMessages.push(flash);
+    }
+
+    Vue.component('flash-wrapper', __webpack_require__(18));
+    Vue.component('flash', __webpack_require__(7));
+
+    var app = new Vue({
+        el: '#app',
+
+        mounted: function mounted() {
+            this.addFlashMessages();
+        },
+
+        methods: {
+            addFlashMessages: function addFlashMessages() {
+                var flashes = this.$refs.flashes;
+
+                flashMessages.forEach(function (flash) {
+                    flashes.addFlash(flash);
+                }, this);
+            }
+        }
+    });
+});
+
+/***/ }),
+/* 3 */,
+/* 4 */,
+/* 5 */,
+/* 6 */,
+/* 7 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+var normalizeComponent = __webpack_require__(8)
+/* script */
+var __vue_script__ = __webpack_require__(9)
+/* template */
+var __vue_template__ = __webpack_require__(10)
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = null
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "src/Resources/assets/js/components/flash.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-feee1d58", Component.options)
+  } else {
+    hotAPI.reload("data-v-feee1d58", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports) {
+
+/* globals __VUE_SSR_CONTEXT__ */
+
+// IMPORTANT: Do NOT use ES2015 features in this file.
+// This module is a runtime utility for cleaner component module output and will
+// be included in the final webpack user bundle.
+
+module.exports = function normalizeComponent (
+  rawScriptExports,
+  compiledTemplate,
+  functionalTemplate,
+  injectStyles,
+  scopeId,
+  moduleIdentifier /* server only */
+) {
+  var esModule
+  var scriptExports = rawScriptExports = rawScriptExports || {}
+
+  // ES6 modules interop
+  var type = typeof rawScriptExports.default
+  if (type === 'object' || type === 'function') {
+    esModule = rawScriptExports
+    scriptExports = rawScriptExports.default
+  }
+
+  // Vue.extend constructor export interop
+  var options = typeof scriptExports === 'function'
+    ? scriptExports.options
+    : scriptExports
+
+  // render functions
+  if (compiledTemplate) {
+    options.render = compiledTemplate.render
+    options.staticRenderFns = compiledTemplate.staticRenderFns
+    options._compiled = true
+  }
+
+  // functional template
+  if (functionalTemplate) {
+    options.functional = true
+  }
+
+  // scopedId
+  if (scopeId) {
+    options._scopeId = scopeId
+  }
+
+  var hook
+  if (moduleIdentifier) { // server build
+    hook = function (context) {
+      // 2.3 injection
+      context =
+        context || // cached call
+        (this.$vnode && this.$vnode.ssrContext) || // stateful
+        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
+      // 2.2 with runInNewContext: true
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__
+      }
+      // inject component styles
+      if (injectStyles) {
+        injectStyles.call(this, context)
+      }
+      // register component module identifier for async chunk inferrence
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier)
+      }
+    }
+    // used by ssr in case component is cached and beforeCreate
+    // never gets called
+    options._ssrRegister = hook
+  } else if (injectStyles) {
+    hook = injectStyles
+  }
+
+  if (hook) {
+    var functional = options.functional
+    var existing = functional
+      ? options.render
+      : options.beforeCreate
+
+    if (!functional) {
+      // inject component registration as beforeCreate hook
+      options.beforeCreate = existing
+        ? [].concat(existing, hook)
+        : [hook]
+    } else {
+      // for template-only hot-reload because in that case the render fn doesn't
+      // go through the normalizer
+      options._injectStyles = hook
+      // register for functioal component in vue file
+      options.render = function renderWithStyleInjection (h, context) {
+        hook.call(context)
+        return existing(h, context)
+      }
+    }
+  }
+
+  return {
+    esModule: esModule,
+    exports: scriptExports,
+    options: options
+  }
+}
+
+
+/***/ }),
+/* 9 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+    props: ['flash'],
+
+    created: function created() {
+        var this_this = this;
+        setTimeout(function () {
+            this_this.$emit('onRemoveFlash', this_this.flash);
+        }, 1000);
+    },
+
+    methods: {
+        remove: function remove() {
+            this.$emit('onRemoveFlash', this.flash);
+        }
+    }
+});
+
+/***/ }),
+/* 10 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c("div", { staticClass: "alert", class: _vm.flash.type }, [
+    _c("span", {
+      staticClass: "icon white-cross-sm-icon",
+      on: { click: _vm.remove }
+    }),
+    _vm._v(" "),
+    _c("p", [_vm._v(_vm._s(_vm.flash.message))])
+  ])
+}
+var staticRenderFns = []
+render._withStripped = true
+module.exports = { render: render, staticRenderFns: staticRenderFns }
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+    require("vue-hot-reload-api")      .rerender("data-v-feee1d58", module.exports)
+  }
+}
+
+/***/ }),
+/* 11 */
+/***/ (function(module, exports, __webpack_require__) {
+
+window.jQuery = window.$ = $ = __webpack_require__(12);
 
 $(function () {
     $(document).click(function (e) {
@@ -140,7 +391,7 @@ $(function () {
 });
 
 /***/ }),
-/* 2 */
+/* 12 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -10511,10 +10762,143 @@ return jQuery;
 
 
 /***/ }),
-/* 3 */
+/* 13 */
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin
 
+/***/ }),
+/* 14 */,
+/* 15 */,
+/* 16 */,
+/* 17 */,
+/* 18 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+var normalizeComponent = __webpack_require__(8)
+/* script */
+var __vue_script__ = __webpack_require__(19)
+/* template */
+var __vue_template__ = __webpack_require__(20)
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = null
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "src/Resources/assets/js/components/flash-wrapper.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-34b58a1a", Component.options)
+  } else {
+    hotAPI.reload("data-v-34b58a1a", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 19 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+    data: function data() {
+        return {
+            uid: 1,
+
+            flashes: []
+        };
+    },
+
+    methods: {
+        addFlash: function addFlash(flash) {
+            flash.uid = this.uid++;
+            this.flashes.push(flash);
+        },
+
+        removeFlash: function removeFlash(flash) {
+            var index = this.flashes.indexOf(flash);
+
+            this.flashes.splice(index, 1);
+        }
+    }
+});
+
+/***/ }),
+/* 20 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "transition-group",
+    {
+      staticClass: "alert-wrapper",
+      attrs: { tag: "div", name: "flash-wrapper" }
+    },
+    _vm._l(_vm.flashes, function(flash, index) {
+      return _c("flash", {
+        key: flash.uid,
+        attrs: { flash: flash },
+        on: {
+          onRemoveFlash: function($event) {
+            _vm.removeFlash($event)
+          }
+        }
+      })
+    })
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+module.exports = { render: render, staticRenderFns: staticRenderFns }
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+    require("vue-hot-reload-api")      .rerender("data-v-34b58a1a", module.exports)
+  }
+}
+
 /***/ })
 /******/ ]);