comunes/todos-contra-el-fuego-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add oauth flows, profile, logout page, and index page

Browse source
This commit is contained in:
cleverbeagle 2017-05-29 22:02:22 -05:00
parent 650c93273a
commit b0270cc98b
31 changed files with 449 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

154
imports/ui/pages/Profile/Profile.js
View file

@ -3,6 +3,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Row, Col, FormGroup, ControlLabel, Button } from 'react-bootstrap';
import { capitalize } from '@cleverbeagle/strings';
import { Meteor } from 'meteor/meteor';
import { Accounts } from 'meteor/accounts-base';
import { Bert } from 'meteor/themeteorchef:bert';
@ -10,10 +11,17 @@ import { createContainer } from 'meteor/react-meteor-data';
import InputHint from '../../components/InputHint/InputHint';
import validate from '../../../modules/validate';
import './Profile.scss';
class Profile extends React.Component {
constructor(props) {
super(props);
this.getUserType = this.getUserType.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.renderOAuthUser = this.renderOAuthUser.bind(this);
this.renderPasswordUser = this.renderPasswordUser.bind(this);
this.renderProfileForm = this.renderProfileForm.bind(this);
}
componentDidMount() {
@ -66,6 +74,13 @@ class Profile extends React.Component {
});
}
getUserType(user) {
const userToCheck = user;
delete userToCheck.services.resume;
const service = Object.keys(userToCheck.services)[0];
return service === 'password' ? 'password' : 'oauth';
}
handleSubmit() {
const profile = {
emailAddress: this.emailAddress.value,
@ -88,6 +103,85 @@ class Profile extends React.Component {
});
}
renderOAuthUser(loading, user) {
return !loading ? (<div className="OAuthProfile">
{Object.keys(user.services).map(service => (
<div key={service} className={`LoggedInWith ${service}`}>
<div className="ServiceIcon"><i className={`fa fa-${service === 'facebook' ? 'facebook-official' : service}`} /></div>
<p>{`You're logged in with ${capitalize(service)} using the email address ${user.services[service].email}.`}</p>
</div>
))}
</div>) : <div />;
}
renderPasswordUser(loading, user) {
return !loading ? (<div>
<Row>
<Col xs={6}>
<FormGroup>
<ControlLabel>First Name</ControlLabel>
<input
type="text"
name="firstName"
defaultValue={user.profile.name.first}
ref={firstName => (this.firstName = firstName)}
className="form-control"
/>
</FormGroup>
</Col>
<Col xs={6}>
<FormGroup>
<ControlLabel>Last Name</ControlLabel>
<input
type="text"
name="lastName"
defaultValue={user.profile.name.last}
ref={lastName => (this.lastName = lastName)}
className="form-control"
/>
</FormGroup>
</Col>
</Row>
<FormGroup>
<ControlLabel>Email Address</ControlLabel>
<input
type="email"
name="emailAddress"
defaultValue={user.emails[0].address}
ref={emailAddress => (this.emailAddress = emailAddress)}
className="form-control"
/>
</FormGroup>
<FormGroup>
<ControlLabel>Current Password</ControlLabel>
<input
type="password"
name="currentPassword"
ref={currentPassword => (this.currentPassword = currentPassword)}
className="form-control"
/>
</FormGroup>
<FormGroup>
<ControlLabel>New Password</ControlLabel>
<input
type="password"
name="newPassword"
ref={newPassword => (this.newPassword = newPassword)}
className="form-control"
/>
<InputHint>Use at least six characters.</InputHint>
</FormGroup>
<Button type="submit" bsStyle="success">Save Profile</Button>
</div>) : <div />;
}
renderProfileForm(loading, user) {
return !loading ? ({
password: this.renderPasswordUser,
oauth: this.renderOAuthUser,
}[this.getUserType(user)])(loading, user) : <div />;
}
render() {
const { loading, user } = this.props;
return (<div className="Profile">
@ -95,65 +189,7 @@ class Profile extends React.Component {
<Col xs={12} sm={6} md={4}>
<h4 className="page-header">Edit Profile</h4>
<form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
{!loading ? (<div>
<Row>
<Col xs={6}>
<FormGroup>
<ControlLabel>First Name</ControlLabel>
<input
type="text"
name="firstName"
defaultValue={user.profile.name.first}
ref={firstName => (this.firstName = firstName)}
className="form-control"
/>
</FormGroup>
</Col>
<Col xs={6}>
<FormGroup>
<ControlLabel>Last Name</ControlLabel>
<input
type="text"
name="lastName"
defaultValue={user.profile.name.last}
ref={lastName => (this.lastName = lastName)}
className="form-control"
/>
</FormGroup>
</Col>
</Row>
<FormGroup>
<ControlLabel>Email Address</ControlLabel>
<input
type="email"
name="emailAddress"
defaultValue={user.emails[0].address}
ref={emailAddress => (this.emailAddress = emailAddress)}
className="form-control"
/>
</FormGroup>
<h5 className="page-header">Change Password</h5>
<FormGroup>
<ControlLabel>Current Password</ControlLabel>
<input
type="password"
name="currentPassword"
ref={currentPassword => (this.currentPassword = currentPassword)}
className="form-control"
/>
</FormGroup>
<FormGroup>
<ControlLabel>New Password</ControlLabel>
<input
type="password"
name="newPassword"
ref={newPassword => (this.newPassword = newPassword)}
className="form-control"
/>
<InputHint>Use at least six characters.</InputHint>
</FormGroup>
<Button type="submit" bsStyle="success">Save Profile</Button>
</div>) : <div />}
{this.renderProfileForm(loading, user)}
</form>
</Col>
</Row>

39
imports/ui/pages/Profile/Profile.scss Normal file
View file

@ -0,0 +1,39 @@
@import '../../stylesheets/colors';
.OAuthProfile {
.LoggedInWith {
padding: 10px 20px;
border-radius: 3px;
color: #fff;
p {
margin: 0;
}
.ServiceIcon {
float: left;
width: auto;
margin-right: 15px;
height: 30px;
text-align: center;
i {
font-size: 30px;
position: relative;
top: 5px;
}
}
&.facebook {
background: $facebook;
}
&.github {
background: $github;
}
&.google {
background: $google;
}
}
}