2020-1-CloudComputing / D_Team_Khuloud

Go to a project
Toggle navigation Toggle navigation pinning
최동원
8e66b6ce 1 parent 4a97cbaf

login/logout/signup

Expand all
Inline Side-by-side
Showing 14 changed files with 252 additions and 43 deletions
This diff is collapsed. Click to expand it.
......@@ -7,6 +7,7 @@
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
......@@ -18,6 +19,10 @@
"@vue/cli-plugin-router": "~4.3.0",
"@vue/cli-plugin-vuex": "~4.3.0",
"@vue/cli-service": "~4.3.0",
"eslint": "^7.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "~2.0.5",
......
......@@ -3,7 +3,7 @@
</template>
<script>
import ToolView from './views/ToolView'
import ToolView from './components/ToolView'
export default {
data() {
......
import axios from 'axios'
const instance = axios.create({
baseURL: process.env.VUE_APP_API_URL,
});
function registerUser(userData) {
return instance.post('RegistUser', userData);
}
function loginUser(userData) {
return instance.post('login', userData);
}
export { registerUser, loginUser };
\ No newline at end of file
......@@ -22,7 +22,7 @@
>
<v-toolbar-title>KhuLoud</v-toolbar-title>
<v-spacer></v-spacer>
<v-tooltip bottom>
<!-- <v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn
:href="source"
......@@ -35,14 +35,15 @@
</v-btn>
</template>
<span>Source</span>
</v-tooltip>
</v-tooltip> -->
</v-toolbar>
<v-card-text>
<v-form>
<v-form @submit.prevent="submitForm">
<v-text-field
label="Login"
name="login"
label="ID"
name="ID"
type="text"
v-model="id"
></v-text-field>
<v-text-field
......@@ -50,13 +51,14 @@
label="Password"
name="password"
type="password"
v-model="password"
></v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" @click = "$router.push({name: 'RegistUser'})">Regist</v-btn>
<v-btn color="primary" router :to="{name: 'Main'}" exact>Login</v-btn>
<!-- <v-btn color="primary" @click = "$router.push({name: 'RegistUser'})">Regist</v-btn> -->
<v-btn color="primary" :disabled="!id || !password" router :to="{name: 'Main'}" exact>Login</v-btn>
</v-card-actions>
</v-card>
</v-col>
......@@ -67,9 +69,36 @@
</template>
<script>
export default {
props: {
source: String,
data() {
return {
id: '',
password: ''
}
},
methods: {
async submitForm(){
try {
const usderData = {
id: this.id,
password: this.password
};
const { data } = await loginUser(userData);
this.$store.commit('setid', data.user.userid);
this.$router.push('/main');
} catch (error) {
console.log(error.response.data);
} finally {
this.initForm();
}
}
},
initForm(){
this.id ='';
this.password='';
}
}
</script>
......
......@@ -22,32 +22,18 @@
>
<v-toolbar-title>KhuLoud</v-toolbar-title>
<v-spacer></v-spacer>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn
:href="source"
icon
large
target="_blank"
v-on="on"
>
<v-icon>mdi-code-tags</v-icon>
</v-btn>
</template>
<span>Source</span>
</v-tooltip>
</v-toolbar>
<v-card-text>
<v-form>
<v-form @submit.prevent="submitForm">
<v-text-field
label="ID"
v-model="Id"
v-model="id"
name="ID"
type="text"
></v-text-field>
<v-text-field
v-model="Password"
v-model="password"
label="Password"
name="password"
type="password"
......@@ -55,7 +41,7 @@
<v-text-field
label="Name"
v-model="Name"
v-model="name"
name="name"
type="name"
></v-text-field>
......@@ -66,11 +52,17 @@
:rules="emailRules"
name="Email"
></v-text-field>
<v-text-field
label="Contact"
v-model="contact"
name="Contact">
</v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" @click = "$router.push({name: 'Login'})">Regist</v-btn>
<v-btn color="primary" :disabled="!id || !password || !name || !email || !contact" @click = "$router.push({name: 'Login'})">Regist</v-btn>
</v-card-actions>
</v-card>
</v-col>
......@@ -82,8 +74,41 @@
<script>
export default {
props: {
source: String,
data() {
return {
id: '',
password: '',
name: '',
email: '',
contact: '',
}
},
methods: {
async submitForm() {
try {
const usderData = {
id: this.id,
password: this.password,
name: this.name,
email: this.email,
contact: this.contact
};
const { data } = await registerUser(userData);
console.log("회원가입 완료");
this.$router.push('/');
} catch (error) {
console.log(error.response.data);
} finally{
this.initForm();
}
},
initForm(){
this.id = '';
this.password ='';
this.name = '';
this.email = '';
this.contact = '';
}
}
}
</script>
......
......@@ -81,12 +81,16 @@
</v-list>
</v-navigation-drawer>
<v-app-bar
:clipped-left="$vuetify.breakpoint.lgAndUp"
app
color="blue darken-3"
dark
>
<!-- <template v-if="isUserLogin">
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
</template> -->
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title
style="width: 300px"
......@@ -94,6 +98,7 @@
>
<span class="hidden-sm-and-down">KhuLoud</span>
</v-toolbar-title>
<template v-if="isUserLogin">
<v-text-field
flat
solo-inverted
......@@ -102,13 +107,36 @@
label="전체 검색"
class="hidden-sm-and-down"
></v-text-field>
</template>
<template v-else>
<div></div>
</template>
<!-- <v-text-field
v-if="isUserLogin"
flat
solo-inverted
hide-details
prepend-inner-icon="mdi-magnify"
label="전체 검색"
class="hidden-sm-and-down"
></v-text-field> -->
<v-spacer></v-spacer>
<template v-if="isUserLogin">
<v-btn icon @click = "logoutUser">
<v-icon>mid-login</v-icon>
</v-btn>
</template>
<template v-else>
<v-btn icon @click = "$router.push({name: 'Login'})">
<v-icon>mdi-login</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-bell</v-icon>
<v-btn icon @click="$router.push({name: 'RegistUser'})">
<v-icon>mdi-account</v-icon>
</v-btn>
</template>
<!-- <v-btn icon @click = "$router.push({name: 'Login'})">
<v-icon>mdi-login</v-icon>
</v-btn> -->
</v-app-bar>
<v-content>
<v-container
......@@ -117,6 +145,7 @@
<router-view></router-view>
</v-container>
</v-content>
<template v-if="isUserLogin">
<v-btn
bottom
color="pink"
......@@ -128,6 +157,18 @@
>
<v-icon>mdi-plus</v-icon>
</v-btn>
</template>
<!-- <v-btn
bottom
color="pink"
dark
fab
fixed
right
@click="dialog = !dialog"
>
<v-icon>mdi-plus</v-icon>
</v-btn> -->
<v-dialog
v-model="dialog"
width="800px"
......@@ -215,9 +256,6 @@
<script>
export default {
props: {
source: String,
},
data: () => ({
dialog: false,
drawer: null,
......@@ -230,9 +268,19 @@ export default {
{ icon: 'mdi-settings', text: '설정' },
{ icon: 'mdi-message', text: '피드백' },
{ icon: 'mdi-help-circle', text: '도움말' },
],
}),
computed: {
isUserLogin(){
return this.$store.getters.isUserLogin;
},
},
methods: {
logoutUser(){
this.$store.commit('clearid');
this.$router.push('/');
}
}
}
</script>
......
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store'
import router from './routes/index'
import store from './store/index'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
......
......@@ -40,12 +40,12 @@ export default new VueRouter ({
{
path: '/registuser',
name: 'RegistUser',
component: () => import('../views/RegistUser.vue')
component: () => import('../views/SignupPage.vue')
},
{
path: '/login',
name: 'Login',
component: () => import('../views/Login.vue')
component: () => import('../views/LoginPage.vue')
},
{
path:'/file',
......
......@@ -5,11 +5,19 @@ Vue.use(Vuex)
export default new Vuex.Store({
state: {
id: '',
},
mutations: {
setId(state, userid){
state.id = id;
},
actions: {
clearid(state){
state.id= '';
}
},
modules: {
getters: {
isLogin(state){
return state.id !== '';
}
}
})
......
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
export { validateEmail };
\ No newline at end of file
<template>
<div>
<LoginForm></LoginForm>
</div>
</template>
<script>
import LoginForm from '../components/LoginForm'
export default {
components: {
LoginForm,
}
}
</script>
<style>
</style>
\ No newline at end of file
<template>
<div>
<SignupForm></SignupForm>
</div>
</template>
<script>
import SignupForm from '../components/SignupForm'
export default {
components: {
SignupForm,
}
}
</script>
<style>
</style>
\ No newline at end of file
{
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"axios": {
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"requires": {
"follow-redirects": "1.5.10"
}
},
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"requires": {
"ms": "2.0.0"
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"requires": {
"debug": "=3.1.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
}
}
}