Initial commit
Change-Id: Ifc297dd3b5a52bb42d79a08bac4d05c2400ae779
diff --git a/jaas-client/src/pages/404.jsx b/jaas-client/src/pages/404.jsx
new file mode 100644
index 0000000..8d0dcb1
--- /dev/null
+++ b/jaas-client/src/pages/404.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+
+const NotFoundPage = () => {
+ return (
+ <div>
+ <h3>404 Page not found</h3>
+ </div>
+ )
+}
+
+export default NotFoundPage;
\ No newline at end of file
diff --git a/jaas-client/src/pages/index.jsx b/jaas-client/src/pages/index.jsx
new file mode 100644
index 0000000..ad831b1
--- /dev/null
+++ b/jaas-client/src/pages/index.jsx
@@ -0,0 +1,223 @@
+import React from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import Button from '@material-ui/core/Button';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import TextField from '@material-ui/core/TextField';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+import Link from '@material-ui/core/Link';
+import Grid from '@material-ui/core/Grid';
+import Box from '@material-ui/core/Box';
+import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
+import Typography from '@material-ui/core/Typography';
+//import { makeStyles } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
+import { Redirect } from 'react-router-dom';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Dialog from '@material-ui/core/Dialog';
+
+
+function Copyright() {
+ return (
+ <Typography variant="body2" color="textSecondary" align="center">
+ {'Copyright © 2016-'}{new Date().getFullYear()}{' Savoir-faire Linux Inc. GNU '}
+ <Link color="inherit" href="https://jami.net/">
+ Jami.net
+ </Link>{' '}
+
+ {'.'}
+ </Typography>
+ );
+}
+
+/*const useStyles = makeStyles((theme) => ({
+ paper: {
+ marginTop: theme.spacing(8),
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ },
+ avatar: {
+ margin: theme.spacing(1),
+ backgroundColor: theme.palette.secondary.main,
+ },
+ form: {
+ width: '100%', // Fix IE 11 issue.
+ marginTop: theme.spacing(1),
+ },
+ submit: {
+ margin: theme.spacing(3, 0, 2),
+ },
+}));*/
+
+/*function SignIn() {
+ const classes = useStyles();
+
+
+}*/
+
+/*
+ TODO:
+ Use useState to handle username password and redirect states to render this page to
+ comply with material-ui usage of useStyles
+ Src: https://blog.logrocket.com/a-guide-to-usestate-in-react-ecb9952e406c/
+*/
+
+class SignInPage extends React.Component {
+
+ constructor() {
+ super()
+ this.state = {
+ username: '',
+ password: '',
+ redirect: false,
+ session: null,
+ submitted: false,
+ loading: false,
+ error: false,
+ open: false,
+ errorMessage: ''
+ }
+ this.handleSubmit = this.handleSubmit.bind(this);
+ }
+
+ handleusername(text) {
+ this.setState({ username: text.target.value })
+ }
+
+ handlePassword(text) {
+ this.setState({ password: text.target.value })
+ }
+
+ handleSubmit(event) {
+ event.preventDefault();
+ let obj = {}
+ obj.username = this.state.username;
+ obj.password = this.state.password;
+
+ this.setState({
+ submitted: true,
+ loading: true
+ })
+
+ fetch('/api/login?username=' + obj.username + '&password=' + obj.password,
+ {
+ header: {
+ "Content-Type": "application/json"
+ },
+ method: "POST",
+ credentials: 'same-origin'
+ //body: JSON.stringify({ obj })
+ }
+ ).then((res) => {
+ if (res.status == '200') {
+ this.setState({
+ redirect: true
+ });
+ } else if (res.status == '401') {
+ this.setState({
+ loading: false,
+ error: true,
+ open: true,
+ errorMessage: "Wrong credentials! Your are not allowed to connect"
+ })
+ }
+ //this.setState({ session: res });
+ }).catch((e) => {
+ this.setState({
+ loading: false,
+ error: true,
+ open: true,
+ errorMessage: e.toString()
+ })
+ })
+ }
+
+
+ render() {
+ if (this.state.redirect) {
+ return <Redirect to="/jaas" />
+ }
+
+ return (
+ <Container component="main" maxWidth="xs" >
+ <CssBaseline />
+ <div className=""/*{classes.paper}*/>
+ <Typography component="h1" variant="h5">
+ Se connecter
+ </Typography>
+ <form className=""/*{classes.form}*/ onSubmit={this.handleSubmit} >
+ <TextField
+ variant="outlined"
+ margin="normal"
+ required
+ fullWidth
+ id="username"
+ label="LDAP Savoir-faire Linux"
+ name="username"
+ autoComplete="email"
+ autoFocus
+ onChange={(text) => { this.handleusername(text) }}
+ />
+ <TextField
+ variant="outlined"
+ margin="normal"
+ required
+ fullWidth
+ name="password"
+ label="Mot de passe"
+ type="password"
+ id="password"
+ autoComplete="current-password"
+ onChange={(text) => { this.handlePassword(text) }}
+ />
+ <FormControlLabel
+ control={<Checkbox value="remember" color="primary" />}
+ label="Se rapeller de moi"
+ />
+ <Button
+ type="submit"
+ fullWidth
+ variant="contained"
+ color="primary"
+ className=""/*{classes.submit}*/
+ // onClick={() => { this.login() }}
+ >
+ Se connecter
+ </Button>
+ <Grid container>
+ <Grid item xs>
+ <Link href="#" variant="body2">
+ Mot de passe oublié ?
+ </Link>
+ </Grid>
+ <Grid item>
+ <Link href="#" variant="body2">
+ {"Tu n'as pas de compte? Inscris-toi"}
+ </Link>
+ </Grid>
+ </Grid>
+ </form>
+ </div>
+ <Box mt={8}>
+ <Copyright />
+ </Box>
+ {this.state.submitted && this.state.loading && <CircularProgress
+ style={{ position: 'relative' }}
+ size={40}
+ top={10}
+ style={{ marginLeft: '50%' }}
+ />}
+ {
+ this.state.error && <Dialog aria-labelledby="simple-dialog-title" open={this.state.open} >
+ <DialogTitle id="simple-dialog-title">{this.state.errorMessage}</DialogTitle>
+ </Dialog>
+ }
+ </Container>
+ );
+ }
+}
+
+
+export default SignInPage;
\ No newline at end of file
diff --git a/jaas-client/src/pages/jaas.jsx b/jaas-client/src/pages/jaas.jsx
new file mode 100644
index 0000000..5c8a4aa
--- /dev/null
+++ b/jaas-client/src/pages/jaas.jsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import Header from '../components/Header'
+import ContactList from '../components/ContactList'
+import MessageList from '../components/MessageList'
+import SendMessageForm from '../components/SendMessageForm'
+import NewContactForm from '../components/NewContactForm'
+import Sound from 'react-sound';
+import io from "socket.io-client";
+var socket = io.connect('http://localhost:3000');
+
+class Jaas extends React.Component {
+
+ constructor() {
+ super()
+ this.state = {
+ messages: [],
+ sound: false
+ }
+
+ socket.on('connect', () => {
+ console.log("Success !")
+ })
+
+ //import io from 'socket.io-client';
+
+ //this.socket = socketIOClient(ENDPOINT);
+ //this.socket.on("FromAPI", data => {
+ // this.setState({
+ // messages: [...this.state.messages, data]
+ // })
+ //});
+ this.sendMessage = this.sendMessage.bind(this)
+ }
+
+ componentDidMount() {
+ socket.on('receivedMessage', (data) => {
+ var message = {
+ senderId: '65f6674b26e5af6ed0b4e92a13b80ff4bbfdf1e8',
+ text: data
+ }
+ this.setState({
+ messages: [...this.state.messages, message],
+ sound: true
+ })
+ });
+ }
+
+ sendMessage(text) {
+ var data = {
+ senderId: 'Me',
+ destinationId: '65f6674b26e5af6ed0b4e92a13b80ff4bbfdf1e8',
+ text: text
+ }
+ socket.emit("SendMessage", data);
+ console.log(data.text);
+ this.setState({
+ messages: [...this.state.messages, data],
+ sound: false
+ })
+ }
+ render() {
+ return (
+ <div className="app" >
+ <Header />
+ <ContactList />
+ <MessageList messages={this.state.messages} />
+ <SendMessageForm sendMessage={this.sendMessage} />
+ <NewContactForm />
+ {this.state.sound && <Sound
+ url="stairs.mp3" /*https://notificationsounds.com/message-tones/stairs-567*/
+ playStatus={Sound.status.PLAYING}
+ playFromPosition={0 /* in milliseconds */}
+ onLoading={this.handleSongLoading}
+ onPlaying={this.handleSongPlaying}
+ onFinishedPlaying={this.handleSongFinishedPlaying}
+ />}
+ </div>
+ )
+ }
+}
+
+export default Jaas;
\ No newline at end of file