Visibility switching on main page based on user role

motorradig/.idea/workspace.xml

@@ -2,8 +2,16 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="eed7de89-f054-487c-bf59-36356758942b" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/database/migrations/2020_01_21_084547_add_role_to_users.php" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/app/Http/Controllers/AuthController.php" beforeDir="false" afterPath="$PROJECT_DIR$/app/Http/Controllers/AuthController.php" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/js/app.js" beforeDir="false" afterPath="$PROJECT_DIR$/public/js/app.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/js/modal.js" beforeDir="false" afterPath="$PROJECT_DIR$/public/js/modal.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/mix-manifest.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/mix-manifest.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/resources/js/store.js" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/store.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/resources/js/views/Main.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/views/Main.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/resources/js/views/auth/Login.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/views/auth/Login.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/resources/js/views/components/modal.js" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/webpack.mix.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.mix.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -206,7 +214,7 @@
       <workItem from="1575965115540" duration="593000" />
       <workItem from="1575966299565" duration="383000" />
       <workItem from="1579075615585" duration="8354000" />
-      <workItem from="1579595422946" duration="957000" />
+      <workItem from="1579595422946" duration="4127000" />
     </task>
     <servers />
   </component>
@@ -230,9 +238,13 @@
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
   </component>
   <component name="WindowStateProjectService">
-    <state x="1905" y="258" width="670" height="676" key="search.everywhere.popup" timestamp="1579180981798">
+    <state x="1903" y="197" width="673" height="708" key="find.popup" timestamp="1579597123793">
       <screen x="1280" y="23" width="1920" height="1057" />
     </state>
-    <state x="1905" y="258" width="670" height="676" key="search.everywhere.popup/0.23.1280.777/1280.23.1920.1057@1280.23.1920.1057" timestamp="1579180981798" />
+    <state x="1903" y="197" width="673" height="708" key="find.popup/0.23.1280.777/1280.23.1920.1057@1280.23.1920.1057" timestamp="1579597123793" />
+    <state x="1905" y="258" width="670" height="676" key="search.everywhere.popup" timestamp="1579597080472">
+      <screen x="1280" y="23" width="1920" height="1057" />
+    </state>
+    <state x="1905" y="258" width="670" height="676" key="search.everywhere.popup/0.23.1280.777/1280.23.1920.1057@1280.23.1920.1057" timestamp="1579597080472" />
   </component>
 </project>

motorradig/app/Http/Controllers/AuthController.php

@@ -45,7 +45,7 @@ class AuthController extends Controller {
 
         $credentials = $request->only('email', 'password');
         if ($token = $this->guard()->attempt($credentials)) {
-            return response()->json(['status' => 'success'], 200)->header('Authorization', $token);
+            return response()->json(['status' => 'success', 'user' => $user], 200)->header('Authorization', $token);
         }
         return response()->json(['error' => 'login_error'], 401);
     }

motorradig/public/js/app.js

@@ -1887,6 +1887,15 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
 /* harmony default export */ __webpack_exports__["default"] = ({
   data: function data() {
     return {
@@ -2010,9 +2019,13 @@ __webpack_require__.r(__webpack_exports__);
         password: this.password
       }).then(function (res) {
         console.log("Login successful. Token=" + res.headers.authorization);
-        _this.$store.state.user.token = res.headers.authorization;
+        _this.$store.state.user_token = res.headers.authorization;
+        _this.$store.state.user = res.data.user; //console.log("Storing user data:");
+        //console.log(res.data.user);
+        //console.log("Test extraction:");
+        //console.log(this.$store.state.user.role);
 
-        _this.$router.push('/main');
+        _this.$router.push('/');
       })["catch"](function (error) {
         console.log("Login unsuccessful."); //console.log(error)
       });
@@ -2698,22 +2711,67 @@ var render = function() {
           [_vm._v("Mitgliedsantrag")]
         ),
         _vm._v(" "),
-        _c(
+        !this.$store.state.user.hasOwnProperty("role")
-          "button",
+          ? _c("span", [
-          {
+              _c(
-            staticClass: "button",
+                "button",
-            on: {
+                {
-              click: function($event) {
+                  staticClass: "button",
-                return _vm.changeMainText("Tourplan")
+                  on: {
-              }
+                    click: function($event) {
-            }
+                      return _vm.changeMainText("Tourplan")
-          },
+                    }
-          [_vm._v("Tourplan")]
+                  }
-        ),
+                },
-        _vm._v(" "),
+                [_vm._v("Tourplan (Auszug)")]
-        _c("router-link", { attrs: { to: { name: "Login" } } }, [
+              )
-          _vm._v("Log-In")
+            ])
-        ]),
+          : this.$store.state.user.role === "GUEST"
+          ? _c("span", [
+              _c(
+                "button",
+                {
+                  staticClass: "button",
+                  on: {
+                    click: function($event) {
+                      return _vm.changeMainText("Tourplan")
+                    }
+                  }
+                },
+                [_vm._v("Tourplan (Auszug-G)")]
+              )
+            ])
+          : this.$store.state.user.role === "MEMBER"
+          ? _c("span", [
+              _c(
+                "button",
+                {
+                  staticClass: "button",
+                  on: {
+                    click: function($event) {
+                      return _vm.changeMainText("Tourplan")
+                    }
+                  }
+                },
+                [_vm._v("Tourplan (komplett)")]
+              )
+            ])
+          : this.$store.state.user.role === "ADMIN"
+          ? _c("span", [
+              _c(
+                "button",
+                {
+                  staticClass: "button",
+                  on: {
+                    click: function($event) {
+                      return _vm.changeMainText("Tourplan")
+                    }
+                  }
+                },
+                [_vm._v("Tourplan (komplett)")]
+              )
+            ])
+          : _vm._e(),
         _vm._v(" "),
         _c(
           "button",
@@ -2752,7 +2810,21 @@ var render = function() {
             }
           },
           [_vm._v("Impressum")]
-        )
+        ),
+        _vm._v(" "),
+        _c(
+          "router-link",
+          { staticClass: "button", attrs: { to: { name: "Login" } } },
+          [_vm._v("Log-In")]
+        ),
+        _vm._v(" "),
+        this.$store.state.user.role === "ADMIN"
+          ? _c("span", [
+              _c("button", { staticClass: "button" }, [
+                _vm._v("Administration")
+              ])
+            ])
+          : _vm._e()
       ],
       1
     ),
@@ -19437,7 +19509,8 @@ __webpack_require__.r(__webpack_exports__);
 vue__WEBPACK_IMPORTED_MODULE_0___default.a.use(vuex__WEBPACK_IMPORTED_MODULE_1__["default"]);
 var store = new vuex__WEBPACK_IMPORTED_MODULE_1__["default"].Store({
   state: {
-    user: {}
+    user: {},
+    user_token: {}
   }
 });
 

motorradig/public/js/modal.js

@@ -84,48 +84,17 @@
 /******/ 	return __webpack_require__(__webpack_require__.s = 1);
 /******/ })
 /************************************************************************/
-/******/ ({
+/******/ ([
-
+/* 0 */,
-/***/ "./resources/js/vue/components/modal.js":
+/* 1 */
-/*!**********************************************!*\
-  !*** ./resources/js/vue/components/modal.js ***!
-  \**********************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-Vue.component('maintext', {
-  // div needed to make task unique
-  // Backticks = ES6 syntax for multi-line entry
-  props: ['visible'],
-  template: "\n        <div class=\"notification is-active\" v-show=\"this.visible=='true'\">\n            <div >\n                <slot></slot>\n            </div>\n        </div>\n    "
-});
-new Vue({
-  el: '#root',
-  methods: {
-    changeMainText: function changeMainText($newVal) {
-      if ($newVal == "Über uns") {
-        $newVal = "Das alte Problem: Die Sonne scheint und Dein Motorrad ruft,<br/>\n                doch alle Deine Freunde sind pl\xF6tzlich verhindert.<br/><br/>\n                Die Idee!!<br/><br/>\n                Selber anrufen und angerufen werden.<br/>\n                Einmal im Jahr erh\xE4ltst Du eine Liste aller IG-Mitglieder inkl. Telefonnummern.<br/>\n                Die Erscheinungstermine unserer Mitgliederliste + News sind nat\xFCrlich auf die Motorrad-Saison<br/>\n                abgestimmt, ca: M\xE4rz, Juni und September (Saisonstart, -mitte, -ende). F\xFCr Eure (Urlaubs) Planung und<br/>\n                damit der Winter nicht zu lange wird, halten wir in der November- Dezember-Ausgabe schon den<br/>\n                Tourenkalender f\xFCr das n\xE4chste Jahr f\xFCr Euch bereit. Zus\xE4tzlich er\xF6ffnet Dir die Liste die M\xF6glichkeit zur<br/>\n                Teilnahme an einem regelm\xE4\xDFigen Stammtisch, gemeinsame Ausfahrten an Wochenenden, einer<br/>\n                Urlaubsb\xF6rse sowie Saisonauftakt- und Jahrestreffen. Eigeninitiative ist hierbei erw\xFCnscht.<br/>\n\n                Da leider auch diese Art der Adressenvermittlung nicht ganz ohne Kostenaufwand geht,<br/>\n                m\xFCssen wir einmal j\xE4hrlich einen Selbstkostenbeitrag in H\xF6he von 20,- EUR erheben.<br/>\n                Diese Kosten entstehen durch Werbung, Porto, Erfassungsmaterialien etc..<br/>\n                Hast Du jetzt immer noch eine positive Einstellung zu dieser Idee? Dann nichts wie hin.<br/>\n                Stammtisch D\xFCsseldorf: Wir treffen uns jeden 2. Mittwoch im Monat ab ca. 19 Uhr in der<br/>\n                Trattoria and Bar Antonio, Ro\xDFstr. 87, 40476 D\xFCsseldorf-Derendorf, Tel.: 0211/43637525.<br/>\n                Stadtplan und Anfahrt mit \xF6ffentlichen Verkehrsmitteln findet ihr unter:<br/>\n                http://www.daantonio-duesseldorf.de Da Antonio befindet sich direkt neben der Kirche.<br/>\n                Parkm\xF6glichkeiten sind im Umkreis um den Italiener gen\xFCgend vorhanden.<br/>";
-      }
-
-      if ($newVal == "Wetter") {}
-
-      document.getElementById('main').innerHTML = $newVal;
-    }
-  }
-});
-
-/***/ }),
-
-/***/ 1:
 /*!****************************************************!*\
   !*** multi ./resources/js/vue/components/modal.js ***!
   \****************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-module.exports = __webpack_require__(/*! /Users/tschneider/dev/repo/motorradig/motorradig/resources/js/vue/components/modal.js */"./resources/js/vue/components/modal.js");
+!(function webpackMissingModule() { var e = new Error("Cannot find module '/Users/tschneider/dev/repo/motorradig/motorradig/resources/js/vue/components/modal.js'"); e.code = 'MODULE_NOT_FOUND'; throw e; }());
 
 
 /***/ })
-
+/******/ ]);
-/******/ });

motorradig/public/mix-manifest.json

@@ -1,5 +1,4 @@
 {
     "/js/app.js": "/js/app.js",
-    "/css/app.css": "/css/app.css",
+    "/css/app.css": "/css/app.css"
-    "/js/modal.js": "/js/modal.js"
 }

motorradig/resources/js/store.js

@@ -5,5 +5,6 @@ Vue.use(Vuex);
 export const store = new Vuex.Store({
     state:{
         user:{},
+        user_token:{}
     }
 });

motorradig/resources/js/views/Main.vue

@@ -8,16 +8,25 @@
             <button class="button" @click="changeMainText('Über uns')"       >Über uns</button>
             <button class="button" @click="changeMainText('Aktuelles')"      >Aktuelles</button>
             <button class="button" @click="changeMainText('Mitgliedsantrag')">Mitgliedsantrag</button>
-            <button class="button" @click="changeMainText('Tourplan')"       >Tourplan</button>
+
-            <router-link :to="{ name: 'Login' }">Log-In</router-link>
+
+            <span v-if="!this.$store.state.user.hasOwnProperty('role')"><button class="button" @click="changeMainText('Tourplan')" >Tourplan (Auszug)</button></span>
+            <span v-else-if="this.$store.state.user.role==='GUEST'"><button class="button" @click="changeMainText('Tourplan')" >Tourplan (Auszug-G)</button></span>
+            <span v-else-if="this.$store.state.user.role==='MEMBER'"><button class="button" @click="changeMainText('Tourplan')" >Tourplan (komplett)</button></span>
+            <span v-else-if="this.$store.state.user.role==='ADMIN'"><button class="button" @click="changeMainText('Tourplan')" >Tourplan (komplett)</button></span>
+
+
             <button class="button" @click="changeMainText('Wetter')"         >Wetter</button>
             <button class="button" @click="changeMainText('Links')"          >Links</button>
             <button class="button" @click="changeMainText('Impressum')"      >Impressum</button>
+            <router-link class="button" :to="{ name: 'Login' }">Log-In</router-link>
+
+            <span v-if="this.$store.state.user.role==='ADMIN'"><button class="button">Administration</button></span>
+
         </div>
 
         <p>&nbsp;</p>
         <div>
-            <!-- @close is a custom event, for definition see modal component in main.js -->
             <p id="main" visible="true" style="text-align:center;">Das alte Problem: Die Sonne scheint und Dein Motorrad ruft,<br/>
                 doch alle Deine Freunde sind plötzlich verhindert.<br/><br/>
                 Die Idee!!<br/><br/>

motorradig/resources/js/views/auth/Login.vue

@@ -69,8 +69,13 @@
                 })
                 .then(res => {
                     console.log("Login successful. Token="+res.headers.authorization);
-                    this.$store.state.user.token=res.headers.authorization;
+                    this.$store.state.user_token=res.headers.authorization;
-                    this.$router.push('/main');
+                    this.$store.state.user=res.data.user;
+                    //console.log("Storing user data:");
+                    //console.log(res.data.user);
+                    //console.log("Test extraction:");
+                    //console.log(this.$store.state.user.role);
+                    this.$router.push('/');
                 }
                 )
                 .catch(error => {

motorradig/resources/js/views/components/modal.js

@@ -1,52 +0,0 @@
-Vue.component('maintext',{
-    // div needed to make task unique
-    // Backticks = ES6 syntax for multi-line entry
-    props:['visible'],
-    template: `
-        <div class="notification is-active" v-show="this.visible=='true'">
-            <div >
-                <slot></slot>
-            </div>
-        </div>
-    `
-});
-
-new Vue({
-    el: '#root',
-    methods: {
-        changeMainText($newVal) {
-            if ($newVal=="Über uns") {
-                $newVal=`Das alte Problem: Die Sonne scheint und Dein Motorrad ruft,<br/>
-                doch alle Deine Freunde sind plötzlich verhindert.<br/><br/>
-                Die Idee!!<br/><br/>
-                Selber anrufen und angerufen werden.<br/>
-                Einmal im Jahr erhältst Du eine Liste aller IG-Mitglieder inkl. Telefonnummern.<br/>
-                Die Erscheinungstermine unserer Mitgliederliste + News sind natürlich auf die Motorrad-Saison<br/>
-                abgestimmt, ca: März, Juni und September (Saisonstart, -mitte, -ende). Für Eure (Urlaubs) Planung und<br/>
-                damit der Winter nicht zu lange wird, halten wir in der November- Dezember-Ausgabe schon den<br/>
-                Tourenkalender für das nächste Jahr für Euch bereit. Zusätzlich eröffnet Dir die Liste die Möglichkeit zur<br/>
-                Teilnahme an einem regelmäßigen Stammtisch, gemeinsame Ausfahrten an Wochenenden, einer<br/>
-                Urlaubsbörse sowie Saisonauftakt- und Jahrestreffen. Eigeninitiative ist hierbei erwünscht.<br/>
-
-                Da leider auch diese Art der Adressenvermittlung nicht ganz ohne Kostenaufwand geht,<br/>
-                müssen wir einmal jährlich einen Selbstkostenbeitrag in Höhe von 20,- EUR erheben.<br/>
-                Diese Kosten entstehen durch Werbung, Porto, Erfassungsmaterialien etc..<br/>
-                Hast Du jetzt immer noch eine positive Einstellung zu dieser Idee? Dann nichts wie hin.<br/>
-                Stammtisch Düsseldorf: Wir treffen uns jeden 2. Mittwoch im Monat ab ca. 19 Uhr in der<br/>
-                Trattoria and Bar Antonio, Roßstr. 87, 40476 Düsseldorf-Derendorf, Tel.: 0211/43637525.<br/>
-                Stadtplan und Anfahrt mit öffentlichen Verkehrsmitteln findet ihr unter:<br/>
-                http://www.daantonio-duesseldorf.de Da Antonio befindet sich direkt neben der Kirche.<br/>
-                Parkmöglichkeiten sind im Umkreis um den Italiener genügend vorhanden.<br/>`;
-            }
-
-            if ($newVal=="Wetter") {
-
-
-            }
-
-            document.getElementById('main').innerHTML = $newVal;
-
-        }
-    }
-})
-;

motorradig/webpack.mix.js

@@ -12,5 +12,4 @@ const mix = require('laravel-mix');
  */
 
 mix.js('resources/js/app.js', 'public/js')
-   .js('resources/js/vue/components/modal.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');