[CLEAR-20] [CLEAR-21] Implemented logging in/out and registration of users
This commit is contained in:
Gabriela Pałka
parent
1257e0227f
commit
28cdb557dd
|
|
@ -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).
|
||||
|
|
@ -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).
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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._
|
||||
|
|
@ -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>
|
||||
|
|
@ -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).
|
||||
|
|
@ -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>
|
||||
|
|
@ -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).
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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": {}
|
||||
}
|
||||
|
|
@ -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).
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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).
|
||||
|
|
@ -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
|
||||
})
|
||||
Binary file not shown.
|
|
@ -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).
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -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).
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
export const state = () => ({
|
||||
counter: 0
|
||||
})
|
||||
|
||||
export const mutations = {
|
||||
increment (state) {
|
||||
state.counter++
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue