Skip to content

Commit 039bb55

Browse files
iamutetiiamuteti
authored
Merge pull request #1 from the-road-to-react-with-firebase/semantic
adding sementic
2 parents 19ddb00 + bacdcf2 commit 039bb55

File tree

19 files changed

+584
-365
lines changed

19 files changed

+584
-365
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,4 @@ yarn-error.log*
3030

3131
.firebase
3232
.firebaserc
33+
.idea

‎package-lock.json

Lines changed: 77 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
{
2-
"name": "react-semantic-ui-firebase-authentication",
2+
"name": "react-firebase-authentication",
33
"version": "0.2.0",
44
"private": true,
55
"dependencies": {
6+
"date-fns": "^1.30.1",
67
"firebase": "^5.6.0",
78
"react": "^16.6.3",
89
"react-dom": "^16.6.3",
910
"react-router-dom": "^4.3.1",
1011
"react-scripts": "2.1.1",
11-
"recompose": "^0.30.0"
12+
"recompose": "^0.30.0",
13+
"semantic-ui-css": "^2.4.1",
14+
"semantic-ui-react": "^0.83.0"
1215
},
1316
"scripts": {
1417
"start": "react-scripts start",

‎src/components/Account/index.js

Lines changed: 108 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { withFirebase } from '../Firebase';
1010
import { PasswordForgetForm } from '../PasswordForget';
1111
import PasswordChangeForm from '../PasswordChange';
1212

13+
import {Grid, Card, Header, Message, Form, Button } from 'semantic-ui-react'
14+
1315
const SIGN_IN_METHODS = [
1416
{
1517
id: 'password',
@@ -33,9 +35,29 @@ const AccountPage = () => (
3335
<AuthUserContext.Consumer>
3436
{authUser => (
3537
<div>
36-
<h1>Account: {authUser.email}</h1>
37-
<PasswordForgetForm />
38-
<PasswordChangeForm />
38+
<Header as='h2'>Account: {authUser.email}</Header>
39+
<Grid columns={2}>
40+
<Grid.Column>
41+
<Card fluid={true}>
42+
<Card.Content>
43+
<Card.Header>Reset Password</Card.Header>
44+
<Card.Description>
45+
<PasswordForgetForm />
46+
</Card.Description>
47+
</Card.Content>
48+
</Card>
49+
</Grid.Column>
50+
<Grid.Column>
51+
<Card fluid={true}>
52+
<Card.Content>
53+
<Card.Header>New Password</Card.Header>
54+
<Card.Description>
55+
<PasswordChangeForm />
56+
</Card.Description>
57+
</Card.Content>
58+
</Card>
59+
</Grid.Column>
60+
</Grid>
3961
<LoginManagement authUser={authUser} />
4062
</div>
4163
)}
@@ -95,40 +117,51 @@ class LoginManagementBase extends Component {
95117
const { activeSignInMethods, error } = this.state;
96118

97119
return (
98-
<div>
99-
Sign In Methods:
100-
<ul>
101-
{SIGN_IN_METHODS.map(signInMethod => {
102-
const onlyOneLeft = activeSignInMethods.length === 1;
103-
const isEnabled = activeSignInMethods.includes(
104-
signInMethod.id,
105-
);
106-
107-
return (
108-
<li key={signInMethod.id}>
109-
{signInMethod.id === 'password' ? (
110-
<DefaultLoginToggle
111-
onlyOneLeft={onlyOneLeft}
112-
isEnabled={isEnabled}
113-
signInMethod={signInMethod}
114-
onLink={this.onDefaultLoginLink}
115-
onUnlink={this.onUnlink}
116-
/>
117-
) : (
118-
<SocialLoginToggle
119-
onlyOneLeft={onlyOneLeft}
120-
isEnabled={isEnabled}
121-
signInMethod={signInMethod}
122-
onLink={this.onSocialLoginLink}
123-
onUnlink={this.onUnlink}
124-
/>
125-
)}
126-
</li>
127-
);
128-
})}
129-
</ul>
130-
{error && error.message}
131-
</div>
120+
<Card fluid={true}>
121+
<Card.Content>
122+
<Card.Header>Sign In Methods</Card.Header>
123+
<Card.Description>
124+
{error && <Message negative>
125+
<p>{error.message}</p>
126+
</Message>}
127+
<div>
128+
{SIGN_IN_METHODS.map(signInMethod => {
129+
const onlyOneLeft = activeSignInMethods.length === 1;
130+
const isEnabled = activeSignInMethods.includes(
131+
signInMethod.id,
132+
);
133+
134+
return (
135+
<span key={signInMethod.id}>
136+
{signInMethod.id === 'password' ? (
137+
<Grid columns={1}>
138+
<Grid.Column>
139+
<DefaultLoginToggle
140+
onlyOneLeft={onlyOneLeft}
141+
isEnabled={isEnabled}
142+
signInMethod={signInMethod}
143+
onLink={this.onDefaultLoginLink}
144+
onUnlink={this.onUnlink}
145+
/>
146+
<br />
147+
</Grid.Column>
148+
</Grid>
149+
) : (
150+
<SocialLoginToggle
151+
onlyOneLeft={onlyOneLeft}
152+
isEnabled={isEnabled}
153+
signInMethod={signInMethod}
154+
onLink={this.onSocialLoginLink}
155+
onUnlink={this.onUnlink}
156+
/>
157+
)}
158+
</span>
159+
);
160+
})}
161+
</div>
162+
</Card.Description>
163+
</Card.Content>
164+
</Card>
132165
);
133166
}
134167
}
@@ -141,20 +174,22 @@ const SocialLoginToggle = ({
141174
onUnlink,
142175
}) =>
143176
isEnabled ? (
144-
<button
177+
<Button
178+
color={signInMethod.id === 'google.com' ? 'google plus' : signInMethod.id === 'facebook.com' ? 'facebook' : signInMethod.id === 'twitter.com' ? 'twitter' : ''}
145179
type="button"
146180
onClick={() => onUnlink(signInMethod.id)}
147181
disabled={onlyOneLeft}
148182
>
149183
Deactivate {signInMethod.id}
150-
</button>
184+
</Button>
151185
) : (
152-
<button
186+
<Button
187+
color={signInMethod.id === 'google.com' ? 'google plus' : signInMethod.id === 'facebook.com' ? 'facebook' : signInMethod.id === 'twitter.com' ? 'twitter' : ''}
153188
type="button"
154189
onClick={() => onLink(signInMethod.provider)}
155190
>
156191
Link {signInMethod.id}
157-
</button>
192+
</Button>
158193
);
159194

160195
class DefaultLoginToggle extends Component {
@@ -189,34 +224,40 @@ class DefaultLoginToggle extends Component {
189224
passwordOne !== passwordTwo || passwordOne === '';
190225

191226
return isEnabled ? (
192-
<button
193-
type="button"
194-
onClick={() => onUnlink(signInMethod.id)}
195-
disabled={onlyOneLeft}
196-
>
197-
Deactivate {signInMethod.id}
198-
</button>
227+
<span>
228+
<Button type="button" onClick={() => onUnlink(signInMethod.id)} disabled={onlyOneLeft}>
229+
Deactivate {signInMethod.id}
230+
</Button>
231+
<br />
232+
</span>
199233
) : (
200-
<form onSubmit={this.onSubmit}>
201-
<input
202-
name="passwordOne"
203-
value={passwordOne}
204-
onChange={this.onChange}
205-
type="password"
206-
placeholder="New Password"
207-
/>
208-
<input
209-
name="passwordTwo"
210-
value={passwordTwo}
211-
onChange={this.onChange}
212-
type="password"
213-
placeholder="Confirm New Password"
214-
/>
215-
216-
<button disabled={isInvalid} type="submit">
234+
<Form onSubmit={this.onSubmit}>
235+
<Form.Group widths='equal'>
236+
<Form.Field>
237+
<label>New Password</label>
238+
<input
239+
name="passwordOne"
240+
value={passwordOne}
241+
onChange={this.onChange}
242+
type="password"
243+
placeholder="New Password"
244+
/>
245+
</Form.Field>
246+
<Form.Field>
247+
<label>Confirm Password</label>
248+
<input
249+
name="passwordTwo"
250+
value={passwordTwo}
251+
onChange={this.onChange}
252+
type="password"
253+
placeholder="Confirm New Password"
254+
/>
255+
</Form.Field>
256+
</Form.Group>
257+
<Button primary disabled={isInvalid} type="submit">
217258
Link {signInMethod.id}
218-
</button>
219-
</form>
259+
</Button>
260+
</Form>
220261
);
221262
}
222263
}

‎src/components/Admin/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ import { UserList, UserItem } from '../Users';
77
import * as ROLES from '../../constants/roles';
88
import * as ROUTES from '../../constants/routes';
99

10+
import { Header } from 'semantic-ui-react';
11+
1012
const AdminPage = () => (
1113
<div>
12-
<h1>Admin</h1>
14+
<Header as='h2'>Admin</Header>
1315
<p>The Admin Page is accessible by every signed in admin user.</p>
1416

1517
<Switch>

0 commit comments

Comments
 (0)