REC-4 - Optimize login

public/theme/src/components/ReCast/Login.vue

@@ -1,48 +1,38 @@
 <template>
-    <div class="content">
-        <div class="container">
-            <div class="row">
-                <div class="col-md-12">
-                    <card>
-                        <div class="alert alert-danger" v-if="authFailed">Bad credentials</div>
+    <div class="loginWrapper">
+        <div class="sidebarBanner"></div>
+        <div class="loginForm">
+            <h4>Login</h4>
 
-                        <fg-input type="text"
-                                  label="Username"
-                                  placeholder="Username"
-                                  v-model="login._username">
-                        </fg-input>
+            <div class="alert alert-danger" v-if="authFailed">Bad credentials</div>
 
-                        <div class="form-group">
-                            <label class="control-label">Password</label>
-                            <input type="password" class="form-control" placeholder="Password" v-model="login._password">
-                        </div>
-                        <div class="form-group">
-                            <div class="peers ai-c jc-sb fxw-nw">
-                                <div class="peer">
-                                    <div class="checkbox checkbox-circle checkbox-info peers ai-c">
-                                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                                        <label
-                                                for="inputCall1" class="peers peer-greed js-sb ai-c"><span class="peer peer-greed">Remember Me</span>
-                                        </label>
-                                    </div>
-                                </div>
-                                <div class="peer">
-                                    <button class="btn btn-primary" v-on:click="onLogin">Login</button>
-                                </div>
-                            </div>
-                        </div>
-                    </card>
-                </div>
+            <fg-input type="text"
+                      label="Username"
+                      placeholder="Username"
+                      v-model="login._username">
+            </fg-input>
+
+            <div class="form-group">
+                <label class="control-label">Password</label>
+                <input type="password" class="form-control" placeholder="Password" v-model="login._password">
+            </div>
+
+            <div class="form-group">
+                <p-checkbox v-model="rememberMe">Remember Me</p-checkbox>
             </div>
+
+            <button class="btn btn-primary" v-on:click="onLogin">Login</button>
         </div>
     </div>
 </template>
 <script>
+    import PCheckbox from 'src/components/UIComponents/Inputs/Checkbox.vue'
     import Card from 'src/components/UIComponents/Cards/Card.vue'
 
     export default {
         components: {
-            Card
+            Card,
+            PCheckbox
         },
         data() {
             return {
@@ -50,6 +40,7 @@
                     _username: 'Shyim',
                     _password: '1',
                 },
+                rememberMe: false,
                 authFailed: false
             }
         },
@@ -61,13 +52,53 @@
 
                 this.$auth.login({
                     data: bodyFormData,
-                    rememberMe: true,
-                    redirect: {name: 'Overview'}
+                    rememberMe: this.rememberMe,
+                    redirect: {name: 'Overview'},
+                    error: () => {
+                        const notification = {
+                            template: `<span>Login failed</span>`
+                        };
+
+                        this.$notify(
+                        {
+                            component: notification,
+                            icon: 'fa fa-exclamation-triangle',
+                            horizontalAlign: 'right',
+                            verticalAlign: 'top',
+                            type: 'danger'
+                        });
+                    }
                 })
             }
         }
     }
 </script>
 <style>
+    .loginWrapper {
+        height: 100vh;
+        align-items: stretch;
+        flex-wrap: nowrap;
+        box-sizing: border-box;
+        justify-content: flex-start;
+        display: flex;
+        flex-flow: nowrap;
+        max-width: 100%;
+        margin: 0;
+        padding: 0;
+    }
+
+    .loginForm {
+        flex: 1 0 auto;
+        padding: 80px 40px 80px 40px;
+    }
 
+    .sidebarBanner {
+        background-image: url("/static/img/bg.jpg");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        position: relative;
+        height: 100%;
+        flex: 4 1 auto;
+    }
 </style>

public/theme/src/main.js

@@ -4,6 +4,8 @@ import App from './App.vue'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
 import VueAuth from '@websanova/vue-auth'
+import VueNotify from 'vue-notifyjs'
+import 'vue-notifyjs/themes/default.css'
 
 
 // router setup
@@ -25,6 +27,7 @@ Vue.router = router;
 axios.defaults.baseURL = `http://streamer.miku/api`;
 
 Vue.use(VueAxios, axios);
+Vue.use(VueNotify);
 Vue.use(VueAuth, {
     auth: {
         request: function (req, token) {

src/Controller/Dashboard.php

@@ -3,6 +3,7 @@
 
 namespace App\Controller;
 
+use App\Component\ServiceManager;
 use Doctrine\DBAL\Connection;
 use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
 use Symfony\Bundle\FrameworkBundle\Controller\Controller;
@@ -19,16 +20,17 @@ class Dashboard extends Controller
      * @Route(path="/stats")
      * @author Soner Sayakci <shyim@posteo.de>
      * @param Connection $connection
+     * @param ServiceManager $manager
      * @return JsonResponse
      * @throws \Doctrine\DBAL\DBALException
      */
-    public function index(Connection $connection)
+    public function index(Connection $connection, ServiceManager $manager)
     {
         $data = [];
         $data['streams'] = $connection->fetchColumn('SELECT COUNT(*) FROM streams');
         $data['liveStreams'] = $connection->fetchColumn('SELECT COUNT(*) FROM streams WHERE live = 1');
         $data['users'] = $connection->fetchColumn('SELECT COUNT(*) FROM `user`');
-        $data['endpoints'] = $connection->fetchColumn('SELECT COUNT(*) FROM endpoint');
+        $data['endpoints'] = \count($manager->getTemplateData());
 
         return new JsonResponse($data);
     }