I'm working on creating a dApp using Moralis framework.
The website is very simple.. I created the html for the login page
login.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.88.1">
<title>Tomorrow Marketplace</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/sign-in/">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="signin.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/web3#latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
</head>
<body class="text-center">
<main class="form-signin">
<img class="mb-4" src="tomorrow.svg" alt="" width="72" height="57">
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
<div class="form-floating">
<input type="text" class="form-control" id="user-username" placeholder="username">
<label for="user-username">Username</label>
</div>
<div class="form-floating">
<input type="email" class="form-control" id="user-email" placeholder="name#example.com">
<label for="user-email">Email address</label>
</div>
<button id="btn-login" class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017–2021</p>
</main>
<script src="main.js"></script>
</body>
</html>
in the main.js
const serverUrl = "https://qqujdxp5bgle.usemoralis.com:2053/server";
const appId = "fZ73Z90MnT7Kj2H4C1JYu8EOSOaHkIRwPQ3V0JtD";
Moralis.start({
serverUrl,
appId
});
async function login() {
const user = await Moralis.User.logIn("username", "email");
user.set("username", document.getElementById("user-username").value);
user.set("email", document.getElementById("user-email").value);
await user.save();
user = Moralis.User.current();
if (!user) {
user = await Moralis.authenticate();
}
console.log("logged in user:", user);
}
document.getElementById("btn-login").onclick = login;
The website is not connecting to Metamask knowing that im working on the latest updated snippets for Moralis.
On another note, is Moralis the best framework to work with.. or there is other suggestions.
Appreciate your help and thank you.
GM there!
So since you are logging in or authenticating w/ email + password already, the server will not allow you to authenticate again for another session with Metamask.
If you wanna connect your metamask after email login, use await Moralis.enableWeb3() instead and it will do the job!
Keep in mind that this is legacy now and our moralis library have been renamed moralis-v1 and the moralis library is NodeJS SDK for Moralis 2.0
if you have anymore questions, feel free to contact me and ask question in
Moralis discord: https://moralis.io/joindiscord
Moralis forum: https://forum.moralis.io
Hope this helps, Cheers!
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 days ago.
Improve this question
I have no clue what happened... I debugged all the files and searched "username" to try to find the second parameter username, but instead of email, username appears again:
http://127.0.0.1:2350/create?username=&pass=&username=
Here are the server code that hosts this html page:
#app.route('/create', methods=['GET', "POST"])
def createUser():
connection = establishSqliteConnection(os.path.join(os.getcwd(), 'users.db'))
connection.execute(table_connection)
username = request.args.get('username')
password = request.args.get('pass')
email = request.args.get('email')
emailTemp = email
if username is not None and password is not None:
passwordHashed = generate_password_hash(password)
dateStr = f'{date.today().strftime("%B %d, %Y")} {datetime.now().strftime("%H:%M:%S")}'
command = f'''
INSERT INTO "users" (id, username, passwordhashed, email, emailVerified, date)
VALUES ('{str(uuid.uuid4())}', '{username}', '{passwordHashed}', '{email}', 0, '{dateStr}')
'''
connection.execute(command)
connection.commit()
connection.close()
return 'Account created. Please verify your account with the link sent to your inbox to activate your account. This page will redirect in 5 seconds. <body onload="setTimeout(() => {window.location.href=\'/login?username=%s&pass=%s\'}, 5000)"></body>' % (username, password)
else:
user_agent = request.headers.get('User-Agent')
user_agent = user_agent.lower()
if 'iphone' in user_agent or 'android' in user_agent or 'ipad' in user_agent:
return '<html><body onload="alert("Login currently not supported on mobile devices.");"></body></html>'
else:
return render_template('/createAccount.html')
HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Create account</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/static/fonts/iconic/css/material-design-iconic-font.min.css">
<link rel="stylesheet" type="text/css" href="/static/vendor/animate/animate.css">
<link rel="stylesheet" type="text/css" href="/static/vendor/css-hamburgers/hamburgers.min.css">
<link rel="stylesheet" type="text/css" href="/static/vendor/animsition/css/animsition.min.css">
<link rel="stylesheet" type="text/css" href="/static/vendor/select2/select2.min.css">
<link rel="stylesheet" type="text/css" href="/static/vendor/daterangepicker/daterangepicker.css">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="/static/css/createAccount.css">
<link rel="icon" type="image/x-icon" href="{{url_for('static', filename='img/favicon.ico')}}">
</head>
<body>
<div class="limiter">
<div class="container-login100" style="background-image: url('/static/img/createaccount_bg.jpg');">
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<form class="login100-form validate-form">
<span class="login100-form-title p-b-49">
Create account
</span>
<div class="wrap-input100 validate-input m-b-23" data-validate = "Username is reauired">
<span class="label-input100">Username</span>
<input class="input100" type="text" name="username" id="username" placeholder="Type your username">
<span class="focus-input100" data-symbol=""></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Password is required">
<span class="label-input100">Password</span>
<input class="input100" type="password" name="pass" id="password" placeholder="Type your password">
<span class="focus-input100" data-symbol=""></span>
</div>
<br>
<div class="wrap-input100 validate-input m-b-23" data-validate = "Email is reauired">
<span class="label-input100">Email</span>
<input class="input100" type="email" name="username" id="email" placeholder="Type your email">
<span class="focus-input100" data-symbol=""></span>
</div>
<br>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn" onclick="createAccount()">Create</button>
</div>
</div>
<div class="flex-col-c p-t-155">
<span class="txt1 p-b-17">
Or
</span>
<a href="/login" class="txt2">
Sign in
</a>
</div>
</form>
</div>
</div>
</div>
<div id="dropDownSelect1"></div>
<script src="/static/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="/static/vendor/animsition/js/animsition.min.js"></script>
<script src="/static/vendor/bootstrap/js/popper.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/vendor/select2/select2.min.js"></script>
<script src="/static/vendor/daterangepicker/moment.min.js"></script>
<script src="/static/vendor/daterangepicker/daterangepicker.js"></script>
<script src="/static/vendor/countdowntime/countdowntime.js"></script>
<script src="/static/js/create.js"></script>
</body>
</html>
JS file:
function createAccount() {
username = document.getElementById('username').value;
password = document.getElementById('password').value;
email = document.getElementById('email').value;
window.location.href = `/create?username=${username}&pass=${password}&email=${email}`;
}
From the HTMl page, when the create button is pressed, the "createAccount()" function from the js file is triggered. In the javascript function the parameters are correct... username, password, and email.
Any thoughts on this magic?
I searched with the search in workspace function in VSCode but could not find a duplicate function or anything else...
I have a node.js proyect with a Back and FrontEnd. I installed normalizr to normalize the data I use on the backend. I could do it. I send that data to the frontEnd and I want to denormalize to show it. I pasted the normalizr CDN script in my HTML (before my index.js script). When I initialize denormalize, I get this error:
normalizr.browser.min.js:1 Uncaught TypeError:
Cannot read properties of undefined (reading 'denormalize')
at t (normalizr.browser.min.js:1:6345)
at new t.denormalize (normalizr.browser.min.js:1:6585)
at Socket.<anonymous> (index.js:64:22)
at Socket.Emitter.emit (index.js:143:20)
at Socket.emitEvent (socket.js:276:20)
at Socket.onevent (socket.js:263:18)
at Socket.onpacket (socket.js:228:22)
at Manager.Emitter.emit (index.js:143:20)
at Manager.ondecoded (manager.js:200:14)
at Decoder.Emitter.emit (index.js:143:20)
My index.js code is:
socket.on('normalizedData', data => {
let log = document.getElementById('log');
let normalData = new normalizr.denormalize(data.result, data.mesagges, data.entities);
console.log(normalData);
let messages = "";
})
My HTML code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="title">User info</h1>
<form id="userForm">
<label class="form-title">Email</label>
<input class="form-control" name="email">
<label class="form-title">Name</label>
<input class="form-control" name="name">
<label class="form-title">Lastname</label>
<input class="form-control" name="lastname">
<label class="form-title">Age</label>
<input class="form-control" name="age">
<label class="form-title">Nickname</label>
<input class="form-control" name="nickname">
<label class="form-title">Avatar</label>
<input class="form-control" name="thumbnail">
<input class="btn btn-primary" type="submit">
</form>
<span id="productsTemplate"></span>
<section>
<h1>Chat Service</h1>
<div>
<input id="chatBox">
</div>
<p id="log"></p>
</section>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/normalizr#3.6.1/dist/normalizr.browser.min.js">
</script>
<script src="/socket.io/socket.io.js"></script>
<script src="index.js"></script>
</body>
Can anybody help me with this? Thanks!
I have got a "Flight Booking System" in HTML and CSS & JS. But the problem is when the person books a flight it is supposed to update the text in their dashboard, but it just won't work. The "onclick function" of my button does just not connect to the JS function. Please help?
HTML For The Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>S.B.S Booking System</title>
<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>
</head>
<body>
<div class="sidenav">
Home
Booking
Dashboard
Contact
</div>
<h1 id="booktitle">Book A New Flight</h1>
<h2 id="booktitle2">To Book A New Flight, Please Fill In The Form Below</h3>
<form id="bookform" action="./contact.html">
<label style="font-weight: 700;" for="ftakeoff">Where Will You Be Taking Off From?</label> <br>
<input type="text" id="ftakeoff"><br>
<label style="font-weight: 700;" for="fland">Where Will You Be Landing?</label> <br>
<input type="text" id="fland"><br>
<label style="font-weight: 700;" for="fname">What Is Your First - And Last - Name(s)?</label> <br>
<input type="text" id="fname"><br>
<label style="font-weight: 700;" for="fphone">What Is Your Phone Number?</label> <br>
<input type="text" id="fphone"><br>
<label style="font-weight: 700;" for="fextra">Any Extra Info (E.G: Time Of Flight, Accocomadtion, etc)</label> <br>
<input type="text" id="fextra"><br>
<button id="fsubmit" type="submit" onclick="cbookings()">Submit Flight Booking</button>
</form>
<button onclick="cbookings()">Submit</button>
</body>
</html>
HTML For The Dashboard Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>S.B.S Booking Dashboard</title>
<link rel="stylesheet" href="style.css">
<script src="./script.js"></script>
</head>
<body>
<div class="sidenav">
Home
Booking
Dashboard
Contact
</div>
<h1 id="title1">Your Booking Dashboard</h1>
<h2 id="title2">Check Up On Your Flights</h2> <br> <br>
<h2 id="bstatus">No Bookings...</h2>
</body>
</html>
JS:
var statustext = document.getElementById("bstatus")
function cbookings() {
statustext.innerHTML = "1 Booking"
alert("Worked")
}
When I click "fsumbit" it should change "bstatus" to "1 Booking". It just doesnt work. My JS is connected to my pages because when I do a JS command outside of the function it works probably. I'm using basic JS and code.
Heres my github rep:
https://github.com/samykcodes/sbsystem
Any my website:
samsbookingsystem.netlify.app
You're trying to use JS code to modify other pages of the website, which is not possible. When you click the button on the Booking page, document.getElementById("bstatus") is going to return a null value, since there is no element that has the ID 'bstatus' on the Booking page.
This is fundamentally not how JavaScript works -- you cannot reference an element of a page that is not loaded. In order to click a button on one page, and have a value change on a different page, you would need to use far more complex methods than are relevant for your skill level.
In the short term, you can simply copy the button onto your dashboard page, and you will see that it works there.
I am working on vs code extension development(web view) and I want to separate the HTML file and the JS file.
When I use readFileSync() to read the HTML file, it successfully parses the HTML element in the web view, but the Javascript is not working.
I have tried to directly put all the JS code into the tag and it works. Therefore, I think maybe it is the relative path problem. I have tried different types of path:
'../js/main.js', '..\js\main.js'
and also the absolute path from my C drive and they are not working. I really have no idea about it.
My file structure:
My file reader from my extension.ts:
function getWebviewContent(url: vscode.Uri) {
// url.fsPath : xxxx\helloworld\src\html\index.html
return fs.readFileSync(url.fsPath, "utf8");
}
My HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello World Testing</title>
</head>
<body>
<h1> Hello Form </h1>
<div className="form-row">
<div className="form-group col-md-6">
<label>Email</label>
<input type="email" className="form-control" id="inputEmail" ref="email" />
</div>
<div className="form-group col-md-6">
<label>Name</label>
<input type="text" className="form-control" id="inputName" ref="name" />
</div>
</div>
<button type="button" id="greeting" class="btn btn-primary" style="margin: 10px">Submit</button>
<script type="text/javascript" src="../js/main.js"></script>
</body>
</html>
My JS File:
(function() {
const vscode = acquireVsCodeApi();
const btn = document.getElementById('greeting');
btn.onclick = () => {
const name = document.getElementById('inputName').value;
console.log(name)
vscode.postMessage({
command: 'greeting',
text: "Hello, " + name
});
}
}())
I have a new trial and it works, but now I don't know how to reference the correct path in my HTML file.
I changed my file reader function:
function getWebviewContent(url: vscode.Uri) {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello World Testing</title>
</head>
<body>
<h1> Hello Form </h1>
<div className="form-row">
<div className="form-group col-md-6">
<label>Email</label>
<input type="email" className="form-control" id="inputEmail" ref="email" />
</div>
<div className="form-group col-md-6">
<label>Name</label>
<input type="text" className="form-control" id="inputName" ref="name" />
</div>
</div>
<button type="button" id="greeting" class="btn btn-primary" style="margin: 10px">Submit</button>
<script type="text/javascript" src="${url}"></script>
</body>
</html>`;
}
That is how I call the function:
const scriptPathOnDisk = vscode.Uri.file(path.join(context.extensionPath, 'src/js', 'main.js'));
const scriptUri = scriptPathOnDisk.with({ scheme: 'vscode-resource' });
panel.webview.html = getWebviewContent(scriptUri);
When I print out getWebviewContent(), it is a html string and I found that:
<script src="vscode-resource:/c%3A/Users/Kelvinyu/Documents/test/helloworld-vscode-extension/helloworld/src/js/main.js">
I think this is the correct path, but how can I reference this in my html, I want it to be relative.
I am creating multi page phone gap app
I have basic structure including css and scripts in index.html , i am trying to load content dynamically into container from other html pages.
When I load content of other dynamic page css is not reflecting on pages.
I have style sheets locally but still that style sheet is not applying on login.html after load
Style sheet cdn path for any one sing
https://cdn.syncfusion.com/js/mobile/ej.mobile.all-latest.min.css
script cdn path https://cdn.syncfusion.com/js/mobile/ej.mobile.all-latest.min.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Login</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/ej.mobile.all.min.css" rel="stylesheet" />
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<div data-role="appview">
<div id="header" data-role="ejmheader" data-ej-title="Leap Agent Portal"></div>
<div id="content"></div>
</div>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/jquery-2.1.1.min.js"></script>
<script src="scripts/jquery.validate.min.js"></script>
<script src="scripts/jsrender.js"></script>
<script src="scripts/ej.mobile.all.min.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script>
var loadPage = function(url) {
$.ajax({
url: url,
}).done(function (data) {
$("#content").html(data);
});
}
(function () {
"use strict";
document.addEventListener('deviceready', onDeviceReady.bind(this), false);
function onDeviceReady() {
loadPage("views/login.html");
};
})();
</script>
</body>
</html>
login.html
<form id="loginform" method="post">
<h1>Enter Login Credentials</h1>
<br />
User Name
<input type="text" required id="username" name="username"><br>
<br />
Password
<input type="password" required id="password" name="password">
<div align="center">
<button type="submit" data-role="ejmbutton" data-ej-contenttype="textimage" data-ej-rendermode="auto"
data-ej-imageclass="fa fa-key" id="btnlogin">
Login
</button>
</div>
<div id="message"></div>
</form>
If I write everything on single without load style sheets are rendering
No Style rendered if I loaded with jquery load
Have you try safari development inspector to check your DOM/CSS ? sometimes it helps ,-)