Make Login and Controls actual components

public/main.js

@@ -41,6 +41,10 @@ ipcMain.on('minimize', (event, data) =>
 { 
     window.hide();
 });
+ipcMain.on('login', (event, data) => 
+{ 
+    console.log(data)
+});
 
 app.on('window-all-closed', ()=>
 {

src/Components/Controls.js

@@ -1,18 +1,26 @@
 import './Controls.css';
 
-function Controls() {
+import React from "react";
-    const close = function () {window.ipcRender.send('close', ' ')};
-    const minimize = function () {window.ipcRender.send('minimize', ' ')};
-    const maximize = function () {window.ipcRender.send('maximize', ' ')};
 
+class Controls extends React.Component
+{
+
+  close() {window.ipcRender.send('close', ' ')};
+  minimize() {window.ipcRender.send('minimize', ' ')};
+  maximize() {window.ipcRender.send('maximize', ' ')};
+  render()
+  {
     return(
       <div className="Frame">
           <div className='Title'>Legendary</div>
-        <div className='minimize btControl' onClick={minimize}><span>_</span></div>
+          <div className='minimize btControl' onClick={this.minimize}><span>_</span></div>
-        <div className='Maximize btControl' onClick={maximize}><span>-</span></div>
+          <div className='Maximize btControl' onClick={this.maximize}><span>-</span></div>
-        <div className='Close btControl' onClick={close}><span>X</span></div>
+          <div className='Close btControl' onClick={this.close}><span>X</span></div>
       </div>
     );
   }
+}
+
+
 
 export default Controls;

src/Components/Login.js

@@ -1,17 +1,19 @@
+import React from 'react';
 import './Login.css';
 
-function Login()
+class Login extends React.Component
 {
-    function sendForm(formData) 
+    sendForm(formData) 
     {
         window.ipcRender.send('login', formData)
     }
-    function callRegister()
+    callRegister()
     {
         window.ipcRender.send('register')
     }
     
-
+    render()
+    {   
         return(
             <div className='container'>
                 <form className='loginForm'>
@@ -19,12 +21,13 @@ function Login()
                     <input className='emailImput'></input>
                     <label><span>Password</span></label>
                     <input className='password'></input>
-                <button className='bt Login' onClick={sendForm(this)}>Login</button>
+                    <button className='bt Login' onClick={this.sendForm(form)}>Login</button>
-                <button className='bt Register' onClick={callRegister}> Register</button>
+                    <button className='bt Register' onClick={this.callRegister}> Register</button>
                 </form>
             </div>
         )
     }
+}
 
 
 export default Login;