Skip to content

Commit ba41cfb

Browse files
UserUser
User
authored and
User
committed
to commit login changes
1 parent d526aa0 commit ba41cfb

File tree

3 files changed

+384
-0
lines changed

3 files changed

+384
-0
lines changed

‎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;

‎app/stylesheets/AddsModal.scss

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
@import './constants.scss';
2+
3+
.add-container {
4+
@include centerModal(30%, 500px);
5+
6+
/* Header */
7+
.add-header {
8+
width: 100%;
9+
padding: 20px 30px;
10+
text-align: center;
11+
border-bottom: thin solid $grey;
12+
background-color: $grey;
13+
border-top-left-radius: 5px;
14+
border-top-right-radius: 5px;
15+
color: $darkgrey;
16+
17+
h2 {
18+
@include modalHeader();
19+
font-size: 26px;
20+
font-weight: 300;
21+
color: $darkgrey;
22+
}
23+
}
24+
25+
/* Form */
26+
form {
27+
@include centerWithFlex($direction: column);
28+
padding: 20px 30px;
29+
width: 100%;
30+
font-size: 12px;
31+
font-family: 'Roboto';
32+
color: $darkgrey;
33+
34+
p,
35+
span {
36+
color: rgb(211, 0, 0);
37+
}
38+
39+
span {
40+
font-weight: 300;
41+
font-size: 90%;
42+
}
43+
44+
p {
45+
align-self: flex-start;
46+
}
47+
48+
div {
49+
@include centerWithFlex();
50+
51+
// <select /> margins
52+
&:first-of-type {
53+
margin-top: 20px;
54+
}
55+
56+
// <textarea>
57+
&:last-of-type {
58+
@include centerWithFlex($justify: flex-start, $align: flex-start);
59+
}
60+
61+
@include centerWithFlex(space-between);
62+
width: 100%;
63+
margin: 15px 0;
64+
65+
select,
66+
input,
67+
textarea {
68+
font-family: 'Roboto';
69+
font-size: 14px;
70+
padding: 5px;
71+
border: thin solid $grey;
72+
flex: 1;
73+
border-radius: 3px;
74+
color: $darkgrey;
75+
}
76+
77+
// Select field
78+
select {
79+
cursor: pointer;
80+
font-family: 'Roboto';
81+
height: 30px;
82+
margin: 0;
83+
appearance: none;
84+
transition: 0.2s;
85+
86+
&:hover {
87+
background-color: darken(#fff, 5%);
88+
}
89+
}
90+
91+
// Text input
92+
input {
93+
height: 30px;
94+
color: $darkgrey;
95+
}
96+
97+
// Textarea
98+
textarea {
99+
resize: none;
100+
height: 90px;
101+
}
102+
103+
label {
104+
width: 140px;
105+
font-size: 135%;
106+
font-weight: 400;
107+
}
108+
}
109+
110+
/* Submit button */
111+
button {
112+
font-family: 'Roboto';
113+
font-size: 16px;
114+
font-weight: 800;
115+
height: 40px;
116+
width: 50%;
117+
color: #fff;
118+
background-color: $header;
119+
transition: 0.1s;
120+
// originally was margin:20px 0;
121+
margin: 0px 110px;
122+
font-weight: 400;
123+
letter-spacing: 2px;
124+
border: none;
125+
padding: 4px;
126+
text-transform: uppercase;
127+
128+
129+
&:hover {
130+
background-color: $gblue;
131+
}
132+
}
133+
}
134+
}
135+
136+
::placeholder {
137+
color: rgb(201, 201, 201);
138+
}

0 commit comments

Comments
 (0)