Skip to content
Permalink
Browse files

Enabling working offline/online view.

It is now possible to log in with the client. The interfaces updates itself.
@todo: Check if network layer correctly fetches information with the api key.
  • Loading branch information...
Vassyli committed Aug 24, 2016
1 parent 787b9ba commit d171e7382c60d14faa08eda2868161353a413dcc
@@ -1,52 +1,58 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Relay from 'react-relay';

import Configuration from './Configuration';

import Session from './Session';
import SessionRoute from './../routes/SessionRoute';

import AuthWithPasswordMutation from '../mutations/AuthWithPasswordMutation';

var Title = React.createClass({
render() {
return (
<h1>{this.props.val}</h1>
);
}
render() { return (<h1>{this.props.val}</h1>); }
});

var Connection = React.createClass({
render() {
return (
<div>
Connected to {this.props.name}.
</div>
);
}
render() { return (<div>Connected to {this.props.name}.</div>); }
});

class App extends React.Component {
const App = React.createClass({
render() {
var Realm = this.props.viewer;
var Realm = this.props.realm;

return (
<div>
<Title val="Daenerys Web client" />
<Connection name={Realm.name} />

<div id="app">
<header className="w3-container">
<Title val="Daenerys Web client" />
<Connection name={Realm.name} />
</header>

<div id="sessionView" className="w3-container">
<Relay.RootContainer
Component={Session}
route={new SessionRoute()}
/>
</div>

<Configuration
type="core"
Lib={Realm.configuration.core}
/>
<Configuration
type="crate"
Lib={Realm.configuration.crate}
/>
<footer className="wrapper-bottom">
<Configuration
type="core"
Lib={Realm.configuration.core}
/>
<Configuration
type="crate"
Lib={Realm.configuration.crate}
/>
</footer>
</div>
);
}
}
},
});

export default Relay.createContainer(App, {
fragments: {
viewer: () => Relay.QL`
fragments: {
realm: () => Relay.QL`
fragment on Realm {
name
url
@@ -10,11 +10,14 @@ class Configuration extends React.Component {
return (
<div>Core: Using {lib.library} in version {lib.version}</div>
);
}
else {
} else if (type === "crate") {
return (
<div>Crate: Using {lib.library} in version {lib.version}</div>
);
} else {
return (
<div>Library: Using {lib.library} in version {lib.version}</div>
);
}
}
}
@@ -1,31 +1,108 @@
import React from 'react';
import Relay from 'react-relay';

class Configuration extends React.Component {
render() {
var lib = this.props.Lib;
var type = this.props.type;

if (type === "core") {
return (
<div>Core: Using {lib.library} in version {lib.version}</div>
);
}
else {
return (
<div>Crate: Using {lib.library} in version {lib.version}</div>
);
}
}
}
import AuthWithPasswordMutation from '../mutations/AuthWithPasswordMutation';

export default Relay.createContainer(Configuration, {
fragments: {
Lib: () => Relay.QL`
fragment on Library {
library
version
var Offline = React.createClass({
handleSubmission: function() {
this.props.relay.commitUpdate(
new AuthWithPasswordMutation({
email: this.state.email,
password: this.state.password
}), {
onFailure: this.onSubmissionError,
onSuccess: this.onSubmissionSuccess
}
`,
);

this.setState({"submitted" : true});
},

onSubmissionSuccess: function(transaction) {
console.log("Authentication with password was possible.");
console.log(transaction);

this.setState({
error: false,
loggedIn: true
});

this.props.parent.setApiKeyInRelayHeader(transaction["authWithPassword"]["session"]["apiKey"]);
this.props.parent.setState({
session: transaction["authWithPassword"]["session"]
});
},

onSubmissionError: function(transaction) {
this.setState({
error: true,
loggedIn: false,
});
},

getInitialState: function() {
return {
email: "admin",
password: "12345",
submitted: null,
error: false,
loggedIn: true
};
},

handleChange: function(field, e) {
var nextState = {};
nextState[field] = e.target.value;

this.setState(nextState);
},

render: function() {
return (
<div className="w3-row">
<div className="w3-col l4 m2 s1">&nbsp;</div>
<div className="login-prompt w3-col l4 m8 s10">
<h2>Login form</h2>

{this.state.submitted
? this.state.error
? <div>Login was not possible.</div>
: <div>Login in, please wait.</div>
: <div>Try to login using your email/password!</div>
}
<div className="w3-container">
<label>E-Mail address</label>
<input
className="w3-input"
type="text"
name="email"
value={this.state.email}
onChange={this.handleChange.bind(this, 'email')}
/>

<label>Password</label>
<input
className="w3-input"
type="password"
name="password"
value={this.state.password}
onChange={this.handleChange.bind(this, 'email')}
/>

<button className="w3-button" onClick={this.handleSubmission}>Log in</button>
</div>

<h2>Social auth</h2>
</div>
<div className="w3-col l4 m2 s1">&nbsp;</div>
</div>
);
}

});

export default Relay.createContainer(Offline, {
fragments: {

}
});
@@ -0,0 +1,31 @@
import React from 'react';
import Relay from 'react-relay';

var Online = React.createClass({
getInitialState() {
return {
session: this.props.session
};
},

render: function() {
var Session = this.props.session;

return (
<div className="w3-row">
<div className="w3-col l4 m2 s1">&nbsp;</div>
<div className="login-prompt w3-col l4 m8 s10">
You are online.
And you are thus named {Session.user.name}.
</div>
<div className="w3-col l4 m2 s1">&nbsp;</div>
</div>
);
}

});

export default Relay.createContainer(Online, {
fragments: {
}
});
@@ -0,0 +1,60 @@
import React from 'react';
import Relay from 'react-relay';

import Configuration from './Configuration';
import Offline from './Offline';
import Online from './Online';

import AuthWithPasswordMutation from '../mutations/AuthWithPasswordMutation';

const Session = React.createClass({
setApiKeyInRelayHeader(apiKey) {
window.NetworkLayer.setToken(apiKey);
},

getInitialState() {
return {
session: this.props.session
};
},

render() {
var Session = this.props.session;

if (Session.user === null) {
return (
<div>
<Offline
parent={this}
session={Session}
/>
</div>
);
}
else {
return (
<div>
<Online
parent={this}
session={Session}
/>
</div>
);
}
}
});

export default Relay.createContainer(Session, {
fragments: {
session: () => Relay.QL`
fragment on Session {
apiKey,
expiresAt,
user {
id,
name
}
}
`
}
});
@@ -1,19 +1,23 @@
import 'babel-polyfill';

import App from './components/App';
import AppHomeRoute from './routes/AppHomeRoute';
import React from 'react';
import ReactDOM from 'react-dom';
import Relay from 'react-relay';

Relay.injectNetworkLayer(
new Relay.DefaultNetworkLayer('http://localhost:8000/')
);

import LoGDNetworkLayer from './../src/LotGDNetworkLayer';
import App from './components/App';
import AppHomeRoute from './routes/AppHomeRoute';

var root = document.getElementById('root');

window.NetworkLayer = new LoGDNetworkLayer('http://localhost:8000/');
Relay.injectNetworkLayer(window.NetworkLayer);

ReactDOM.render(
<Relay.RootContainer
Component={App}
route={new AppHomeRoute()}
/>,
document.getElementById('root')
);
<Relay.RootContainer
Component={App}
route={new AppHomeRoute()}
/>,
document.getElementById('root')
);
Oops, something went wrong.

0 comments on commit d171e73

Please sign in to comment.
You can’t perform that action at this time.