I finally got around to fidelling with expressJS. I have written a simple RestAPI and also want to serve some static HTML that consumes (via clientside-JavaScript) my RestAPI.
The RestAPI works fine, but on some subroutes CSS and JS files are looked up under the wrong URL.
I have the following directory setup:
src
|---models
|---controllers
|---views
|---css
|---main.css
|---js
|---core.js
|---html
|---login.html
|---payments.html
|---static
Both HTML files link to e.g. the core.js using
<script src="core.js" type="text/javascript"></script>
in the footer.
The index.js looks as follows:
var app = express();
...
app.set('views', path.join(__dirname, 'views/html'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use( express.static( "src/views/js") );
app.use( express.static( "src/views/css") );
app.use( express.static( "src/views/static") );
...
app.get('/:env/:org', function(req, res){
res.render('payments.html');
})
app.get('/', function(req, res){
res.render('login.html');
})
Now the strange thing is, that if I call myserver.com/ the login page gets displayed with all styles and JS functionality, but if I open myserver.com/path1/path2 ExpressJS tries to look up the files under myserver.com/path1/ (e.g. myserver.com/path1/main.css) instead myserver.com/main.css.
The HTML for where it does not work (that get sent vie the /path1/path2 route) looks like this:
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="main.css"/>
<title>Greatpay login</title>
</head>
<body data-pagetype="login">
<header class="header">
<img src="logo.png"/>
</header>
<div class="body">
<div class="loginbox">
<span class="error"></span>
<div class="fieldline">
<span>Organisation:</span>
<input type="text" name="organisation"/>
<div class="clear"><!---clear---></div>
</div>
<div class="fieldline">
<span>Environment:</span>
<select name="environment"/>
<option value="TEST">Test</option>
<option value="PROD" selected="selected">Production</option>
</select>
<div class="clear"><!---clear---></div>
</div>
<div class="fieldline">
<span>Username:</span>
<input type="text" name="username"/>
<div class="clear"><!---clear---></div>
</div>
<div class="fieldline">
<span>Password:</span>
<input type="password" name="password"/>
</div>
<button id="login">Login</button>
</div>
</div>
<footer>
<script src="jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="core.js" type="text/javascript"></script>
</footer>
</body>
</html>
Can anyone please help me resolve this and explain why this behaves like that?
Thanks in advance.
Related
I want to upload a jpg file to imgur and get the jpg's link.
I have imgur API's Client Id and Client Secret.
Delphi code as below:
procedure TfrmMain.Button6Click(Sender: TObject);
var
client: TRESTClient;
request: TRESTRequest;
response: TCustomRESTResponse;
begin
client := TRESTClient.Create(nil);
try
client.BaseURL := 'https://api.imgur.com/';
Client.AddParameter('Client ID', '...', TRESTRequestParameterKind.pkHTTPHEADER);
Client.AddParameter('Client Secret', '...', TRESTRequestParameterKind.pkHTTPHEADER);
request := TRESTRequest.Create(nil);
try
request.Client := client;
request.Method := rmPOST;
request.Resource := 'a/C11W7xC';
request.Accept := 'application/json';
request.AddParameter('image','D:\linedw.jpg' , pkFile);
request.Execute;
response := request.Response;
if response.Status.Success then
begin
mo_response.Lines.add('Success: ' + slinebreak + response.Content);
end
else
begin
mo_response.Lines.add('Failed ' + response.StatusText + ': ' + slinebreak + response.Content);
end;
finally
request.Free;
end;
finally
client.Free;
end;
end;
The error information from response.Content is as below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>imgur: the simple 404 page</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="robots" content="noindex,nofollow" />
<meta name="keywords" content="images, funny pictures, image host, image upload, image sharing, image resize" />
<meta name="description" content="Imgur is home to the web's most popular image content, curated in real time by a dedicated community through commenting, voting and sharing." />
<meta name="copyright" content="Copyright 2014 Imgur, Inc." />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;" />
<link rel="stylesheet" type="text/css" href="https://s.imgur.com/min/404.css?1393899213" />
<!--[if IE 9]><link rel="stylesheet" href="https://s.imgur.com/include/css/ie-sucks.css?0" type="text/css" /><![endif]-->
</head>
<body>
<div class="nodisplay">
Imgur is home to the web's most popular image content, curated in real time by a dedicated community through commenting, voting and sharing.
</div>
<div id="hallway">
<div class="container">
<div id="cat1" class="painting">
<img src="//s.imgur.com/images/404/cat1weyes.png">
<div class="eye-container">
<div class="eye left">
<div class="pupil"></div>
</div>
<div class="eye right">
<div class="pupil"></div>
</div>
</div>
</div>
<div id="cat2" class="painting">
<img src="//s.imgur.com/images/404/cat2weyes.png">
<div class="eye-container">
<div class="eye">
<div class="pupil"></div>
</div>
</div>
</div>
<div id="giraffe" class="painting">
<img src="//s.imgur.com/images/404/giraffeweyes.png">
<div class="eye-container">
<div class="eye left">
<div class="pupil"></div>
</div>
<div class="eye right">
<div class="pupil"></div>
</div>
</div>
<img class="monocle" src="//s.imgur.com/images/404/monocle.png" />
</div>
<div id="cat3" class="painting">
<img src="//s.imgur.com/images/404/cat3weyes.png">
<div class="eye-container">
<div class="eye left">
<div class="pupil"></div>
</div>
<div class="eye right">
<div class="pupil"></div>
</div>
</div>
</div>
<div id="cat4" class="painting">
<img src="//s.imgur.com/images/404/cat4weyes.png">
<div class="eye-container">
<div class="eye left">
<div class="pupil"></div>
</div>
<div class="eye right">
<div class="pupil"></div>
</div>
</div>
</div>
</div>
</div>
<div class="footer textbox">
<h1>Zoinks! You've taken a wrong turn.</h1>
<p>Let's split up, gang. If you're looking for an image, it's probably been deleted or may not have existed at all.</p>
<p>If you are looking for groovy images, visit our gallery!</p>
<img src="https://s.imgur.com/images/imgurlogo-header.png">
</div>
<script type="text/javascript">
(function(widgetFactory) {
widgetFactory.mergeConfig('analytics', {
isAdmin: false
});
})(_widgetFactory);
</script>
<script type="text/javascript" src="https://s.imgur.com/min/404.js?1393899213"></script>
<script type="text/javascript">
var e404 = E404.getInstance();
e404.generalInit();
</script>
</body>
</html>
I have no experience with calling a REST API. I searched for Delphi demo information, but I did not find much. I need some guidance about this.
Delphi 10.4 / Windows 10
You are trying to upload an image to an invalid resource a/C11W7xC on the server, which is why you get an HTTP 404 Not Found response with HTML content.
According to the documentation, the resource for uploading images is 3/upload instead.
I haven't used the API myself, but it seems to me that the authorization you are using is not in line with Imgur's authorization.
Imgur's API allows you to upload images either anonymously via an Authorization: ClientID {YOUR_CLIENT_ID} HTTP header, or using an Authorization: Bearer {YOUR_ACCESS_TOKEN} HTTP header to tie the uploaded image to your account. See Authorization and OAuth on how to obtain the access token.
Note that you should not share your client credentials with the whole world, it has secret in its name, afterall. I recommend you should renew your client credentials at this point.
Non WebDev here trying to build a basic UI with primevue on vue3. Tried to run the basic demo but with some components included. Don't know if components come with their own CSS dependencies.
Bellow is my html code. I have also tried using a vue project with separate components and gottenthe same result
Basic example fails:
<html>
<head>
<meta charset="utf-8">
<title>PrimeVue Demo</title>
<link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet">
<link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet">
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
<script src="https://unpkg.com/vue#next"></script>
<script src="https://unpkg.com/primevue/inputtext/inputtext.min.js"></script>
</head>
<body>
<div id="app">
<p-inputtext v-model="val"></p-inputtext>
<h6>{{val}}</h6>
</div>
<div class="p-d-flex">
<div class="p-mr-2">Item 1</div>
<div class="p-mr-2">Item 2</div>
<div>Item 3</div>
</div>
<div class="p-grid">
<div class="p-col-4">4</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
</div>
<div class="p-grid">
<div class="p-col-2">2</div>
<div class="p-col-6">6</div>
<div class="p-col-4">4</div>
</div>
<script>
const {createApp, ref} = Vue;
const App = {
setup() {
const val = ref(null);
return {
val
};
},
components: {
'p-inputtext': primevue.inputtext
}
};
createApp(App).mount("#app");
</script>
</body>
</html>
Should render 1 row for flex items and 2 rows for numbers in grid layout. instead it renders all rows with no styling. What am I missing?:
In order to use prime vue's flex and grid layout, you need to load PrimeFlex.
https://primefaces.org/primevue/showcase/#/primeflex
The documentation only has npm setup but you may be able to include the following link.
<link href="https://cdn.jsdelivr.net/npm/primeflex#2.0.0/primeflex.min.css" rel="stylesheet">
In case you do it through npm, After installing the package, don't forget to include the CSS file, in my case, I included it in my main.js just adding this line.
import 'primeflex/primeflex.css';
https://primefaces.org/primevue/showcase/#/primeflex
The CDN method works!! However I downloaded the file and placed this
<link rel="stylesheet" href="static/primevue/primeflex.min.css" />
inside the head section of my html file.
However it did not work as per the documentation. I had to remove the p- for it to work:
<div id="app" class="grid">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
In my vue-bootstrap application I would like to use hidden input file control. When I use the standard input component it works (Load 1). If i try to do the same with the reactive component form vue-bootstrap library it does not work (Load 2). I would appreciate any hints what I might be doing wrong.
app = new Vue({
el: "#app",
data: {
files: '',
}
})
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" >
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
</head>
<body>
<div id="app">
<div>
<b-button #click="$refs.fileInput1.click()"> Load 1</b-button>
<input type="file" ref="fileInput1" style="display:none;"/>
</div>
<div>
<b-button #click="$refs.fileInput2.click()"> Load 2</b-button>
<b-form-file v-model="files" style="display:none;" ref="fileInput2" />
</div>
</div>
</body>
</html>
The $refs.fileInput2 here is referring to the Vue component, not really the input element, which is actually wrapped inside a div (you could see it if you inspect the rendered element). So one thing you could do (although it's ugly and not recommended, you should at least move this to the methods section):
app = new Vue({
el: "#app",
data: {
files: '',
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<div>
<b-button #click="$refs.fileInput1.click()"> Load 1</b-button>
<input type="file" ref="fileInput1" style="display:none;" />
</div>
<div>
<b-button #click="$refs.fileInput2.$el.querySelector('input[type=file]').click()"> Load 2</b-button>
<b-form-file v-model="files" style="display:none;" ref="fileInput2" />
</div>
</div>
Although I would say you should just use the native file input element since you are hiding the <b-form-file/> anyway.
It's working fine.You may check the below fiddle.
https://jsfiddle.net/tyagdvm5/
<b-form-file style="display:none;" v-model="file2" choose-label="Attachment2"></b-form-file>
Or for accurate solution please create a fiddle and upload the link.
I'm developing my application with riot.js and I want to use dropzone(http://www.dropzonejs.com/).
In my code:
index.html below,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<app></app>
<script src="dist/scripts/bundle.js"></script>
</body>
</html>
app.tag below,
var route = require('riot-route'); require("dropzone"); require('./main/home.tag'); require('./main/contents1.tag');
<app>
<main>
<contents></contents>
</main>
<script>
route(function(tagName) {
tagName = tagName || 'home'
riot.mount('contents', tagName)
})
route.start(true)
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css" />
</app>
home.tag below,
<home>
<div class="search-box"></div>
</home>
Then, I add <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form> into app.tag like this, it works right.
<contents></contents>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
but, I add it into home.tag like this,
<home>
<div class="search-box"></div>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
</home>
it doesn't work. Can anyone help me??
Try to update DropZone when mounting the tag, using on('mount', or also you can try with on('updated',
<home>
<div class="search-box"></div>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
<script>
this.on('mount', function(){
new Dropzone(".dropzone");
})
</script>
</home>
I'm following the uber ouath2 guide on this link.
I also have a registered uber app with an app id, client id, client secret, server token and a redirect URI:
http://localhost:8084/testapp
However, when I invoke https://login.uber.com/oauth/v2/authorize?client_id=[my_client_id]&response_type=code&redirect_uri=http://localhost:8084/testapp, instead of receiving a link with a token code (specified as a paremeter), I'm receiving the next html content:
<html class="no-js">
<!--<![endif]-->
<head>
<meta content="HTML Tidy for Java (vers. 26 sep 2004), see www.w3.org" name="generator"/>
<meta charset="utf-8"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<title>Uber</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<link type="image/x-icon" href="https://d1a3f4spazzrp4.cloudfront.net/login/images/favicon.17677bc2cadb48697a3d2da2efc65d8c.ico" rel="icon"/>
<link href="https://d1a3f4spazzrp4.cloudfront.net/login/style-login/style.770406eec666b67f729c6f924b60ee7e.css" rel="stylesheet" type="text/css"/>
<link href="https://d1a3f4spazzrp4.cloudfront.net/uber-fonts/2.0.1/superfine.css" rel="stylesheet" type="text/css"/>
<link href="https://d1a3f4spazzrp4.cloudfront.net/uber-icons/3.13.0/uber-icons.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="content text--center soft--top">
<div class="push-gutter--sides push-small--top">
<div id="login-content">
<div id="fb-root"/>
<script type="text/javascript">window.fbAsyncInit = function() {
FB.init({
appId : '277064115737714',
xfbml : false,
version : 'v2.2' // good until Oct-2016
});
if (window.asyncUberFacebook) {
window.asyncUberFacebook();
}
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/en_US/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">window.phone_email_placeholder = 'Email or Phone Number';
window.locale = 'MX';</script>
<p class="primary-font primary-font--semibold background-line push--top push--bottom">
<span>Sign In</span>
</p>
<form novalidate="novalidate" id="login-form" class="form" method="post">
<input value="1469850228-01-me6IZ7r1uyi5eZuFlK3sjFsIsAmBEkXjr_sR7f1RCAw=" name="_csrf_token" type="hidden"/>
<input name="access_token" data-js="access-token" type="hidden"/>
<a data-js="facebook-connect" class="btn btn--full btn--facebook soft-small--sides" href="#">
<span class="push--ends flush">Continue with Facebook</span>
</a>
<p class="primary-font primary-font--semibold background-line push--top push--bottom">
<span>or use email</span>
</p>
<div id="input-container" class="form-group push-tiny--top flush--bottom">
<input id="email" value="" placeholder="Email Address" class="text-input square--bottom" name="email" type="email"/>
</div>
<div class="form-group push--bottom">
<input id="password" placeholder="Password" class="text-input square--top" name="password" type="password"/>
</div>
<button type="submit" class="btn btn--large btn--full">Sign In</button>
</form>
<hr id="signin-signup-separator" class="push--top push-small--bottom"/>
<p class="text--center push-small--bottom">
<a class="forgot-password" href="https://login.uber.com/forgot-password">Forgot Password</a>
</p>
<p class="text--center">
Don't have an account?
Sign Up
</p>
</div>
</div>
<script src="https://d1a3f4spazzrp4.cloudfront.net/login/scripts/analytics.7a14669194cf515d1963bd28ce5e8290.js" type="text/javascript"/>
<script type="text/javascript">Analytics.init({
services: {
tealium: {
account: 'uber',
profile: 'main',
env: 'prod',
geo: 'MX'
}
}
});</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"/>
<script src="https://d1a3f4spazzrp4.cloudfront.net/login/scripts/login.b8edef605ff990f6a792faf084868f5c.js" type="text/javascript"/>
<script src="https://ws.audioeye.com/ae.js" type="text/javascript"/>
<script type="text/javascript">Analytics.track('load', 'login.pageview');</script>
</div>
</body>
</html>
I have searched for this kind of issue and also I have readed a lot of posts about uber api and oauth with no effective solutions.
What I'm doing wrong?
Thanks in advance for your help.
Are you saying that instead of a web page loading when you click that link in a browser, you're getting back a raw HTML response, or are you saying that you're making a GET request to that URL in some way other than opening it in a browser?
I'm responding to myself (partially), I hope this could help others.
According with Uber ouath2 guide, you must to explicitly display to your users a page where they must to interact putting their email account and password. When they do clic in "Login", they are redirected to an authorization page and, finally, when they accept the information access agreement, uber redirect to your specified uri, putting at the end, the authorization code.
However, my scenario is different and maybe I need to put another question, since what I need is to access to my own information using a registered uber app on my own uber account and, I need to automate the oauth2 validation process. I mean, this need to be an automated process where I will not there to interact with the uber agreement information statements: I need in an automated way, send my client id and all required data and retrieve an authorization code.