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() {
-    const close = function () {window.ipcRender.send('close', ' ')};
-    const minimize = function () {window.ipcRender.send('minimize', ' ')};
-    const maximize = function () {window.ipcRender.send('maximize', ' ')};
+import React from "react";
 
-  return (
-    <div className="Frame">
-        <div className='Title'>Legendary</div>
-        <div className='minimize btControl' onClick={minimize}><span>_</span></div>
-        <div className='Maximize btControl' onClick={maximize}><span>-</span></div>
-        <div className='Close btControl' onClick={close}><span>X</span></div>
-    </div>
-  );
+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={this.minimize}><span>_</span></div>
+          <div className='Maximize btControl' onClick={this.maximize}><span>-</span></div>
+          <div className='Close btControl' onClick={this.close}><span>X</span></div>
+      </div>
+    );
+  }
 }
 
+
+
 export default Controls;

src/Components/Login.js

@@ -1,29 +1,32 @@
+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')
     }
     
-
-    return(
-        <div className='container'>
-            <form className='loginForm'>
-                <label><span>Email</span></label>
-                <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 Register' onClick={callRegister}> Register</button>
-            </form>
-        </div>
-    )
+    render()
+    {   
+        return(
+            <div className='container'>
+                <form className='loginForm'>
+                    <label><span>Email</span></label>
+                    <input className='emailImput'></input>
+                    <label><span>Password</span></label>
+                    <input className='password'></input>
+                    <button className='bt Login' onClick={this.sendForm(form)}>Login</button>
+                    <button className='bt Register' onClick={this.callRegister}> Register</button>
+                </form>
+            </div>
+        )
+    }
 }