feat: fetch graasp cookie on signin, fetch html file content

refs #109 userLogin

public/app/listeners/signIn.js

@@ -4,9 +4,11 @@ const { SIGN_IN_CHANNEL } = require('../config/channels');
 
 const DEFAULT_USER = {};
 
-const signIn = (mainWindow, db) => async (event, { username }) => {
+const signIn = (mainWindow, db) => async (event, { username, password }) => {
   const users = db.get(USERS_COLLECTION);
 
+  // @TODO hash password
+
   // check in db if username exists
   const user = users.find({ username }).value();
   if (user) {
@@ -15,7 +17,7 @@ const signIn = (mainWindow, db) => async (event, { username }) => {
     const userId = ObjectId().str;
     // assignment inside function to avoid sharing the same array among users
     DEFAULT_USER.tokens = [];
-    const newUser = { userId, username, ...DEFAULT_USER };
+    const newUser = { userId, username, password, ...DEFAULT_USER };
     users.push(newUser).write();
     mainWindow.webContents.send(SIGN_IN_CHANNEL, newUser);
   }

public/electron.js

@@ -5,6 +5,7 @@ const {
   ipcMain,
   Menu,
   dialog,
+  session,
   // eslint-disable-next-line import/no-extraneous-dependencies
 } = require('electron');
 const path = require('path');
@@ -262,6 +263,12 @@ app.on('ready', async () => {
   // called when logging out a user
   ipcMain.on(SIGN_OUT_CHANNEL, () => {
     try {
+      // clear cookies
+      session.defaultSession.clearStorageData(
+        { options: { storages: ['cookies'] } },
+        () => {}
+      );
+
       mainWindow.webContents.send(SIGN_OUT_CHANNEL);
     } catch (e) {
       logger.error(e);

src/actions/authentication.js

@@ -18,21 +18,31 @@ import {
   SIGN_OUT_CHANNEL,
   IS_AUTHENTICATED_CHANNEL,
 } from '../config/channels';
+import { REACT_APP_GRAASP_LOGIN } from '../config/endpoints';
 import { createFlag } from './common';
 import { ERROR_GENERAL } from '../config/errors';
 
 const flagLoggingInUser = createFlag(FLAG_SIGNING_IN);
 const flagLoggingOutUser = createFlag(FLAG_SIGNING_OUT);
 const flagGettingAuthenticated = createFlag(FLAG_GETTING_AUTHENTICATED);
 
-const signIn = ({ username }) => dispatch => {
+const signIn = async ({ username, password }) => async dispatch => {
   try {
     dispatch(flagLoggingInUser(true));
-    window.ipcRenderer.send(SIGN_IN_CHANNEL, { username });
-    window.ipcRenderer.once(SIGN_IN_CHANNEL, (event, user) => {
+    window.ipcRenderer.send(SIGN_IN_CHANNEL, { username, password });
+    window.ipcRenderer.once(SIGN_IN_CHANNEL, async (event, user) => {
       if (user === ERROR_GENERAL) {
         toastr.error(ERROR_MESSAGE_HEADER, ERROR_SIGNING_IN);
       } else {
+        // obtain user cookie
+        await fetch(REACT_APP_GRAASP_LOGIN, {
+          body: `email=${user.username}&password=${user.password}`,
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+          },
+          method: 'post',
+        });
+
         dispatch({
           type: SIGN_IN_SUCCEEDED,
           payload: user,

src/components/login/LoginScreen.js

@@ -53,6 +53,7 @@ class LoginScreen extends Component {
   state = {
     open: false,
     username: null,
+    password: null,
   };
 
   styles = {
@@ -113,9 +114,9 @@ class LoginScreen extends Component {
   };
 
   handleSignIn = () => {
-    const { username } = this.state;
+    const { username, password } = this.state;
     const { dispatchSignIn } = this.props;
-    dispatchSignIn({ username });
+    dispatchSignIn({ username, password });
   };
 
   handleSignOut = () => {
@@ -128,6 +129,11 @@ class LoginScreen extends Component {
     this.setState({ username });
   };
 
+  handlePassword = event => {
+    const password = event.target ? event.target.value : event;
+    this.setState({ password });
+  };
+
   handleKeyPressed = event => {
     if (event.key === 'Enter') {
       this.handleSignIn();
@@ -136,7 +142,7 @@ class LoginScreen extends Component {
 
   render() {
     const { classes, theme, t } = this.props;
-    const { open, username } = this.state;
+    const { open, username, password } = this.state;
 
     return (
       <div className={classes.root} style={this.styles.root}>
@@ -190,12 +196,22 @@ class LoginScreen extends Component {
             <CssTextField
               label={t('Username')}
               variant="outlined"
-              floatingLabelText="Username"
+              floatingLabelText="Enter your username"
               onChange={this.handleUsername}
               onKeyPress={this.handleKeyPressed}
               value={username}
             />
             <br />
+            <CssTextField
+              label={t('Password')}
+              variant="outlined"
+              floatingLabelText="Enter your password"
+              onChange={this.handlePassword}
+              onKeyPress={this.handleKeyPressed}
+              value={password}
+              type="password"
+            />
+            <br />
             <Button
               variant="contained"
               onClick={this.handleSignIn}

src/components/phase/PhaseItem.js

@@ -15,7 +15,15 @@ import PhaseApp from './PhaseApp';
 
 const renderResource = item => {
   const { id, mimeType, content, asset, url, name } = item;
+
   if (mimeType === TEXT) {
+    if (!content) {
+      fetch(item.url).then(response => {
+        response.text().then(text => {
+          console.log('html content', text);
+        });
+      });
+    }
     return <PhaseText key={id} id={id} content={content} />;
   }
 

src/config/endpoints.js

@@ -4,3 +4,5 @@ export const generateGetSpaceEndpoint = id =>
   `${REACT_APP_GRAASP_API_HOST}/spaces/${id}/offline-structure`;
 
 export const GET_SPACES_NEARBY_ENDPOINT = `${REACT_APP_GRAASP_HOST}/spaces/nearby`;
+
+export const REACT_APP_GRAASP_LOGIN = 'https://graasp.eu/login';