Creating website using DirectLineJS - javascript

I'm trying to set up the DirectLineJS to work in a website just for testing purposes right now. I've built the DirectLineJS repo and added /built/directLine.js to my website folder following the documentation here https://github.com/Microsoft/BotFramework-DirectLineJS
In the HTML page I'm just using a button to try to send a message through the direct line
<html>
<head>
<meta charset="UTF-8" />
<title>Bot Chat</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://unpkg.com/botframework-directlinejs/directLine.js" type="javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
.wc-chatview-panel {
width: 320px;
height: 500px;
position: relative;
}
.h2 {
font-family: Segoe UI;
}
</style>
</head>
<body>
<h2 style="font-family:Segoe UI;">Welcome to my custom Bot!</h2>
<section class="container">
<input id="clickMe" type="button" value="clickme" onclick="connectDirectLine();" />
</section>
<textarea id="myTextarea">
342 Alvin Road
Ducksburg</textarea>
<p>Click the button to change the contents of the text area.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var text = document.getElementById("myTextarea").value;
console.log(text)
}
</script></body>
</html>
<script>
function connectDirectLine() {
import { DirectLine } from 'botframework-directlinejs';
var directLine = new DirectLine({
secret: "mySecret",
});
directLine.postActivity({
from: { id: 'myUserId', name: 'myUserName' }, // required (from.name is optional)
type: 'message',
text: 'a message for you, Rudy'
}).subscribe(
id => console.log("Posted activity, assigned ID ", id),
error => console.log("Error posting activity", error)
);
directLine.activity$
.filter(activity => activity.type === 'message' && activity.from.id === 'yourBotHandle')
.subscribe(
message => console.log("received message ", message)
);
}
</script>
<html
When I run the website the error I'm getting is unexpected token import from import { DirectLine } from "botframework-directlinejs";
how can I properly import the botframework-directlinejs file so that I can use the DirectLine object?

You are mixing TypeScript with JavaScript.
To use Direct Line add the following to the HTML of your page:
<script src="http://unpkg.com/botframework-directlinejs/directLine.js"/>
Then you should delete your Import statement and finally, update the code that creates the DirectLine object to be:
var directLine = new DirectLine.DirectLine({
secret: "mySecret",
});
Notice the DirectLine.DirectLine

Related

nodemailer showing error in browser but not in editor

my question is that i know that chrome browser cant execute common js modules but in the node js file it is importing everything as common js and chrome is showing error and if i use ecmascript(e26)module to import nodemailer then it says cant import a module outsde a statement so their are two errors how to solve them or my technique is wrong to insert the nodemailer plz help me with it and thaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanks in advance
here is my code
import * as nodemailer from "nodemailer"
var a=Math.round(Math.random()*999999);
c=document.getElementById("p");
var b=c;
function otpch(){
if(document.getElementById("optcheck").value===a){
document.open();
document.write("You are successfully Logged In")
}
}
function otpm(){
alert(4236)
var mailOptions = {
from: 'mygmailid#gmail.com',
to: b,
subject: 'Your Otp',
text: 'Your onetime otp is'+a
};
alert(4236)
var transport = nodemailer.createTransport({
service: 'gmail.com',
auth: {
user:'friendsgmailid#gmail.com',
pass:'itssecret'
}
});
alert("hi123");
transport.sendMail(mailOptions,function(err,info){
if(err) {
document.getElementById("demo").innerHTML="Error while sending otp please check your gmail id which you filled is correct or not ";
} if(info){
document.getElementById("demo").innerHTML="Otp Sent Successfully";
}
});
<!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>
<script type="module" src="nodemailer/lib/nodemailer.js"></script>
<script src="sketch.js"></script>
</head>
<body >
<h3>Welcome to our site jain services</h3>
<h5>Write Your Gmail Address</h5>
<p id="p"><input id="gmailcheck"type="email" placeholder="Write Your Gmail" required></p>
<h4>click on the button to sign in</h4>
<button onclick="otpm()" type="submit"id="un" style="border: 3px solid black; border-radius: 50px;">Submit</button>
<h3 id="demo" style="color: red;">.</h3>
<input id="otpcheck" onclick="otpch()" type="number">
</body>
</html>

Input fields dead after clearing them

In my electron app I have a function to clear my input fields on a button press, but after using it I can't click and type into inputs anymore. However, if I open up the inspector window, they work again.
Why does this happen and how do I fix it?
Electron app's main.js:
const { app, BrowserWindow, Menu } = require('electron');
let win;
function createWindow() {
win = new BrowserWindow();
win.loadFile('window_main/index.html');
}
app.on('ready', createWindow);
index.html
<body>
<input type="text" id="testinput" />
<button id="clear">Clear</button>
<script src="index.js" type="text/javascript"></script>
</body>
The problematic bit of JS in index.js:
document.getElementById('clear').addEventListener("click", clear);
function clear() {
if (confirm("Clear all inputs?")) {
document.querySelectorAll('input').forEach((input) => {
input.value = '';
})
}
}
I reproduced your code after removing the script which is not explained why you are using it, anyhow below is a code using jQuery does the trick, this should get you to the right place at least.. if still didn't work with you post a better explanation of your code for a better help...
mark it as answered if it solves your problem....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<input type="text" id="testinput" />
<button id="clear">Clear</button>
<script>
$(document).ready(()=>{
document.getElementById('clear').addEventListener("click", clear);
})
function clear() {
if (confirm("Clear all inputs?")) {
document.querySelectorAll('input').forEach((input) => {
$(input).val('');
})
}
}
</script>
</body>
</html>
The problem was not clearing the inputs, but rather showing the confirm box. I used the following snippet instead:
dialog.showMessageBoxSync(
title: "Clear inputs",
message: "Clear all input boxes?",
type: "warning",
buttons: ["Cancel", "Ok"]
})
And now everything works as expected.

How to add a form/input/text to end of fetch() request?

Im building a random DogAPI image generator, where you put a number from 1-50 into a form text box, and hit send, and it returns the number you input into (linked) images printed to the console. I can manually put the number at the end of fetch, and it prints that amount to the console, but I'm having trouble connecting the number you put in your form to put it on the end of your fetch request.
Ive tried using template literals. If you manually type ${5} at the end of fetch, it prints 5 images to console. Great! But... how do I use Template Literals to connect what I put in the form to the end of the fetch. ${text} obviously doesn't work! Or am I doing it all wrong? Thanks for your help everyone!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>How Many?</title>
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h1>How Many Dog Pics Do You Want?</h1>
<form>
<input type="text" placeholder="1-50?">
<input type ="submit" value="Send">
</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
}
JS:
'use strict';
function getDogImage() {
fetch(`https://dog.ceo/api/breeds/image/random/${text}`)
.then(response => response.json())
.then(responseJson => console.log(responseJson));
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
getDogImage();
});
}
$(function() {
console.log('App loaded! Waiting for submit!');
watchForm();
});
You need to get the value from the input (using .val()), and pass it to getDogImage(text) (see comments in code):
function getDogImage(text) { // add the text parameter
fetch(`https://dog.ceo/api/breeds/image/random/${text}`)
.then(response => response.json())
.then(responseJson => console.log(responseJson));
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
var text = $('.number').val() || 3; // get the text from the input or use 3
getDogImage(text); // pass to getDogImage
});
}
$(function() {
console.log('App loaded! Waiting for submit!');
watchForm();
});
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h1>How Many Dog Pics Do You Want?</h1>
<form>
<input class="number" type="text" placeholder="1-50?">
<input type="submit" value="Send">
</form>
</div>

How do I get an alert or error message to display in my app if the api is unable to locate the breed name passed in by the user

function getDogImage(breed) {
fetch(`https://dog.ceo/api/breed/${breed}/images/random`)
.then(response => response.json())
.then(responseJson =>
displayResults(responseJson))
.catch(error => alert('Something went wrong. Try again later.'));
}
function displayResults(responseJson) {
console.log(responseJson);
//replace the existing image with the new one
$('.results-img').replaceWith(
`<img src="${responseJson.message}" class="results-img">`
)
//display the results section
$('.results').removeClass('hidden');
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
getDogImage($('#breed').val());
});
}
$(function() {
console.log('App loaded! Waiting for submit!');
watchForm();
});
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.hidden {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dog API Example</title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h1>Dog API: A Simple Example</h1>
<form>
<label for="breed">Breed</label>
<input type="search" name="phone" id="breed" placeholder="Enter Breed" title="dog breeds" required/>
<input type="submit" value="Get a dog pic!">
</form>
<section class="results hidden">
<h2>Look at this dog!</h2>
<img class="results-img" alt="placeholder">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
How do I get an alert or error message to display in my app if the api is unable to locate the breed name passed in by the user. At the moment a broken image link is displayed when passing in a non-valid breed name. Also im new to programming just here trying to learn from experienced developers
Heres a link to my code
https://repl.it/#Mike65/get-fetch-dog-api-example-DOM-3
img tag has onerror event, you can call alert function on that event like this
HTML
<img src=`${response.message}` class='result-img' onerror="myAlert()" />
Javascript
function myAlert() { alert("the image could not load"); }
JQuery
$('.results-img').replaceWith(
`<img src="${responseJson.message}" class="results-img">`
).on("error", function() { alert("the image could not load"); }

How to get 3DSecure modal to work with Stripe Payment intents?

I can make the payments work for test cards NOT requiring 3DSecure authentication. For cards that require it, no modal pops up. In the dashboard the payments will show up with status "The customer must complete an additional authentication step." In these cases I don't even reach the
then(function(result) {
if (result.error) {
alert(result.error.message);
}
else {
alert('Success!');
code part. With non-3ds test cards, this part is working fine.
Debugging the javascript will show me some meaningless exceptions from stripe js script.
Given that it works for some cards, the server site initialization of the payment intent, and passing of the clientsecret, can be ruled out, that part works.
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://js.stripe.com/v3/"></script>
<style type="text/css">
.auto-style1 {
width: 930px;
}
</style>
</head>
<form id="form1" runat="server">
<div>
<asp:HiddenField ID="hiddenClientSecret" runat="server" />
<input id="cardholder-name" type="text"/>
<!-- placeholder for Elements -->
<div id="card-element" class="auto-style1"></div>
<button id="card-button">
Submit Payment
</button>
</div>
</form>
<script >
var stripe = Stripe('mykey', {locale: 'en'});
var elements = stripe.elements({locale: 'en'});
var cardElement = elements.create('card', {hidePostalCode: true});
cardElement.mount('#card-element');
var cardholderName = document.getElementById('cardholder-name');
var cardButton = document.getElementById('card-button');
var clientSecret = document.getElementById('hiddenClientSecret').value;
cardButton.addEventListener('click', function(ev) {
stripe.handleCardPayment(
clientSecret, cardElement, {
payment_method_data: {
billing_details: {name: cardholderName.value}
}
}
).then(function(result) {
if (result.error) {
alert(result.error.message);
}
else {
alert('Success!');
}
});
});
</script>
OK, I needed to explicitly set button type to "button" - otherwise it does a submit roundtrip to the server: <button type="button" id="card-button">. That code part was taken directly from Stripe, seems they need to be a little more precise in their docs!

Categories