Skip to content

Commit 8634660

Browse files
hasyrailshasyrails
committed
#139 / ユーザー登録・ログインフォームの変更
その他スタイル微調整
1 parent 1a1c4e3 commit 8634660

File tree

12 files changed

+113
-33
lines changed

12 files changed

+113
-33
lines changed

‎app/assets/stylesheets/application.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,7 @@
2525
overflow: auto;
2626
}
2727

28-
html {
29-
background: #EEFFFF;
28+
html {
3029
font-family: 'Avenir', Helvetica, Arial, 'system-ui', sans-serif;
3130
-webkit-font-smoothing: antialiased;
3231
-moz-osx-font-smoothing: grayscale;

‎app/javascript/app.vue

+10-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,16 @@ export default {
1818
},
1919
components: {
2020
Header
21-
}
21+
},
22+
beforeCreate(){
23+
const existingSession = this.$cookie.get('session')
24+
25+
if (existingSession && existingSession.length) { // A string at this point
26+
const session = JSON.parse(existingSession)
27+
this.$store.commit('user', session.user)
28+
this.$store.commit('auth', session.tokens)
29+
}
30+
},
2231
}
2332
</script>
2433

‎app/javascript/components/ConfirmForm.vue

+9-4
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
<div>ご入力内容</div>
44
<div class="flex-contents">
55
<div class="confirm-contents">
6-
<div>ユーザー名: {{ form.userName }} {{ form.lastName }}</div>
6+
<div>ユーザー名: {{ form.name }} </div>
77
<div>メールアドレス: {{ form.email }}</div>
88
<div>パスワード: {{ form.password }}</div>
9-
<div>パスワード（確認）: {{ form.passwordConfirmation }}</div>
9+
<div>パスワード（確認）: {{ form.password_confirmation }}</div>
1010
</div>
11-
<div class="btn btn-green register-btn">登録する</div>
11+
<div class="btn btn-green register-btn" @click="register">登録する</div>
1212
</div>
1313
</div>
1414
</template>
@@ -18,7 +18,12 @@ export default {
1818
name: 'ConfirmForm',
1919
props:{
2020
form: Object
21-
}
21+
},
22+
methods:{
23+
register(){
24+
this.$emit('clickedRegisterButton', this.form)
25+
}
26+
}
2227
}
2328
</script>
2429

‎app/javascript/components/Header.vue

+17-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="header">
2+
<div class="app-header">
33
<div class="app-header-contents">
44
<router-link to="/">
55
<div class="app-header-title">Header</div>
@@ -23,6 +23,20 @@
2323
</script>
2424

2525
<style scoped>
26+
.app-header{
27+
background: #AFEEEE;
28+
height: 150px;
29+
color: black;
30+
font-style: italic;
31+
/* text-align: left; */
32+
/* padding: 20px; */
33+
position:absolute;
34+
top: 0px;
35+
width:100%;
36+
position: fixed;
37+
/* z-index: 2; */
38+
}
39+
2640
.app-header-contents{
2741
display:flex;
2842
}
@@ -36,9 +50,9 @@
3650
}
3751
.app-header-link{
3852
display:flex;
39-
margin-left:70%;
53+
margin-left:60%;
4054
margin-right:10px;
41-
margin-top:30px;
55+
margin-top:40px;
4256
float: right;
4357
font-size: 30px;
4458
font-weight: 30px;

‎app/javascript/components/LoginForm.vue

+8-2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
<label for="Email">パスワード</label>
1010
<input type="text" class="form-control form-control-lg" v-model="password" placeholder="Enter Password">
1111
</div>
12+
<div class="form-group">
13+
<label for="Email">パスワード(確認)</label>
14+
<input type="text" class="form-control form-control-lg" v-model="password_confirmation" placeholder="Enter Password">
15+
</div>
1216
</form>
1317
</div>
1418
</template>
@@ -19,14 +23,16 @@ export default {
1923
data(){
2024
return{
2125
email: null,
22-
password: null
26+
password: null,
27+
// password_confirmation: null
2328
}
2429
},
2530
methods: {
2631
submit(){
2732
this.$emit('update',{
2833
email: this.email,
29-
password: this.password
34+
password: this.password,
35+
// password_confirmation: this.password_confirmation
3036
});
3137
}
3238
}

‎app/javascript/components/PasswordForm.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</div>
99
<div class="form-group">
1010
<label for="userName">パスワード(確認)</label>
11-
<input type="text" class="form-control form-control-lg" v-model="passwordConfirmation" placeholder="Enter Password Confirmation">
11+
<input type="text" class="form-control form-control-lg" v-model="password_confirmation" placeholder="Enter Password Confirmation">
1212
</div>
1313
</form>
1414
</div>
@@ -20,14 +20,14 @@ export default {
2020
data(){
2121
return{
2222
password: null,
23-
passwordConfirmation: null
23+
password_confirmation: null
2424
}
2525
},
2626
methods: {
2727
submit(){
2828
this.$emit('update',{
29-
password: this.passwordConfirmation,
30-
passwordConfirmation: this.passwordConfirmation
29+
password: this.password,
30+
password_confirmation: this.password_confirmation
3131
});
3232
}
3333
}

‎app/javascript/components/UserNameForm.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<h2>ユーザー名を入力してください</h2>
55
<div class="form-group">
66
<label for="userName">ユーザー名</label>
7-
<input type="text" class="form-control form-control-lg" v-model="userName" placeholder="Enter User Name">
7+
<input type="text" class="form-control form-control-lg" v-model="name" placeholder="Enter User Name">
88
</div>
99
</form>
1010
</div>
@@ -15,13 +15,13 @@ export default {
1515
name: 'UserNameForm',
1616
data(){
1717
return{
18-
userName: null
18+
name: null
1919
}
2020
},
2121
methods: {
2222
submit(){
2323
this.$emit('update',{
24-
userName: this.userName
24+
name: this.name
2525
});
2626
}
2727
}

‎app/javascript/pages/Login.vue

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="register">
2+
<div class="register-page">
33
<div class="row">
44
<div class="col-md-8">
55
<h1 class="register-step">ログイン</h1>
@@ -8,12 +8,14 @@
88
</keep-alive>
99
</div>
1010
</div>
11-
<div class="btn btn-primary login-btn">ログイン</div>
11+
<div class="btn btn-primary login-btn" @click="login">ログイン</div>
1212
<!-- <pre><code>{{form}}</code></pre> -->
1313
</div>
1414
</template>
1515

1616
<script>
17+
import axios from 'axios'
18+
1719
import LoginForm from '../components/LoginForm'
1820
1921
import ArrowRightThick from 'vue-material-design-icons/ArrowRightThick.vue'
@@ -26,6 +28,7 @@ export default {
2628
form: {
2729
email: null,
2830
password: null,
31+
// password_confirmation: null,
2932
}
3033
}
3134
},
@@ -38,12 +41,19 @@ export default {
3841
updateForm(formData){
3942
Object.assign(this.form, formData);
4043
},
44+
async login(){
45+
await axios.post('api/v1/auth/sign_in', this.form)
46+
.then(res => {
47+
this.$store.commit('auth', response.data)
48+
})
49+
.catch(error => console.log(error.response));
50+
}
4151
}
4252
}
4353
</script>
4454

4555
<style scoped>
46-
.register{
56+
.register-page{
4757
width: 80%;
4858
margin-right: 10%;
4959
margin-left: 10%;

‎app/javascript/pages/Register.vue

+22-8
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@
88
<UserNameForm v-if="stepNumber===1" @update="updateForm"></UserNameForm>
99
<EmailForm v-if="stepNumber===2" @update="updateForm"></EmailForm>
1010
<PasswordForm v-if="stepNumber===3" @update="updateForm"></PasswordForm>
11-
<ConfirmForm :form="form" v-if="stepNumber===4" @update="updateForm"></ConfirmForm>
11+
<ConfirmForm
12+
:form="form"
13+
v-if="stepNumber===4"
14+
@update="updateForm" @clickedRegisterButton="register"></ConfirmForm >
1215
</keep-alive>
1316
<div class="register-step-button">
1417
<div class="register-step-prev-button" v-if="stepNumber != 1">
@@ -35,16 +38,18 @@ import ConfirmForm from '../components/ConfirmForm'
3538
import ArrowRightThick from 'vue-material-design-icons/ArrowRightThick.vue'
3639
import ArrowLeftThick from 'vue-material-design-icons/ArrowLeftThick.vue'
3740
41+
import axios from 'axios'
42+
3843
export default {
3944
name: 'Register',
4045
data(){
4146
return{
4247
stepNumber: 1,
4348
form: {
44-
userName: null,
49+
name: null,
4550
email: null,
4651
password: null,
47-
passwordConfirmation: null
52+
password_confirmation: null
4853
}
4954
}
5055
},
@@ -65,17 +70,26 @@ export default {
6570
},
6671
nextStep:function(){
6772
this.stepNumber++;
68-
},
73+
},
74+
async register(){
75+
await axios.post('api/v1/auth', this.form)
76+
.then(res => {
77+
this.$store.commit('user', response.data)
78+
})
79+
.catch(error => console.log(error.response));
80+
}
6981
}
7082
}
7183
</script>
7284

7385
<style scoped>
7486
.register{
75-
width: 80%;
76-
margin-right: 10%;
77-
margin-left: 10%;
78-
margin-top: 5%;
87+
/* background: #EEFFFF; */
88+
width: 100%;
89+
height: 100%;
90+
margin-right: 20%;
91+
margin-left: 20%;
92+
margin-top: 15%;
7993
}
8094
8195
.register-step {

‎app/javascript/pages/Top.vue

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ p {
3131
}
3232
3333
.app-area{
34+
background: #EEFFFF;
3435
width: 150%;
3536
display:flex;
3637
flex-direction: column;

‎app/views/layouts/application.html.erb

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<%= csrf_meta_tags %>
66
<%= csp_meta_tag %>
77

8-
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9-
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
8+
<%# <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9+
<%# <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
1010
</head>
1111

1212
<body>

‎yarn.lock

+23-1
Original file line numberDiff line numberDiff line change
@@ -3611,6 +3611,11 @@ http-signature@~1.2.0:
36113611
jsprim "^1.2.2"
36123612
sshpk "^1.7.0"
36133613

3614+
http-status@^1.4.2:
3615+
version "1.4.2"
3616+
resolved "https://registry.yarnpkg.com/http-status/-/http-status-1.4.2.tgz#75406e829dca9bfdf92972c579b47cd6a58ab6c8"
3617+
integrity sha512-mBnIohUwRw9NyXMEMMv8/GANnzEYUj0Y8d3uL01zDWFkxUjYyZ6rgCaAI2zZ1Wb34Oqtbx/nFZolPRDc8Xlm5A==
3618+
36143619
https-browserify@^1.0.0:
36153620
version "1.0.0"
36163621
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
@@ -4313,7 +4318,7 @@ lodash.uniq@^4.5.0:
43134318
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
43144319
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
43154320

4316-
lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.5, lodash@~4.17.10:
4321+
lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.5, lodash@~4.17.10:
43174322
version "4.17.20"
43184323
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
43194324
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -7184,6 +7189,11 @@ timsort@^0.3.0:
71847189
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
71857190
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
71867191

7192+
tiny-cookie@^1.0:
7193+
version "1.0.1"
7194+
resolved "https://registry.yarnpkg.com/tiny-cookie/-/tiny-cookie-1.0.1.tgz#753786079c642a3c3d0b2accad600f8de119ac2a"
7195+
integrity sha1-dTeGB5xkKjw9CyrMrWAPjeEZrCo=
7196+
71877197
to-arraybuffer@^1.0.0:
71887198
version "1.0.1"
71897199
resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
@@ -7480,6 +7490,18 @@ vm-browserify@^1.0.1:
74807490
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
74817491
integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
74827492

7493+
vue-cookie@^1.1.4:
7494+
version "1.1.4"
7495+
resolved "https://registry.yarnpkg.com/vue-cookie/-/vue-cookie-1.1.4.tgz#b8b46d112bda9f93a2f47017c2ed5282d2064fda"
7496+
integrity sha1-uLRtESvan5Oi9HAXwu1SgtIGT9o=
7497+
dependencies:
7498+
tiny-cookie "^1.0"
7499+
7500+
vue-cookies@^1.7.4:
7501+
version "1.7.4"
7502+
resolved "https://registry.yarnpkg.com/vue-cookies/-/vue-cookies-1.7.4.tgz#d241d0a0431da0795837651d10b4d73e7c8d3e8d"
7503+
integrity sha512-mOS5Btr8V9zvAtkmQ7/TfqJIropOx7etDAgBywPCmHjvfJl2gFbH2XgoMghleLoyyMTi5eaJss0mPN7arMoslA==
7504+
74837505
vue-functional-data-merge@^3.1.0:
74847506
version "3.1.0"
74857507
resolved "https://registry.yarnpkg.com/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz#08a7797583b7f35680587f8a1d51d729aa1dc657"

0 commit comments

Comments
 (0)