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 262 additions and 53 deletions
This diff is collapsed. Click to expand it.
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
7 "build": "vue-cli-service build" 7 "build": "vue-cli-service build"
8 }, 8 },
9 "dependencies": { 9 "dependencies": {
10 + "axios": "^0.19.2",
10 "core-js": "^3.6.4", 11 "core-js": "^3.6.4",
11 "vue": "^2.6.11", 12 "vue": "^2.6.11",
12 "vue-router": "^3.1.6", 13 "vue-router": "^3.1.6",
...@@ -18,6 +19,10 @@ ...@@ -18,6 +19,10 @@
18 "@vue/cli-plugin-router": "~4.3.0", 19 "@vue/cli-plugin-router": "~4.3.0",
19 "@vue/cli-plugin-vuex": "~4.3.0", 20 "@vue/cli-plugin-vuex": "~4.3.0",
20 "@vue/cli-service": "~4.3.0", 21 "@vue/cli-service": "~4.3.0",
22 + "eslint": "^7.1.0",
23 + "eslint-config-prettier": "^6.11.0",
24 + "eslint-plugin-prettier": "^3.1.3",
25 + "eslint-plugin-vue": "^6.2.2",
21 "sass": "^1.19.0", 26 "sass": "^1.19.0",
22 "sass-loader": "^8.0.0", 27 "sass-loader": "^8.0.0",
23 "vue-cli-plugin-vuetify": "~2.0.5", 28 "vue-cli-plugin-vuetify": "~2.0.5",
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 </template> 3 </template>
4 4
5 <script> 5 <script>
6 -import ToolView from './views/ToolView' 6 +import ToolView from './components/ToolView'
7 7
8 export default { 8 export default {
9 data() { 9 data() {
...@@ -15,4 +15,4 @@ import ToolView from './views/ToolView' ...@@ -15,4 +15,4 @@ import ToolView from './views/ToolView'
15 ToolView, 15 ToolView,
16 } 16 }
17 } 17 }
18 -</script> 18 +</script>
...\ No newline at end of file ...\ No newline at end of file
......
1 +import axios from 'axios'
2 +
3 +const instance = axios.create({
4 + baseURL: process.env.VUE_APP_API_URL,
5 +});
6 +
7 +function registerUser(userData) {
8 + return instance.post('RegistUser', userData);
9 + }
10 +
11 + function loginUser(userData) {
12 + return instance.post('login', userData);
13 + }
14 +
15 + export { registerUser, loginUser };
...\ No newline at end of file ...\ No newline at end of file
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 > 22 >
23 <v-toolbar-title>KhuLoud</v-toolbar-title> 23 <v-toolbar-title>KhuLoud</v-toolbar-title>
24 <v-spacer></v-spacer> 24 <v-spacer></v-spacer>
25 - <v-tooltip bottom> 25 + <!-- <v-tooltip bottom>
26 <template v-slot:activator="{ on }"> 26 <template v-slot:activator="{ on }">
27 <v-btn 27 <v-btn
28 :href="source" 28 :href="source"
...@@ -35,14 +35,15 @@ ...@@ -35,14 +35,15 @@
35 </v-btn> 35 </v-btn>
36 </template> 36 </template>
37 <span>Source</span> 37 <span>Source</span>
38 - </v-tooltip> 38 + </v-tooltip> -->
39 </v-toolbar> 39 </v-toolbar>
40 <v-card-text> 40 <v-card-text>
41 - <v-form> 41 + <v-form @submit.prevent="submitForm">
42 <v-text-field 42 <v-text-field
43 - label="Login" 43 + label="ID"
44 - name="login" 44 + name="ID"
45 type="text" 45 type="text"
46 + v-model="id"
46 ></v-text-field> 47 ></v-text-field>
47 48
48 <v-text-field 49 <v-text-field
...@@ -50,13 +51,14 @@ ...@@ -50,13 +51,14 @@
50 label="Password" 51 label="Password"
51 name="password" 52 name="password"
52 type="password" 53 type="password"
54 + v-model="password"
53 ></v-text-field> 55 ></v-text-field>
54 </v-form> 56 </v-form>
55 </v-card-text> 57 </v-card-text>
56 <v-card-actions> 58 <v-card-actions>
57 <v-spacer></v-spacer> 59 <v-spacer></v-spacer>
58 - <v-btn color="primary" @click = "$router.push({name: 'RegistUser'})">Regist</v-btn> 60 + <!-- <v-btn color="primary" @click = "$router.push({name: 'RegistUser'})">Regist</v-btn> -->
59 - <v-btn color="primary" router :to="{name: 'Main'}" exact>Login</v-btn> 61 + <v-btn color="primary" :disabled="!id || !password" router :to="{name: 'Main'}" exact>Login</v-btn>
60 </v-card-actions> 62 </v-card-actions>
61 </v-card> 63 </v-card>
62 </v-col> 64 </v-col>
...@@ -67,9 +69,36 @@ ...@@ -67,9 +69,36 @@
67 </template> 69 </template>
68 70
69 <script> 71 <script>
72 +
73 +
70 export default { 74 export default {
71 - props: { 75 + data() {
72 - source: String, 76 + return {
73 - }, 77 + id: '',
78 + password: ''
79 + }
80 + },
81 + methods: {
82 + async submitForm(){
83 + try {
84 + const usderData = {
85 + id: this.id,
86 + password: this.password
87 + };
88 + const { data } = await loginUser(userData);
89 + this.$store.commit('setid', data.user.userid);
90 + this.$router.push('/main');
91 +
92 + } catch (error) {
93 + console.log(error.response.data);
94 + } finally {
95 + this.initForm();
96 + }
97 + }
98 + },
99 + initForm(){
100 + this.id ='';
101 + this.password='';
102 + }
74 } 103 }
75 </script> 104 </script>
......
...@@ -22,32 +22,18 @@ ...@@ -22,32 +22,18 @@
22 > 22 >
23 <v-toolbar-title>KhuLoud</v-toolbar-title> 23 <v-toolbar-title>KhuLoud</v-toolbar-title>
24 <v-spacer></v-spacer> 24 <v-spacer></v-spacer>
25 - <v-tooltip bottom>
26 - <template v-slot:activator="{ on }">
27 - <v-btn
28 - :href="source"
29 - icon
30 - large
31 - target="_blank"
32 - v-on="on"
33 - >
34 - <v-icon>mdi-code-tags</v-icon>
35 - </v-btn>
36 - </template>
37 - <span>Source</span>
38 - </v-tooltip>
39 </v-toolbar> 25 </v-toolbar>
40 <v-card-text> 26 <v-card-text>
41 - <v-form> 27 + <v-form @submit.prevent="submitForm">
42 <v-text-field 28 <v-text-field
43 label="ID" 29 label="ID"
44 - v-model="Id" 30 + v-model="id"
45 name="ID" 31 name="ID"
46 type="text" 32 type="text"
47 ></v-text-field> 33 ></v-text-field>
48 34
49 <v-text-field 35 <v-text-field
50 - v-model="Password" 36 + v-model="password"
51 label="Password" 37 label="Password"
52 name="password" 38 name="password"
53 type="password" 39 type="password"
...@@ -55,7 +41,7 @@ ...@@ -55,7 +41,7 @@
55 41
56 <v-text-field 42 <v-text-field
57 label="Name" 43 label="Name"
58 - v-model="Name" 44 + v-model="name"
59 name="name" 45 name="name"
60 type="name" 46 type="name"
61 ></v-text-field> 47 ></v-text-field>
...@@ -66,11 +52,17 @@ ...@@ -66,11 +52,17 @@
66 :rules="emailRules" 52 :rules="emailRules"
67 name="Email" 53 name="Email"
68 ></v-text-field> 54 ></v-text-field>
55 +
56 + <v-text-field
57 + label="Contact"
58 + v-model="contact"
59 + name="Contact">
60 + </v-text-field>
69 </v-form> 61 </v-form>
70 </v-card-text> 62 </v-card-text>
71 <v-card-actions> 63 <v-card-actions>
72 <v-spacer></v-spacer> 64 <v-spacer></v-spacer>
73 - <v-btn color="primary" @click = "$router.push({name: 'Login'})">Regist</v-btn> 65 + <v-btn color="primary" :disabled="!id || !password || !name || !email || !contact" @click = "$router.push({name: 'Login'})">Regist</v-btn>
74 </v-card-actions> 66 </v-card-actions>
75 </v-card> 67 </v-card>
76 </v-col> 68 </v-col>
...@@ -82,8 +74,41 @@ ...@@ -82,8 +74,41 @@
82 74
83 <script> 75 <script>
84 export default { 76 export default {
85 - props: { 77 + data() {
86 - source: String, 78 + return {
87 - }, 79 + id: '',
80 + password: '',
81 + name: '',
82 + email: '',
83 + contact: '',
84 + }
85 + },
86 + methods: {
87 + async submitForm() {
88 + try {
89 + const usderData = {
90 + id: this.id,
91 + password: this.password,
92 + name: this.name,
93 + email: this.email,
94 + contact: this.contact
95 + };
96 + const { data } = await registerUser(userData);
97 + console.log("회원가입 완료");
98 + this.$router.push('/');
99 + } catch (error) {
100 + console.log(error.response.data);
101 + } finally{
102 + this.initForm();
103 + }
104 + },
105 + initForm(){
106 + this.id = '';
107 + this.password ='';
108 + this.name = '';
109 + this.email = '';
110 + this.contact = '';
111 + }
112 + }
88 } 113 }
89 </script> 114 </script>
......
...@@ -80,6 +80,7 @@ ...@@ -80,6 +80,7 @@
80 </v-list-item> 80 </v-list-item>
81 </v-list> 81 </v-list>
82 </v-navigation-drawer> 82 </v-navigation-drawer>
83 +
83 84
84 <v-app-bar 85 <v-app-bar
85 :clipped-left="$vuetify.breakpoint.lgAndUp" 86 :clipped-left="$vuetify.breakpoint.lgAndUp"
...@@ -87,6 +88,9 @@ ...@@ -87,6 +88,9 @@
87 color="blue darken-3" 88 color="blue darken-3"
88 dark 89 dark
89 > 90 >
91 + <!-- <template v-if="isUserLogin">
92 + <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
93 + </template> -->
90 <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon> 94 <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
91 <v-toolbar-title 95 <v-toolbar-title
92 style="width: 300px" 96 style="width: 300px"
...@@ -94,7 +98,8 @@ ...@@ -94,7 +98,8 @@
94 > 98 >
95 <span class="hidden-sm-and-down">KhuLoud</span> 99 <span class="hidden-sm-and-down">KhuLoud</span>
96 </v-toolbar-title> 100 </v-toolbar-title>
97 - <v-text-field 101 + <template v-if="isUserLogin">
102 + <v-text-field
98 flat 103 flat
99 solo-inverted 104 solo-inverted
100 hide-details 105 hide-details
...@@ -102,13 +107,36 @@ ...@@ -102,13 +107,36 @@
102 label="전체 검색" 107 label="전체 검색"
103 class="hidden-sm-and-down" 108 class="hidden-sm-and-down"
104 ></v-text-field> 109 ></v-text-field>
110 + </template>
111 + <template v-else>
112 + <div></div>
113 + </template>
114 + <!-- <v-text-field
115 + v-if="isUserLogin"
116 + flat
117 + solo-inverted
118 + hide-details
119 + prepend-inner-icon="mdi-magnify"
120 + label="전체 검색"
121 + class="hidden-sm-and-down"
122 + ></v-text-field> -->
105 <v-spacer></v-spacer> 123 <v-spacer></v-spacer>
106 - <v-btn icon @click = "$router.push({name: 'Login'})"> 124 + <template v-if="isUserLogin">
125 + <v-btn icon @click = "logoutUser">
126 + <v-icon>mid-login</v-icon>
127 + </v-btn>
128 + </template>
129 + <template v-else>
130 + <v-btn icon @click = "$router.push({name: 'Login'})">
131 + <v-icon>mdi-login</v-icon>
132 + </v-btn>
133 + <v-btn icon @click="$router.push({name: 'RegistUser'})">
134 + <v-icon>mdi-account</v-icon>
135 + </v-btn>
136 + </template>
137 + <!-- <v-btn icon @click = "$router.push({name: 'Login'})">
107 <v-icon>mdi-login</v-icon> 138 <v-icon>mdi-login</v-icon>
108 - </v-btn> 139 + </v-btn> -->
109 - <v-btn icon>
110 - <v-icon>mdi-bell</v-icon>
111 - </v-btn>
112 </v-app-bar> 140 </v-app-bar>
113 <v-content> 141 <v-content>
114 <v-container 142 <v-container
...@@ -117,7 +145,20 @@ ...@@ -117,7 +145,20 @@
117 <router-view></router-view> 145 <router-view></router-view>
118 </v-container> 146 </v-container>
119 </v-content> 147 </v-content>
120 - <v-btn 148 + <template v-if="isUserLogin">
149 + <v-btn
150 + bottom
151 + color="pink"
152 + dark
153 + fab
154 + fixed
155 + right
156 + @click="dialog = !dialog"
157 + >
158 + <v-icon>mdi-plus</v-icon>
159 + </v-btn>
160 + </template>
161 + <!-- <v-btn
121 bottom 162 bottom
122 color="pink" 163 color="pink"
123 dark 164 dark
...@@ -127,7 +168,7 @@ ...@@ -127,7 +168,7 @@
127 @click="dialog = !dialog" 168 @click="dialog = !dialog"
128 > 169 >
129 <v-icon>mdi-plus</v-icon> 170 <v-icon>mdi-plus</v-icon>
130 - </v-btn> 171 + </v-btn> -->
131 <v-dialog 172 <v-dialog
132 v-model="dialog" 173 v-model="dialog"
133 width="800px" 174 width="800px"
...@@ -215,9 +256,6 @@ ...@@ -215,9 +256,6 @@
215 256
216 <script> 257 <script>
217 export default { 258 export default {
218 - props: {
219 - source: String,
220 - },
221 data: () => ({ 259 data: () => ({
222 dialog: false, 260 dialog: false,
223 drawer: null, 261 drawer: null,
...@@ -230,9 +268,19 @@ export default { ...@@ -230,9 +268,19 @@ export default {
230 { icon: 'mdi-settings', text: '설정' }, 268 { icon: 'mdi-settings', text: '설정' },
231 { icon: 'mdi-message', text: '피드백' }, 269 { icon: 'mdi-message', text: '피드백' },
232 { icon: 'mdi-help-circle', text: '도움말' }, 270 { icon: 'mdi-help-circle', text: '도움말' },
233 -
234 ], 271 ],
235 }), 272 }),
273 + computed: {
274 + isUserLogin(){
275 + return this.$store.getters.isUserLogin;
276 + },
277 + },
278 + methods: {
279 + logoutUser(){
280 + this.$store.commit('clearid');
281 + this.$router.push('/');
282 + }
283 + }
236 } 284 }
237 </script> 285 </script>
238 286
......
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import App from './App.vue' 2 import App from './App.vue'
3 -import router from './router/index' 3 +import router from './routes/index'
4 -import store from './store' 4 +import store from './store/index'
5 import vuetify from './plugins/vuetify'; 5 import vuetify from './plugins/vuetify';
6 6
7 Vue.config.productionTip = false 7 Vue.config.productionTip = false
......
...@@ -40,12 +40,12 @@ export default new VueRouter ({ ...@@ -40,12 +40,12 @@ export default new VueRouter ({
40 { 40 {
41 path: '/registuser', 41 path: '/registuser',
42 name: 'RegistUser', 42 name: 'RegistUser',
43 - component: () => import('../views/RegistUser.vue') 43 + component: () => import('../views/SignupPage.vue')
44 }, 44 },
45 { 45 {
46 path: '/login', 46 path: '/login',
47 name: 'Login', 47 name: 'Login',
48 - component: () => import('../views/Login.vue') 48 + component: () => import('../views/LoginPage.vue')
49 }, 49 },
50 { 50 {
51 path:'/file', 51 path:'/file',
......
...@@ -5,11 +5,19 @@ Vue.use(Vuex) ...@@ -5,11 +5,19 @@ Vue.use(Vuex)
5 5
6 export default new Vuex.Store({ 6 export default new Vuex.Store({
7 state: { 7 state: {
8 + id: '',
8 }, 9 },
9 mutations: { 10 mutations: {
11 + setId(state, userid){
12 + state.id = id;
13 + },
14 + clearid(state){
15 + state.id= '';
16 + }
10 }, 17 },
11 - actions: { 18 + getters: {
12 - }, 19 + isLogin(state){
13 - modules: { 20 + return state.id !== '';
21 + }
14 } 22 }
15 }) 23 })
......
1 +function validateEmail(email) {
2 + 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,}))$/;
3 + return re.test(String(email).toLowerCase());
4 + }
5 +
6 + export { validateEmail };
7 +
...\ No newline at end of file ...\ No newline at end of file
1 +<template>
2 + <div>
3 + <LoginForm></LoginForm>
4 + </div>
5 +</template>
6 +
7 +<script>
8 +import LoginForm from '../components/LoginForm'
9 +
10 +export default {
11 + components: {
12 + LoginForm,
13 + }
14 +}
15 +</script>
16 +
17 +<style>
18 +
19 +</style>
...\ No newline at end of file ...\ No newline at end of file
1 +<template>
2 + <div>
3 + <SignupForm></SignupForm>
4 + </div>
5 +</template>
6 +
7 +<script>
8 +import SignupForm from '../components/SignupForm'
9 +export default {
10 + components: {
11 + SignupForm,
12 + }
13 +}
14 +</script>
15 +
16 +<style>
17 +
18 +</style>
...\ No newline at end of file ...\ No newline at end of file
1 +{
2 + "requires": true,
3 + "lockfileVersion": 1,
4 + "dependencies": {
5 + "axios": {
6 + "version": "0.19.2",
7 + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
8 + "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
9 + "requires": {
10 + "follow-redirects": "1.5.10"
11 + }
12 + },
13 + "debug": {
14 + "version": "3.1.0",
15 + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
16 + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
17 + "requires": {
18 + "ms": "2.0.0"
19 + }
20 + },
21 + "follow-redirects": {
22 + "version": "1.5.10",
23 + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
24 + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
25 + "requires": {
26 + "debug": "=3.1.0"
27 + }
28 + },
29 + "ms": {
30 + "version": "2.0.0",
31 + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
32 + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
33 + }
34 + }
35 +}