Admin

README.md

@@ -10,7 +10,7 @@
 
 ## Projects
 
-- [SuperGreenLive](https://github.com/supergreenlab/SuperGreenLive) - Build a remote camera with a raspberryPI and webcam, and always have an eye on your growth
+- [SuperGreenLive](https://github.com/supergreenlab/SuperGreenLive2) - Build a remote camera with a raspberryPI and webcam, and always have an eye on your growth
 - [SuperGreenOS](https://github.com/supergreenlab/SuperGreenOS) - SuperGreenOS provides most features used when growing cannabis, all in one package
 - [SuperGreenOSBoilerplate](https://github.com/supergreenlab/SuperGreenOSBoilerplate) - ESP32 Boilerplate code generator 
 - [SuperGreenCO2](https://github.com/supergreenlab/SuperGreenCO2) - A first test at controlling co2 level in a box.

assets/img/playbtn.png:Zone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://themayanagari.com/download/?id=2709
+HostUrl=https://themayanagari.com/wp-content/uploads/2021/03/14.png

components/home/latest-diaries.vue

@@ -28,6 +28,9 @@
         {{ plant.name }}
       </nuxt-link>
     </div>
+
+
+
     <nuxt-link  :id='$style.cta' @click.native='ctaClicked' to='/app'>
       <b class="hvr-grow">Install app</b>
     </nuxt-link>

components/layout/header.vue

@@ -33,22 +33,28 @@
       <div><nuxt-link :class='$route.path.includes("/guides") ? $style.selected : ""' to='/guides'>Guides</nuxt-link></div>
       <div><nuxt-link :class='$route.path.includes("/discord") ? $style.selected : ""' to='/discord'>Discord</nuxt-link></div>
       <div><a href='https://growmies.supergreenlab.com' target='_blank'>Affiliate</a></div>
+      <div @click="modal()" :id="$style.login">Login</div>
       <div><nuxt-link :class='$route.path.includes("/cart") ? $style.selected : ""' to='/cart'>Cart<span v-if='nCartItems != 0'>({{ nCartItems}})</span></nuxt-link></div>
     </div>
+    <transition name="popup">
+      <Login v-show="open" @click="modal()" />
+    </transition>
   </section>
 </template>
 
 <script>
 import Logo from '~/components/widgets/logo.vue'
+import Login from '~/components/login/login.vue'
 
 export default {
+  components: { Login, Logo },
+  props: ['responsiveHide',],
   data() {
     return{
-      isActive: false
+      isActive: false,
+      open: false
     }
   },
-  components: { Logo, },
-  props: ['responsiveHide',],
   computed: {
     page() {
       return this.$route.name
@@ -64,13 +70,28 @@ export default {
     onClick(e) {
       this.$matomo && this.$matomo.trackEvent('front-page-menu', 'click', e.target.href.split('#')[1])
     },
+    modal: function() {
+      // console.log(this.open)
+      this.open = !this.open
+    }
   },
 }
 
 </script>
 
 <style module lang=stylus>
 
+#modal
+  position: absolute;
+  width: 150pt
+  height: 150pt
+  margin: 50%
+  background-color: black
+  opacity: 0.6
+  text-align: center
+  color: white
+  z-index: 9000
+
 #container
   position: fixed
   top: 0
@@ -118,6 +139,16 @@ export default {
   text-transform: uppercase
   font-size: 14px
 
+#login
+  display: block
+  color: #4c4c4c
+  font-weight: 600
+  cursor: pointer
+  padding: 15pt 10pt
+  text-decoration: none
+  text-transform: uppercase
+  font-size: 14px
+
 #menu > div:hover
   background-color: #43b100bd
 

components/login/admin-user-list.vue

@@ -0,0 +1,43 @@
+<!--
+      Copyright (C) 2020  SuperGreenLab <towelie@supergreenlab.com>
+      Author: Constantin Clauzel <constantin.clauzel@gmail.com>
+
+      This program is free software: you can redistribute it and/or modify
+      it under the terms of the GNU General Public License as published by
+      the Free Software Foundation, either version 3 of the License, or
+      (at your option) any later version.
+
+      This program is distributed in the hope that it will be useful,
+      but WITHOUT ANY WARRANTY; without even the implied warranty of
+      MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+      GNU General Public License for more details.
+
+      You should have received a copy of the GNU General Public License
+      along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ -->
+
+
+<template>
+  <section>
+    <div v-for="user in users" :key="user.id">
+      {{user.name}}
+    </div>
+  </section>
+</template>
+
+<script>
+import { users } from '~/config/users.json'
+
+export default {
+  computed: {
+    users(){
+      return users
+    }
+  }
+
+}
+</script>
+
+<style module lang=stylus>
+
+</style>

components/login/login.vue

@@ -0,0 +1,166 @@
+<!--
+      Copyright (C) 2020  SuperGreenLab <towelie@supergreenlab.com>
+      Author: Constantin Clauzel <constantin.clauzel@gmail.com>
+
+      This program is free software: you can redistribute it and/or modify
+      it under the terms of the GNU General Public License as published by
+      the Free Software Foundation, either version 3 of the License, or
+      (at your option) any later version.
+
+      This program is distributed in the hope that it will be useful,
+      but WITHOUT ANY WARRANTY; without even the implied warranty of
+      MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+      GNU General Public License for more details.
+
+      You should have received a copy of the GNU General Public License
+      along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ -->
+<template>
+  <section :id="$style.container">
+    <div :id="$style.modalcontainer">
+      <form @submit="loginHandler">
+        <div :id="$style.body">
+          <div :id="$style.title">
+            S<span :id="$style.green">G</span>L LOGIN
+            <span :id="$style.close" v-on:click="close()">x</span>
+          </div>
+          <input type="text" placeholder="Login" v-model="login" />
+          <input type="password" placeholder="Password" v-model="password" />
+          <div :id="$style.app">
+            No account yet? create one on the
+            <a target="_blank" href="https://www.supergreenlab.com/app"
+              >sgl app</a
+            >
+          </div>
+          <span :id="$style.error" v-if="error">Wrong login/password</span>
+          <div :id="$style.button">
+            <button @click="loginHandler">LOGIN</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      login: "",
+      password: "",
+    };
+  },
+  watch: {
+    loggedIn(val) {
+      if (val == true) {
+        this.$router.push("/sglhq");
+      }
+    }
+  },
+  methods: {
+    loginHandler(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      const { login, password } = this.$data;
+      this.$store.dispatch("auth/login", { login, password });
+      return false;
+    },
+    close() {
+      this.$emit('click')
+    }
+  },
+  computed: {
+    loggedIn() {
+      return this.$store.state.auth.loggedIn;
+    },
+    error() {
+      return this.$store.state.auth.error;
+    }
+  }
+};
+</script>
+
+<style module lang=stylus>
+
+#container
+  display: flex
+  align-items: center
+  justify-content: center
+  position: absolute
+  width: 100vw
+  height: 100vh
+  top: 0
+  left: 0
+  background-color: rgba(255, 255, 255, 0.5)
+  z-index: 10000
+
+#modalcontainer
+  display: flex
+  position: relative
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  background-color: white
+  padding: 15pt 40pt 20pt 20pt
+  border-radius: 5pt
+  border: 4pt solid #3BB30B
+
+#body
+  display: flex
+  flex-direction: column
+
+#body > input
+  margin: 5pt 0
+  padding: 5pt 6pt
+  border: 1pt solid #C2C2C2
+  border-radius: 3pt
+
+#body > input::placeholder
+  color: #C2C2C2
+
+#green
+  color: #3bb30b
+
+#title
+  color: #454545
+  font-weight: bold
+  margin-bottom: 5pt
+
+#button
+  display: flex
+  justify-content: flex-end
+  align-items: flex-end
+  padding: 15pt 0 0 0
+
+#button > button
+  border: none
+  color: white
+  border-radius: 2.5px
+  background-color: #3bb30b
+  padding: 5pt 15pt
+  cursor: pointer
+
+#button > button:hover
+  background-color: #4bc31b
+
+#button > button:active
+  background-color: #2ba300
+
+#error
+  color: red
+
+#app
+  color: #454545
+
+#close
+  color: #5d5d5d;
+  float: right;
+  font-size: 13pt;
+  cursor: pointer;
+  position: absolute;
+  right: 18pt;
+  top: 10pt;
+
+#close:hover
+  color: #3bb30b
+</style>

components/login/user-auth-form.vue

@@ -0,0 +1,65 @@
+<!--
+      Copyright (C) 2020  SuperGreenLab <towelie@supergreenlab.com>
+      Author: Constantin Clauzel <constantin.clauzel@gmail.com>
+
+      This program is free software: you can redistribute it and/or modify
+      it under the terms of the GNU General Public License as published by
+      the Free Software Foundation, either version 3 of the License, or
+      (at your option) any later version.
+
+      This program is distributed in the hope that it will be useful,
+      but WITHOUT ANY WARRANTY; without even the implied warranty of
+      MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+      GNU General Public License for more details.
+
+      You should have received a copy of the GNU General Public License
+      along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ -->
+
+
+<template>
+  <section>
+    <div>
+      <!-- <form @submit.prevent="userLogin">
+        <div>
+          <label>Username</label>
+          <input type="text" v-model="login.username" />
+        </div>
+        <div>
+          <label>Password</label>
+          <input type="text" v-model="login.password" />
+        </div>
+        <div>
+          <button type="submit">Submit</button>
+        </div>
+      </form> -->
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      login: {
+        username: '',
+        password: ''
+      }
+    }
+  },
+  methods: {
+    async userLogin() {
+      try {
+        let response = await this.$auth.loginWith('local', { data: this.login })
+        console.log(response)
+      } catch (err) {
+        console.log(err)
+      }
+    }
+  }
+}
+</script>
+
+<style module lang=stylus>
+
+</style>