Skip to content

Commit e0f299b

Browse files
koistyakoistya
committed
Merge pull request kriasoft#486 from frenzzy/login-form
Add login form
2 parents a549a58 + 69277f2 commit e0f299b

File tree

3 files changed

+233
-3
lines changed

3 files changed

+233
-3
lines changed

‎src/components/App/App.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ html {
2525
line-height: 1.375; /* ~22px */
2626
}
2727

28+
a {
29+
color: #0074c2;
30+
}
31+
2832
/*
2933
* Remove text-shadow in selection highlight:
3034
* https://twitter.com/miketaylr/status/12228805301

‎src/routes/login/Login.js

Lines changed: 91 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,97 @@ function Login({ title }) {
1616
<div className={s.root}>
1717
<div className={s.container}>
1818
<h1>{title}</h1>
19-
<p>...</p>
19+
<p className={s.lead}>Log in with your username or company email address.</p>
20+
<div className={s.formGroup}>
21+
<a className={s.facebook} href="/login/facebook">
22+
<svg
23+
className={s.icon}
24+
width="30"
25+
height="30"
26+
viewBox="0 0 30 30"
27+
xmlns="http://www.w3.org/2000/svg"
28+
>
29+
<path
30+
d="M22 16l1-5h-5V7c0-1.544.784-2 3-2h2V0h-4c-4.072 0-7 2.435-7 7v4H7v5h5v14h6V16h4z"
31+
/>
32+
</svg>
33+
<span>Log in with Facebook</span>
34+
</a>
35+
</div>
36+
<div className={s.formGroup}>
37+
<a className={s.google} href="/login/google">
38+
<svg
39+
className={s.icon}
40+
width="30"
41+
height="30"
42+
viewBox="0 0 30 30"
43+
xmlns="http://www.w3.org/2000/svg"
44+
>
45+
<path d={'M30 13h-4V9h-2v4h-4v2h4v4h2v-4h4m-15 2s-2-1.15-2-2c0 0-.5-1.828 1-3 ' +
46+
'1.537-1.2 3-3.035 3-5 0-2.336-1.046-5-3-6h3l2.387-1H10C5.835 0 2 3.345 2 7c0 ' +
47+
'3.735 2.85 6.56 7.086 6.56.295 0 .58-.006.86-.025-.273.526-.47 1.12-.47 1.735 ' +
48+
'0 1.037.817 2.042 1.523 2.73H9c-5.16 0-9 2.593-9 6 0 3.355 4.87 6 10.03 6 5.882 ' +
49+
'0 9.97-3 9.97-7 0-2.69-2.545-4.264-5-6zm-4-4c-2.395 0-5.587-2.857-6-6C4.587 ' +
50+
'3.856 6.607.93 9 1c2.394.07 4.603 2.908 5.017 6.052C14.43 10.195 13 13 11 13zm-1 ' +
51+
'15c-3.566 0-7-1.29-7-4 0-2.658 3.434-5.038 7-5 .832.01 2 0 2 0 1 0 2.88.88 4 2 1 ' +
52+
'1 1 2.674 1 3 0 3-1.986 4-7 4z'}
53+
/>
54+
</svg>
55+
<span>Log in with Google</span>
56+
</a>
57+
</div>
58+
<div className={s.formGroup}>
59+
<a className={s.twitter} href="/login/twitter">
60+
<svg
61+
className={s.icon}
62+
width="30"
63+
height="30"
64+
viewBox="0 0 30 30"
65+
xmlns="http://www.w3.org/2000/svg"
66+
>
67+
<path d={'M30 6.708c-1.105.49-2.756 1.143-4 1.292 1.273-.762 2.54-2.56 ' +
68+
'3-4-.97.577-2.087 1.355-3.227 1.773L25 5c-1.12-1.197-2.23-2-4-2-3.398 0-6 ' +
69+
'2.602-6 6 0 .4.047.7.11.956L15 10C9 10 5.034 8.724 2 5c-.53.908-1 1.872-1 ' +
70+
'3 0 2.136 1.348 3.894 3 5-1.01-.033-2.17-.542-3-1 0 2.98 4.186 6.432 7 7-1 ' +
71+
'1-4.623.074-5 0 .784 2.447 3.31 3.95 6 4-2.105 1.648-4.647 2.51-7.53 2.51-.5 ' +
72+
'0-.988-.03-1.47-.084C2.723 27.17 6.523 28 10 28c11.322 0 17-8.867 17-17 ' +
73+
'0-.268.008-.736 0-1 1.2-.868 2.172-2.058 3-3.292z'}
74+
/>
75+
</svg>
76+
<span>Log in with Twitter</span>
77+
</a>
78+
</div>
79+
<strong className={s.lineThrough}>OR</strong>
80+
<form method="post">
81+
<div className={s.formGroup}>
82+
<label className={s.label} htmlFor="usernameOrEmail">
83+
Username or email address:
84+
</label>
85+
<input
86+
className={s.input}
87+
id="usernameOrEmail"
88+
type="text"
89+
name="usernameOrEmail"
90+
autoFocus
91+
/>
92+
</div>
93+
<div className={s.formGroup}>
94+
<label className={s.label} htmlFor="password">
95+
Password:
96+
</label>
97+
<input
98+
className={s.input}
99+
id="password"
100+
type="password"
101+
name="password"
102+
/>
103+
</div>
104+
<div className={s.formGroup}>
105+
<button className={s.button} type="submit">
106+
Log in
107+
</button>
108+
</div>
109+
</form>
20110
</div>
21111
</div>
22112
);

‎src/routes/login/Login.scss

Lines changed: 138 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
* This source code is licensed under the MIT license found in the
77
* LICENSE.txt file in the root directory of this source tree.
88
*/
9-
109
@import '../../components/variables.scss';
1110

1211
.root {
@@ -17,5 +16,142 @@
1716
.container {
1817
margin: 0 auto;
1918
padding: 0 0 40px;
20-
max-width: $max-content-width;
19+
max-width: 380px;
20+
}
21+
22+
.lead {
23+
font-size: 1.25em;
24+
}
25+
26+
.formGroup {
27+
margin-bottom: 15px;
28+
}
29+
30+
.label {
31+
display: inline-block;
32+
margin-bottom: 5px;
33+
max-width: 100%;
34+
font-weight: 700;
35+
}
36+
37+
.input {
38+
display: block;
39+
box-sizing: border-box;
40+
padding: 10px 16px;
41+
width: 100%;
42+
height: 46px;
43+
outline: 0;
44+
border: 1px solid #ccc;
45+
border-radius: 0;
46+
background: #fff;
47+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
48+
color: #616161;
49+
font-size: 18px;
50+
line-height: 1.3333333;
51+
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
52+
53+
&:focus {
54+
border-color: #0074c2;
55+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 116, 194, .6);
56+
}
57+
}
58+
59+
.button {
60+
display: block;
61+
box-sizing: border-box;
62+
margin: 0;
63+
padding: 10px 16px;
64+
width: 100%;
65+
outline: 0;
66+
border: 1px solid #373277;
67+
border-radius: 0;
68+
background: #373277;
69+
color: #fff;
70+
text-align: center;
71+
text-decoration: none;
72+
font-size: 18px;
73+
line-height: 1.3333333;
74+
cursor: pointer;
75+
76+
&:hover {
77+
background: rgba(54, 50, 119, 0.8);
78+
}
79+
80+
&:focus {
81+
border-color: #0074c2;
82+
box-shadow: 0 0 8px rgba(0, 116, 194, .6);
83+
}
84+
}
85+
86+
.facebook {
87+
border-color: #3b5998;
88+
background: #3b5998;
89+
composes: button;
90+
91+
&:hover {
92+
background: #2d4373;
93+
}
94+
}
95+
96+
.google {
97+
border-color: #dd4b39;
98+
background: #dd4b39;
99+
composes: button;
100+
101+
&:hover {
102+
background: #c23321;
103+
}
104+
}
105+
106+
.twitter {
107+
border-color: #55acee;
108+
background: #55acee;
109+
composes: button;
110+
111+
&:hover {
112+
background: #2795e9;
113+
}
114+
}
115+
116+
.icon {
117+
display: inline-block;
118+
margin: -2px 12px -2px 0;
119+
width: 20px;
120+
height: 20px;
121+
vertical-align: middle;
122+
fill: currentColor;
123+
}
124+
125+
.lineThrough {
126+
position: relative;
127+
z-index: 1;
128+
display: block;
129+
margin-bottom: 15px;
130+
width: 100%;
131+
color: #757575;
132+
text-align: center;
133+
font-size: 80%;
134+
135+
&:before {
136+
position: absolute;
137+
top: 50%;
138+
left: 50%;
139+
z-index: -1;
140+
margin-top: -5px;
141+
margin-left: -20px;
142+
width: 40px;
143+
height: 10px;
144+
background-color: #fff;
145+
content: '';
146+
}
147+
148+
&:after {
149+
position: absolute;
150+
top: 49%;
151+
z-index: -2;
152+
display: block;
153+
width: 100%;
154+
border-bottom: 1px solid #ddd;
155+
content: '';
156+
}
21157
}

0 commit comments

Comments
 (0)