Skip to content

Commit bee62ea

Browse files
J-DannyMartinezJ-DannyMartinez
authored
Merge pull request #7 from tngraves/frontLogin
Front login
2 parents d526aa0 + 2cea7fb commit bee62ea

File tree

4 files changed

+464
-5
lines changed

4 files changed

+464
-5
lines changed

‎app/components/Home.tsx

Lines changed: 80 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,92 @@
1-
import React from 'react';
1+
import { faGlassMartiniAlt } from '@fortawesome/free-solid-svg-icons';
2+
// import axios from 'axios';
3+
import React, { useState } from 'react';
24
import { Link } from 'react-router-dom';
35

46
import '../stylesheets/Home.scss';
7+
//
8+
const { ipcRenderer } = window.require('electron');
9+
10+
interface PersonProps {
11+
email: string;
12+
password: string;
13+
}
14+
15+
type ClickEvent = React.MouseEvent<HTMLElement>;
16+
17+
// const [email] = React.useState<string>('');
18+
// const [password] = React.useState<string>('');
19+
// function handleChange(e) {
20+
21+
// }
22+
const adminUser = {
23+
email: "[email protected]",
24+
password: "admin123"
25+
}
526

627
const Home = React.memo(function Home(props) {
28+
const [open, setOpen] = useState<boolean>(false);
29+
const [loginInfo, setLoginInfo] = React.useState<PersonProps>({
30+
email: '',
31+
password: ''
32+
});
33+
34+
function myFunction() {
35+
location.replace("/applications")
36+
}
37+
function pageRedirect(){
38+
setTimeout(function(){
39+
window.location.href = '/applications';
40+
}, 5000);
41+
}
42+
43+
function submitLogin(e: any) {
44+
e.preventDefault();
45+
// console.log(e);
46+
console.log(loginInfo);
47+
//check local state if the username is there
48+
if(loginInfo.email === adminUser.email && loginInfo.password === adminUser.password){
49+
console.log("Logged In");
50+
myFunction();
51+
// alert('Welcome Back!\n\n (\\__/) \n (=\'.\'=) \n(\'\')__(\'\')')
52+
// // pageRedirect();
53+
// // "window.location='/applications'"
54+
} else {
55+
alert('Log In credentials are wrong!\n\n (\\__/) \n (=\'.\'=) \n(\'\')__(\'\')')
56+
}
57+
}
58+
//database connection/fetch
59+
function checkLoginStatus() {
60+
// axios('http://localhost:3000/loggedIn', {withCredentials: true})
61+
}
62+
63+
64+
765
return (
866
<div className="home">
9-
<p className="welcomeMessage">Your all-in-one application monitoring tool</p>
10-
<Link className="link" to="/applications">
67+
<p className="welcomeMessage">Welcome Back To Chronos! Your all-in-one application monitoring tool</p>
68+
69+
<form className="form" onSubmit={submitLogin}>
70+
<label className="login">
71+
<input type="email" name="email" id="email" placeholder="[email protected]" onChange={e => setLoginInfo({...loginInfo, email: e.target.value})} ></input>
72+
<br></br>
73+
<input type="password" name= "password" id="password" placeholder="enter password" onChange={e => setLoginInfo({...loginInfo, password:e.target.value})} ></input>
74+
<hr />
75+
</label>
76+
<br></br>
77+
<br></br>
78+
<br></br>
79+
<button className="link" id="submitBtn" type="submit" onClick={() => (true)}>
80+
Log In
81+
</button>
82+
</form>
83+
84+
<br></br>
85+
{/* <Link className="link" to="/applications">
1186
Get Started
12-
</Link>
87+
</Link> */}
1388
</div>
1489
);
1590
});
1691

17-
export default Home;
92+
export default Home;

‎app/context/LoginContext.tsx

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React, { useState, useCallback } from 'react';
2+
import Electron from 'electron';
3+
4+
const { ipcRenderer } = window.require('electron');
5+
6+
export const LoginContext = React.createContext<any>(null);
7+
8+
const LoginContextProvider: React.FC = React.memo(({ children }) => {
9+
// const [loginData, setLoginData] = useState([]);
10+
/**
11+
// // * MANAGES THE FOLLOWING DATA AND ACTIONS:
12+
// * @property {Object} loginData
13+
* @method fetchLoginData
14+
*/
15+
function tryParseJSON(jsonString: any) {
16+
try {
17+
const o = JSON.parse(jsonString);
18+
// Handle non-exception-throwing cases:
19+
// Neither JSON.parse(false) or JSON.parse(1234) throw errors, hence the type-checking,
20+
// JSON.parse(null) returns null, and typeof null === "object",
21+
// so we must check for that, too. Thankfully, null is falsey, so this suffices:
22+
if (o && typeof o === "object") {
23+
return o;
24+
}
25+
}
26+
catch (e) {
27+
console.log({ error: e })
28+
};
29+
return false;
30+
};
31+
32+
const connectToDB = useCallback((index: number, application: string) => {
33+
//takes a channel as parameter
34+
ipcRenderer.removeAllListeners('databaseConnected');
35+
//takes a channel and args(type is any) as parameters
36+
ipcRenderer.send('connect', index);
37+
// console.log(`${__dirname}/ApplicationContext.tsx/connectToDB: ** between connect & servicesRequest`);
38+
39+
// Response from data.ts
40+
//ipcRenderer.on(channel, listener) channel-str listener-func
41+
ipcRenderer.on('databaseConnected', (event: Electron.Event, data: any) => {
42+
// Parse JSON response
43+
const result = data;
44+
// if (result) console.log(`${__dirname}/ApplicationContext.tsx/connectToDB: ${result}`);
45+
46+
//unsure how to get to match line 47
47+
fetchLoginData(application, result);
48+
});
49+
}, []);
50+
// Fetches all data related to communication for a particular app
51+
const fetchLoginData = useCallback((email: string, password: string) => {
52+
/**
53+
* Caches results of requesting communication data for a specific app
54+
* Communication data will be the same across the microservices. Prevents
55+
* fetch requests that result in repeating data
56+
*/
57+
if (email && password) {
58+
ipcRenderer.removeAllListeners('loginResponse');
59+
// setCurrentApp(app)
60+
ipcRenderer.send('loginRequest', email);
61+
ipcRenderer.on('loginResponse', (event: Electron.Event, data: any) => {
62+
let result: any;
63+
// Store resulting data in local state
64+
if (tryParseJSON(data)) result = JSON.parse(data);
65+
// if (result.length) console.log('Number of data points (comms):', result.length);
66+
console.log('successful login');
67+
});
68+
}
69+
}, []);
70+
71+
return (
72+
<LoginContext.Provider
73+
value={{ connectToDB, fetchLoginData }}
74+
>
75+
{children}
76+
</LoginContext.Provider>
77+
);
78+
});
79+
80+
export default LoginContextProvider;

‎app/modals/AddsModal.tsx

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import React, { useState, useContext, useCallback } from 'react';
2+
import { DashboardContext } from '../context/DashboardContext';
3+
import '../stylesheets/AddsModal.scss';
4+
import PersonIcon from '@material-ui/icons/Person';
5+
6+
7+
interface IFields {
8+
// database: string;
9+
URI: string;
10+
name: string;
11+
// description: string;
12+
}
13+
14+
// interface IDashboard {
15+
// addApp: (fields: IFields) => void;
16+
// }
17+
18+
interface AddsModalProps {
19+
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
20+
}
21+
22+
type InputElement = React.ChangeEvent<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement>;
23+
type FormElement = React.FormEvent<HTMLFormElement>;
24+
25+
const AddsModal: React.FC<AddsModalProps> = React.memo(({ setOpen }) => {
26+
// const { addApp }: IDashboard = useContext(DashboardContext);
27+
28+
const [fields, setFields] = useState<IFields>({
29+
// database: 'SQL',
30+
URI: '',
31+
name: '',
32+
// description: '',
33+
});
34+
35+
// Submit form data and save to database
36+
const handleSubmit = (event: FormElement) => {
37+
// event.preventDefault();
38+
// addApp(fields);
39+
setOpen(false); // Close modal on submit
40+
};
41+
42+
// Handle form changes
43+
const handleChange = (event: InputElement) => {
44+
const { name, value } = event.target;
45+
setFields({
46+
...fields,
47+
[name]: value,
48+
49+
});
50+
};
51+
//uncomment below to bring back database, description-TG
52+
// const { database, URI, name, description } = fields;
53+
const { URI, name } = fields;
54+
55+
return (
56+
<div className="add-container">
57+
<div className="add-header">
58+
<div><h2>Welcome Back</h2> <PersonIcon className="navIcon" id="personIcon" /></div>
59+
60+
</div>
61+
<form onSubmit={handleSubmit}>
62+
{/* <p>Required*</p> */}
63+
<div>
64+
{/* <label htmlFor="db-type">
65+
Type<span>*</span>
66+
</label> */}
67+
{/* <select id="db-type" name="database" value={database} onChange={e => handleChange(e)}>
68+
<option value="SQL">SQL</option>
69+
<option value="MongoDB">MongoDB</option>
70+
</select> */}
71+
</div>
72+
{/* <div>
73+
<label htmlFor="db-uri">
74+
EMAIL<span>*</span>
75+
</label>
76+
<input
77+
id="db-uri"
78+
name="URI"
79+
value={Email}
80+
onChange={e => handleChange(e)}
81+
placeholder="EMAIL ADDRESS"
82+
required
83+
/>
84+
</div> */}
85+
86+
<div>
87+
<label htmlFor="db-uri">
88+
<span></span>
89+
</label>
90+
{/* <input
91+
id="db-uri"
92+
name="URI"
93+
value={URI}
94+
onChange={e => handleChange(e)}
95+
placeholder="ENTER EMAIL ADDDRESS"
96+
required
97+
/> */}
98+
</div>
99+
<div>
100+
<label htmlFor="db-name">
101+
102+
<p><h4>ACCESS LEVEL: </h4></p>
103+
</label>
104+
105+
106+
{/* <label htmlFor="db-name">
107+
PASSWORD<span>*</span>
108+
</label> */}
109+
{/* <input
110+
id="db-name"
111+
type="text"
112+
name="name"
113+
value={name}
114+
onChange={e => handleChange(e)}
115+
placeholder="ENTER PASSWORD"
116+
required
117+
/> */}
118+
</div>
119+
<div>
120+
{/* <label htmlFor="db-desc">Description</label>
121+
<textarea
122+
id="db-desc"
123+
name="description"
124+
value={description}
125+
onChange={e => handleChange(e)}
126+
placeholder="Add a short description"
127+
/> */}
128+
</div>
129+
<button>Cancel</button>
130+
<br></br>
131+
<button onClick={e =>(alert('Are you sure you want to log out?'))}>Log Out</button>
132+
{/* <!-- sign up with Google button --> */}
133+
{/* <div className="col-lg-14"> */}
134+
{/* <div className="card">
135+
<div className="card-body"> */}
136+
{/* href makes a request to the following path-->change as needed --> */}
137+
{/* <button className= 'googleL'>
138+
<a className="btn btn-block btn-social btn-google" href="/auth/google" role="button">
139+
<i className="fab fa-google"></i>
140+
Google Sign Up */}
141+
{/* </a>
142+
</button>
143+
</div> */}
144+
{/* </div>
145+
</div> */}
146+
147+
{/* <div className="col-sm-10">
148+
<div className="card">
149+
<div className="card-body">
150+
<button className= 'googleS'>
151+
{/* <!-- href makes a request to the following path-->change as needed --> */}
152+
{/* <a className="btn btn-block btn-social btn-google" href="/auth/google" role="button">
153+
<i className="fab fa-google"></i>
154+
Google Sign In
155+
</a>
156+
</button>
157+
</div>
158+
</div>
159+
// </div> */}
160+
161+
</form>
162+
</div>
163+
);
164+
});
165+
166+
export default AddsModal;

0 commit comments

Comments
 (0)