[CLEAR-20] [CLEAR-21] Implemented logging in/out and registration of users

front/README.md

@@ -0,0 +1,22 @@
+# clearbowl
+
+> My flawless Nuxt.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+$ npm run install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm run start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

front/assets/README.md

@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

front/components/ClearBowlHeader.vue

@@ -0,0 +1,94 @@
+<template>
+  <Header>
+    <Menu mode="horizontal" theme="dark" active-name="1">
+      <NuxtLink to="/">
+        <div class="layout-logo">
+          <img class="logo" src="../static/bowl.png"/>
+          <div class="logo-text">ClearBowl</div>
+        </div>
+      </NuxtLink>
+      <div v-if="!$auth.loggedIn" class="layout-nav">
+        <NuxtLink to="/login">
+          <MenuItem name="login">
+            <Icon type="ios-log-in" size="20"/>
+            Zaloguj
+          </MenuItem>
+        </NuxtLink>
+        <NuxtLink to="/register">
+          <MenuItem name="register">
+            <Icon type="ios-person-add" size="20"/>
+            Zarejestruj
+          </MenuItem>
+        </NuxtLink>
+      </div>
+      <div v-else class="layout-nav">
+        <div style="display: flex">
+          <div>Witaj, {{ $auth.user.email }}</div>
+          <MenuItem name="logout">
+            <div @click="logout">
+              <Icon type="ios-log-out" size="20"/>
+              <span>Wyloguj</span>
+            </div>
+          </MenuItem>
+        </div>
+      </div>
+    </Menu>
+  </Header>
+</template>
+
+<script>
+  export default {
+    name: "ClearBowlHeader",
+    methods: {
+      logout() {
+        this.$auth.logout()
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+  .ivu-menu-dark {
+    background: white;
+  }
+
+  .ivu-layout-header {
+    background: white;
+    border-bottom: black solid;
+    border-width: thin;
+  }
+
+  .layout-logo {
+    background: transparent;
+    float: left;
+    position: relative;
+    top: 10px;
+    left: 20px;
+  }
+
+  .logo {
+    max-width: 40px;
+    max-height: 40px;
+  }
+
+  .logo-text {
+    color: black;
+    float: right;
+    font-size: 30px;
+    margin-top: -7px;
+    margin-left: 5px;
+  }
+
+  .layout-nav {
+    width: 320px;
+    margin: 0 auto;
+    margin-right: 20px;
+  }
+
+  .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-item, .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-submenu {
+    color: black;
+  }
+
+</style>
+

front/components/LoginForm.vue

@@ -0,0 +1,99 @@
+<template>
+  <Card class="main-card">
+    <div class="form">
+      <Form ref="form" :model="form" :rules="rule">
+        <FormItem prop="email">
+          <i-input type="text" v-model="form.email" placeholder="Email">
+            <Icon type="ios-mail-outline" slot="prepend"></Icon>
+          </i-input>
+        </FormItem>
+        <FormItem prop="password">
+          <i-input type="password" v-model="form.password" placeholder="Hasło"
+                   @keyup.enter.native="handleSubmit('form')">
+            <Icon type="ios-lock-outline" slot="prepend"></Icon>
+          </i-input>
+        </FormItem>
+        <FormItem>
+          <Button type="primary" @click="handleSubmit('form')">Zaloguj się w systemie</Button>
+        </FormItem>
+      </Form>
+    </div>
+  </Card>
+</template>
+
+<script>
+
+  export default {
+    data() {
+      return {
+        form: {
+          email: '',
+          password: ''
+        },
+        rule: {
+          email: [
+            {
+              required: true,
+              message: 'Proszę podać email',
+              trigger: 'blur'
+            },
+            {
+              type: 'email',
+              message: 'Zły format!',
+              trigger: 'blur'
+            }
+          ],
+          password: [
+            {
+              required: true,
+              message: 'Proszę podać hasło',
+              trigger: 'blur'
+            },
+            {
+              type: 'string',
+              min: 8,
+              message: 'Hasło jest zbyt krótkie!',
+              trigger: 'blur'
+            }
+          ]
+        }
+      }
+    },
+    methods: {
+      handleSubmit(name) {
+        this.$refs[name].validate((valid) => {
+          if (valid) {
+            this.$auth.loginWith('local', {
+              data: {
+                email: this.form.email,
+                password: this.form.password
+              }
+            })
+              .then(() => {
+                this.$Message.success('Sukces!');
+              })
+              .catch((error) => {
+                this.$Message.error('Błąd!');
+                console.log(error);
+              })
+          } else {
+            this.$Message.error('Błąd!');
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+  .main-card {
+    margin: 0;
+    top: 50%
+  }
+
+  .form {
+    display: inline-block;
+  }
+
+</style>

front/components/Logo.vue

@@ -0,0 +1,33 @@
+<template>
+  <svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+      <path
+        d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
+        fill="#00C58E"
+      />
+      <path
+        d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
+        fill="#108775"
+      />
+      <path
+        d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
+        fill="#2F495E"
+        fill-rule="nonzero"
+      />
+    </g>
+  </svg>
+</template>
+<style>
+.NuxtLogo {
+  animation: 1s appear;
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>

front/components/README.md

@@ -0,0 +1,7 @@
+# COMPONENTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+The components directory contains your Vue.js Components.
+
+_Nuxt.js doesn't supercharge these components._

front/components/RegisterForm.vue

@@ -0,0 +1,104 @@
+<template>
+  <Card class="main-card">
+    <div class="form">
+      <Form ref="form" :model="form" :rules="rule">
+        <FormItem prop="email">
+          <i-input type="text" v-model="form.email" placeholder="Email">
+            <Icon type="ios-mail-outline" slot="prepend"></Icon>
+          </i-input>
+        </FormItem>
+        <FormItem prop="password">
+          <i-input type="password" v-model="form.password" placeholder="Hasło"
+                   @keyup.enter.native="handleSubmit('form')">
+            <Icon type="ios-lock-outline" slot="prepend"></Icon>
+          </i-input>
+        </FormItem>
+        <FormItem>
+          <Button type="primary" @click="handleSubmit('form')">Zarejestruj się</Button>
+        </FormItem>
+      </Form>
+    </div>
+  </Card>
+</template>
+
+<script>
+
+  export default {
+    data() {
+      return {
+        form: {
+          email: '',
+          password: ''
+        },
+        rule: {
+          email: [
+            {
+              required: true,
+              message: 'Proszę podać email',
+              trigger: 'blur'
+            },
+            {
+              type: 'email',
+              message: 'Zły format!',
+              trigger: 'blur'
+            }
+          ],
+          password: [
+            {
+              required: true,
+              message: 'Proszę podać hasło',
+              trigger: 'blur'
+            },
+            {
+              type: 'string',
+              min: 8,
+              message: 'Hasło jest zbyt krótkie!',
+              trigger: 'blur'
+            }
+          ]
+        }
+      }
+    },
+    methods: {
+      handleSubmit(name) {
+        this.$refs[name].validate((valid) => {
+          if (valid) {
+            this.$axios.post('/user/register', {
+              email: this.form.email,
+              password: this.form.password
+
+            })
+              .then(() => {
+                this.$Message.success('Sukces!');
+                this.$auth.loginWith('local', {
+                  data: {
+                    email: this.form.email,
+                    password: this.form.password
+                  }
+                })
+              })
+              .catch((error) => {
+                this.$Message.error('Błąd!');
+                console.log(error);
+              })
+          } else {
+            this.$Message.error('Błąd!');
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+  .main-card {
+    margin: 0;
+    top: 50%
+  }
+
+  .form {
+    display: inline-block;
+  }
+
+</style>

front/layouts/README.md

@@ -0,0 +1,7 @@
+# LAYOUTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Application Layouts.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

front/layouts/default.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="layout">
+      <Layout>
+        <ClearBowlHeader/>
+        <Content>
+          <nuxt/>
+        </Content>
+      </Layout>
+    </div>
+</template>
+<script>
+  import ClearBowlHeader from "../components/ClearBowlHeader"
+
+  export default {
+    components: {
+      'ClearBowlHeader': ClearBowlHeader
+    }
+  }
+</script>
+
+<style>
+  html {
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, sans-serif;
+    font-size: 16px;
+    word-spacing: 1px;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    box-sizing: border-box;
+  }
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  .button--green {
+    display: inline-block;
+    border-radius: 4px;
+    border: 1px solid #3b8070;
+    color: #3b8070;
+    text-decoration: none;
+    padding: 10px 30px;
+  }
+
+  .button--green:hover {
+    color: #fff;
+    background-color: #3b8070;
+  }
+
+  .button--grey {
+    display: inline-block;
+    border-radius: 4px;
+    border: 1px solid #35495e;
+    color: #35495e;
+    text-decoration: none;
+    padding: 10px 30px;
+    margin-left: 15px;
+  }
+
+  .button--grey:hover {
+    color: #fff;
+    background-color: #35495e;
+  }
+
+  .layout {
+    background: white;
+    position: relative;
+    border-radius: 4px;
+  }
+
+  .ivu-layout-content {
+    padding: 20px 50px;
+    background: white;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ivu-btn-primary {
+    background-color: #248200;
+  }
+
+  .ivu-btn-primary:hover {
+    background-color: #27a900;
+  }
+
+</style>

front/middleware/README.md

@@ -0,0 +1,8 @@
+# MIDDLEWARE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your application middleware.
+Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).

front/nuxt.config.js

@@ -0,0 +1,75 @@
+export default {
+  mode: 'universal',
+  /*
+  ** Headers of the page
+  */
+  head: {
+    title: process.env.npm_package_name || '',
+    meta: [
+      {charset: 'utf-8'},
+      {name: 'viewport', content: 'width=device-width, initial-scale=1'},
+      {hid: 'description', name: 'description', content: process.env.npm_package_description || ''}
+    ],
+    link: [
+      {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
+    ]
+  },
+  /*
+  ** Customize the progress-bar color
+  */
+  loading: {color: '#fff'},
+  /*
+  ** Global CSS
+  */
+  css: [
+    'view-design/dist/styles/iview.css'
+  ],
+  /*
+  ** Plugins to load before mounting the App
+  */
+  plugins: [
+    '@/plugins/view-design'
+  ],
+  /*
+  ** Nuxt.js dev-modules
+  */
+  buildModules: [],
+  /*
+  ** Nuxt.js modules
+  */
+  modules: [
+    '@nuxtjs/axios',
+    '@nuxtjs/auth'
+  ],
+  /*
+  ** Build configuration
+  */
+  build: {
+    /*
+    ** You can extend webpack config here
+    */
+    extend(config, ctx) {
+    },
+  },
+  router: {
+    middleware: ['auth']
+  },
+  auth: {
+    strategies: {
+      local: {
+        endpoints: {
+          login: { url: '/user/login', method: 'post', propertyName: 'data.token' },
+          logout: false,
+          user: { url: 'user/me', method: 'get', propertyName: 'data' }
+        },
+        tokenRequired: true,
+        tokenType: 'bearer'
+      }
+    }
+  },
+  axios:{
+    baseURL:"http://192.168.0.103:8000/api"
+  }
+
+
+}

front/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "clearbowl",
+  "version": "1.0.0",
+  "description": "ClearBowl",
+  "author": "Gabriela Pałka",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate"
+  },
+  "dependencies": {
+    "@nuxtjs/auth": "^4.8.4",
+    "@nuxtjs/axios": "^5.8.0",
+    "nuxt": "^2.0.0",
+    "view-design": "^4.0.2"
+  },
+  "devDependencies": {}
+}

front/pages/README.md

@@ -0,0 +1,6 @@
+# PAGES
+
+This directory contains your Application Views and Routes.
+The framework reads all the `*.vue` files inside this directory and creates the router of your application.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).

front/pages/index.vue

@@ -0,0 +1,43 @@
+<template>
+        <Card class="main-card">
+            <Row :gutter="16">
+              <Col span="8">
+                <Card class="cb-menu">
+                  <Icon type="ios-restaurant" size="100" color="white"/>
+                  <div style="text-align:center">
+                    <h3>Przepisy</h3>
+                  </div>
+                </Card>
+              </Col>
+              <Col span="8">
+                <Card class="cb-menu">
+                  <Icon type="ios-calculator" size="100" color="white"/>
+                  <div style="text-align:center">
+                    <h3>Kalkulator</h3>
+                  </div>
+                </Card>
+              </Col>
+              <Col span="8">
+                <Card class="cb-menu">
+                  <Icon type="ios-leaf" size="100" color="white"/>
+                  <div style="text-align:center">
+                    <h3>Dieta</h3>
+                  </div>
+                </Card>
+              </Col>
+            </Row>
+        </Card>
+</template>
+
+<style scoped>
+  .main-card {
+    margin: 0;
+    top: 50%
+  }
+
+  .cb-menu {
+    background: #248200;
+    color: white;
+  }
+
+</style>

front/pages/login.vue

@@ -0,0 +1,19 @@
+<template>
+  <LoginForm/>
+</template>
+
+<script>
+  import LoginForm from "../components/LoginForm";
+
+  export default {
+    name: "login",
+    auth: 'guest',
+    components: {
+      'LoginForm': LoginForm
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

front/pages/register.vue

@@ -0,0 +1,19 @@
+<template>
+  <RegisterForm/>
+</template>
+
+<script>
+  import RegisterForm from "../components/RegisterForm";
+
+  export default {
+    name: "register",
+    auth: 'guest',
+    components: {
+      'RegisterForm': RegisterForm
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

front/plugins/README.md

@@ -0,0 +1,7 @@
+# PLUGINS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).

front/plugins/view-design.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import iView from 'view-design'
+import locale from 'view-design/dist/locale/en-US' // Change locale, check node_modules/iview/dist/locale
+
+Vue.use(iView, {
+  locale
+})

front/static/README.md

@@ -0,0 +1,11 @@
+# STATIC
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your static files.
+Each file inside this directory is mapped to `/`.
+Thus you'd want to delete this README.md before deploying to production.
+
+Example: `/static/robots.txt` is mapped as `/robots.txt`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).

front/store/README.md

@@ -0,0 +1,10 @@
+# STORE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Vuex Store files.
+Vuex Store option is implemented in the Nuxt.js framework.
+
+Creating a file in this directory automatically activates the option in the framework.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).

front/store/index.js

@@ -0,0 +1,9 @@
+export const state = () => ({
+  counter: 0
+})
+
+export const mutations = {
+  increment (state) {
+    state.counter++
+  }
+}