Hi I’m trying to share a variable ‘myName’ that will contain username from Login2.js which processes Login.html to App.js(main file)
Here is the code for Login2.js:
import React, { Component } from "react";
// if(document.readyState === 'loading') {
// document.addEventListener('DOMContentLoaded', afterLoaded);
// } else {
// //The DOMContentLoaded event has already fired. Just run the code.
// afterLoaded();
// }
//
// function afterLoaded(){
//Your initialization code goes here. This is from where your code should start
// document.readyState === "complete")
let aa = 'hello';
function authenticate(a){//authentication function
let c = a//is the user input
var t1 = false
var t2 = false
var b = c.search("[a-z][a-z][0-9][0-9][0-9][0-9][0-9]")
if(b == 0){
t1 = true
}
if(c.length == 7){
t2 = true
}
return t1&&t2//output true
}
function click(){
var n = 3;
window.onload = function(){
document.getElementById("myButton").onclick = function(){
var myName = document.getElementById("myText").value;
if(authenticate(myName)&&n!==0){
console.log("welcome "+myName)
let url = "http://localhost:3000/website"
window.open(url,"_self")
}
else if(n === 0){
alert("no more log-ins")
}
else{
alert("you have "+n+" chances to log-in again")
n--
}
}
}
}
class Login2 extends Component {
state = {};
render() {
click();
return (
<div>
<label><b>Username:</b></label>
<input placeholder="Enter Username" id="myText"></input>
<button type="button" id="myButton"> SIGN IN </button>
</div>
)
}
}
export default Login2;
And here is the code from the App.js file:
// import React from 'react';
import React, { Component } from 'react';
import './App.css';
import Navbar from './components/Navbar.js';
import { BrowserRouter as Router, Routes, Switch, Route } from 'react-router-dom';
import Home from "./components/pages/Home"
import Faq from "./components/pages/faq"
import Advocate from "./components/pages/Advocate"
import CalendarComponent from './components/pages/Calendar.js'
import Login2 from './components/pages/Login2'
import { Linking } from 'react-native'
import { Users } from './components/Backend/Users';
import { ProcessReq } from './components/Backend/ProcessReq';
import c from "./components/pages/Login2";
const Content = () => {
return <>
<Navbar></Navbar>
<Home></Home>
<Faq></Faq>
<Advocate></Advocate>
</>
}
function App() {
//should load name here and output it to user as a "welcome myName to the app" message
return (
//this splits up our page into the main section plus an additional calendar section
//appropriate pathing is used to get from one part to another
<div className={"container-fluid homepage-background"}>
<Router>
<Routes>
{/* <Route path={"/"} element={<Login />} /> */}
<Route path="website" element={<Content />} />
<Route path="calendar" element={<CalendarComponent />} />
<Route path="/" element={<Login2 />} />
<Route path="website/accountInfo" element={<Users/>} />
</Routes>
</Router>
</div>
);
}
export default App;
How do you propose I shul export variables as I have tried module.exports and require but it didn’t work among other methods. Thank you in advance!