Auth now works. Added user profile panel with gravatar.

This commit is contained in:
Mario Basic
2015-05-29 02:08:19 +02:00
parent 92b33ac18c
commit 40900759d8
7 changed files with 813 additions and 234 deletions

View File

@@ -1,5 +1,7 @@
var React = require('react');
var md5 = require('blueimp-md5').md5;
class MainList extends React.Component
{
componentDidMount()
@@ -20,24 +22,68 @@ class MainList extends React.Component
render()
{
var loginLogoutButton = () => {
if(this.props.loggedIn === true)
{
return (
<div>
<a target="_blank" href="https://wakatime.com/settings/rules" className="list-group-item">
<i className="fa fa-fw fa-filter"></i> Custom Rules
</a>
<a target="_blank" href="https://wakatime.com/dashboard" className="list-group-item">
<i className="fa fa-fw fa-tachometer"></i> Dashboard
</a>
<a href="#" className="list-group-item" onClick={this.props.logoutUser}>
<i className="fa fa-fw fa-sign-out"></i> Logout
</a>
</div>
);
}
return (
<a target="_blank" href="https://wakatime.com/login" className="list-group-item">
<i className="fa fa-fw fa-sign-in"></i> Login
</a>
);
};
var signedInAs = () => {
if(this.props.loggedIn === true)
{
var src = "https://secure.gravatar.com/avatar/" + md5(this.props.user.email) + "/?s=48";
return (
<div className="panel panel-default">
<div className="panel-body">
<div className="row">
<div className="col-xs-2">
<img className="img-circle" src={src} />
</div>
<div className="col-xs-10">
Signed in as <b>{this.props.user.full_name}</b><br />
{this.props.user.email}
</div>
</div>
</div>
</div>
);
}
};
return(
<div className="list-group">
<a href="#" className="list-group-item" onClick={this._openOptionsPage}>
Options
</a>
<a href="#" className="list-group-item">
Custom Rules
</a>
<a href="#" className="list-group-item">
Dashboard
</a>
<a href="#" className="list-group-item">
Login
</a>
<a href="#" className="list-group-item">
Logout
</a>
</div>
<div>
{signedInAs()}
<div className="list-group">
<a href="#" className="list-group-item" onClick={this._openOptionsPage}>
<i className="fa fa-fw fa-cogs"></i> Options
</a>
{loginLogoutButton()}
</div>
</div>
);
}
}