Spring boot, Render static page - spring-security

this is my security config:
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/login","/newuser").permitAll()
.antMatchers("/css/**").permitAll()
.antMatchers("/js/**").permitAll()
.antMatchers("/**").hasRole("USER").anyRequest().authenticated()
.and()
.formLogin()
.loginPage("/login")
.permitAll()
.and()
.httpBasic()
.and()
.csrf()
.csrfTokenRepository(csrfTokenRepository())
.and()
.addFilterAfter(new CsrfHeaderFilter(), CsrfFilter.class);
}
First of all i'm redirected to login page when i'm not authenticated.
Second when i'm trying to create a new user requesting this path "/newuser" Response status is ok but the page isn't displayed .
These are my Controller methods:
#RequestMapping("/login")
public String login() {
return "loginpage.html";
}
#RequestMapping(value="/newuser")
public String newUser() {
return "signup.html";
}
This is my loginpage.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="css/angular-bootstrap.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="AuthenticationController">
<form role="form" ng-submit="signin()">
<div class="form-group">
<label for="username">Username:</label> <input type="text"
class="form-control" id="username" name="username" ng-model="credentials.username"/>
</div>
<div class="form-group">
<label for="password">Password:</label> <input type="password"
class="form-control" id="password" name="password" ng-model="credentials.password"/>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<a href ng-click="newuser()">Create new account</a>
</div>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/init.js"></script>
<script>
angular.element(document).ready(function() {
code.application.initialize(function() {
angular.bootstrap(document, ['authentication']);
}, function(error) {
console.log("Error while initializing Application Content Developer:", error);
});
});
</script>
<script src="js/AuthenticationController.js"></script>
</body>
</html>
This is my signup.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="css/angular-bootstrap.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<p>SIGNUP</p>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/init.js"></script>
<script>
angular.element(document).ready(function() {
code.application.initialize(function() {
angular.bootstrap(document, ['authentication']);
}, function(error) {
console.log("Error while initializing Application Content Developer:", error);
});
});
</script>
<script src="js/AuthenticationController.js"></script>
</body>
</html>
And this is my project main structure:
The thing i cannot understand is : Why login page is rendered successfully but signup page is ignored and not rendered at all.

Would suggest you to try a default success url. Eg:
.loginPage("/login").defaultSuccessUrl("/newuser", true)

Related

When I will write something in textbox1 I want to display the same text in textbox 2 also

I have made two textbox and I will give an ID of text box1 and textbox2 and this is the code -
<input type="text" id="textbox1"> <input type="text" id="textbox2">
The problem is when I will write something in textbox1 i want to display it in textbox 2 also
Try this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="text" id="textbox1" onkeyup="previewText(this.value)" placeholder="">
<br />
<input type="text" id="textbox2" />
<script>
function previewText(name) {
document.getElementById("textbox2").value = name;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="input1" id="input1" onkeypress="myfunction(event)">
<input type="text" name="input2" id="input2" value="">
<script>
function myfunction(t) {
var i=document.getElementById("input2")
if(t.key=="Enter"){
i.value=document.getElementById("input1").value
}
else{
i.value=document.getElementById("input1").value+t.key;
}
}
</script>
</body>
</html>

Xtext Content Assist not triggered by CTRL+SPACE inside the Orion web editor

I am trying to use Xtext (2.14.0) together with the Orion web editor, but even with a simple example the Content Assist is not triggered by CTRL+SPACE inside the Orion editor.
From what I know, CTRL+SPACE is used by default to trigger the Content Assist inside the Orion editor.
I also want to mention that if I add a character to the "contentAssistCharTriggers" option (as described in the Xtext documentation), than the specified character triggers the Content Assist, but CTRL+SPACE still doesn't work.
Does anyone know what could be the problem?
Update:
I am using the basic xtext state machine example.
Below is the html file used to embed the Orion Editor:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Example Web Editor</title>
<link rel="stylesheet" type="text/css" href="dependencies/orion/code_edit/built-codeEdit.css"/>
<link rel="stylesheet" type="text/css" href="xtext/2.14.0/xtext-orion.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="webjars/requirejs/2.3.2/require.min.js"></script>
<script type="text/javascript">
var baseUrl = window.location.pathname;
var fileIndex = baseUrl.indexOf("index.html");
if (fileIndex > 0)
baseUrl = baseUrl.slice(0, fileIndex);
require.config({
baseUrl: baseUrl,
paths: {
"text": "webjars/requirejs-text/2.0.15/text",
"jquery": "webjars/jquery/2.2.4/jquery.min",
"xtext/xtext-orion": "xtext/2.14.0/xtext-orion"
}
});
require(["dependencies/orion/code_edit/built-codeEdit-amd"], function() {
require(["xtext/xtext-orion"], function(xtext) {
xtext.createEditor({
baseUrl: baseUrl,
syntaxDefinition: "xtext-resources/generated/mylang-syntax",
contentAssistCharTriggers: " "
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Demo</h1>
</div>
<div class="content">
<div id="xtext-editor" data-editor-xtext-lang="mylang"></div>
</div>
</div>
</body>
</html>
here is the index html that works fine for me (content assist with crtl+space)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Example Web Editor</title>
<link rel="stylesheet" type="text/css" href="orion/code_edit/built-codeEdit.css"/>
<link rel="stylesheet" type="text/css" href="xtext/2.14.0/xtext-orion.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="webjars/requirejs/2.3.2/require.min.js"></script>
<script type="text/javascript">
var baseUrl = window.location.pathname;
var fileIndex = baseUrl.indexOf("index.html");
if (fileIndex > 0)
baseUrl = baseUrl.slice(0, fileIndex);
require.config({
baseUrl: baseUrl,
paths: {
"text": "webjars/requirejs-text/2.0.15/text",
"jquery": "webjars/jquery/2.2.4/jquery.min",
"xtext/xtext-orion": "xtext/2.14.0/xtext-orion"
}
});
require(["orion/code_edit/built-codeEdit-amd"], function() {
require(["xtext/xtext-orion"], function(xtext) {
xtext.createEditor({
baseUrl: baseUrl,
syntaxDefinition: "xtext-resources/generated/mydsl-syntax"
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Example MyDsl Web Editor</h1>
</div>
<div class="content">
<div id="xtext-editor" data-editor-xtext-lang="mydsl">
</div>
</div>
</div>
</body>
</html>
and here is how your stuff looks like
Updating requirejs to 2.3.6 and jquery to 3.3.1-1 make codeEdit with you version work.
We updated everything in Xtext 2.17 that will come in spring 2019.

React.js - Navbar is not defined

I get this error in my navbar.jsx file.Navbar is defined in react-bootstrap.js. I add react-bootstrap.js to my bundles, but it still not working. How to solve that?
var MyNavbar = React.createClass({
render: function () {
return (<Navbar>
<Navbar.Header>
<Navbar.Brand>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<MenuItem eventKey={1}>...</MenuItem>
<MenuItem eventKey={2}>...</MenuItem>
<MenuItem eventKey={3}>...</MenuItem>
<MenuItem eventKey={4}>...</MenuItem>
</Nav>
</Navbar.Collapse>
</Navbar>);
}
});
ReactDOM.render(<MyNavbar/>,document.getElementById('navbar'));
Im trying to bundle my js and jsx files to _Layout.cshtml
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new BabelBundle("~/bundles/main").Include(
"~/Scripts/react/react.js",
"~/Scripts/react/react-dom.js",
"~/Scripts/react/react-bootstrap.js",
"~/Scripts/jquery-1.10.2.js",
"~/Scripts/modernizr-2.6.2.js",
"~/Scripts/Components/Navbar.jsx"
));
BundleTable.EnableOptimizations = true;
}
}
Layout.csthml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navbar"></div>
#RenderBody()
</body>
</html>
#Scripts.Render("~/bundles/main")

Ruby on rails: JSON::ParserError and 500 Internal Server Error with instagram

I am using the instagram ruby gem. If i do more than 2 requests below is what the error i get.
Now, for the first two request it shows this
Processing by HomesController#index as JS
Processing by HomesController#index as */*
So when the third request happens now, it erros into (as said above) this
Completed 500 Internal Server Error in 4525ms
JSON::ParserError (757: unexpected token at '<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" class="hl-en not-logged-in ">
<head>
<meta charset="UTF-8" />
<title>Page Not Found • Instagram</title>
<meta name="robots" content="noimageindex" />
<link rel="Shortcut Icon" type="image/x-icon" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/favicon.ico" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon-precomposed" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-144x144-precomposed.png" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/scripts/jquery.js"></script>
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/scripts/bluebar.js"></script>
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/strings/strings_en.js"></script>
<script>
window._csrf_token = 'NOTPROVIDED';
window._jscalls = [
];
</script>
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/polyfills/polyfill_old.js"></script>
<script data-main="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/modules/main.js" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/scripts/require.js"></script>
<link rel="stylesheet" type="text/css" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/bluebar/bluebar_new.css" />
<link rel="stylesheet" type="text/css" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/distillery/dialog-main.css"/>
</head>
<body class=" p-error dialog-404">
<div class="root">
<div class="page">
<header class="top-bar top-bar-new">
<div class="top-bar-wrapper">
<h1 class="logo">Instagram</h1>
<div class="top-bar-left">
<ul class="top-bar-actions">
<li>
<a class="top-bar-home" href="/" label=Home><i></i></a>
</li>
</ul>
<div class="top-bar-search" id="top-bar-search">
</div>
</div>
<div class="top-bar-right account-state" id="top_bar_right">
<ul class="top-bar-actions">
<li id="link_profile" class="link-signin">
<a href="javascript:;" class="loginLink">
<i></i>
<strong>Log in</strong>
</a>
</li>
</ul>
</div>
</div>
</header> <!-- .top-bar -->
<div class="main">
<div class="error-container">
<h2>Page Not Found</h2>
<p>This page could not be found.<br />You might have followed an incorrect link.</p>
</div>
</div> <!-- .main -->
</div> <!-- .page -->
<footer class="page-footer" role="contentinfo">
<div class="wrapper">
<nav>
<ul>
<li>About us</li>
<li>Support</li>
<li>Blog</li>
<li>API</li>
<li>Jobs</li>
<li>Privacy</li>
<li>Terms</li>
</ul>
</nav>
<p class="copyright">© 2013 Instagram</p>
</div>
</footer>
<div id="reactModalMountPoint"></div>
</div> <!-- .root -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18105282-1']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>'
I think something is wrong with the header? Since I am doing the process via ajax, how can I force it to process it through JS? since thats what seems to work here I believe.
Here is my ajax code
{
$.ajax({
url: /home,
method: "post",
data: {
// data goes here
},
success: function(html)
{
if(html)
{
// html goes here
}else
{
// html goes here</center>');
}
}
I think instagram is blocking your request if you do to many request in a specific time
Instagram is serving up an error page instead of the JSON you expect. You need to check the response's status code (in this case it would be 404 instead of 200) to find out if the payload is JSON or HTML in the case of the error page.
After so much work on this, I found out for my case that it is because something in the content of the JSON data is screwing things around. That was my situation (and I hate how 500 status is so vague about the error, too)

My css3 transitions and JSON are clunky

I'm trying to create a slide out panel for my navigation for an ios app using phonegap. The problems occur when I get to the page below and the JSON starts loading. First of all I get this error in the console of xcode:
ImageIO: <ERROR> JPEG Corrupt JPEG data: premature end of data segment
After all the images load, my css3 transition is really choppy, even though it runs smoothly on every other page. What I'm wondering is if the AJAX script is constantly going out and trying to retrieve those images that have errors. Therefore I have an unending script that is causing ios to run choppy. Is there a way to close the script after it retrieves the images or do you have another idea on how to fix this? Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link type="text/css" rel="stylesheet" href="styles/iphone.css" />
<link href="styles/slideshow.css" type="text/css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script src="scripts/retina.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/phonegap.js"></script>
<link rel="stylesheet" media="all and (orientation:landscape)" href="styles/iphone-lan.css">
</head>
<body>
<div id="overlay"></div>
<div class="wrapper">
<img src="img/events.png" width="280" height="57" class="retina welcome" />
<div id="events">
</div>
</div>
<div id="nav-wrapper">
<ul>
<li class="home"><div><img src="img/home-icon-white.png" /></div>Home</li>
<li class="where"><div><img src="img/where-icon-gray.png" /></div>Where</li>
<li class="series"><div><img src="img/watch-icon-gray.png" /></div>Series</li>
<li class="events"><a class="active" href="events.html"><div><img src="img/events-icon-gray.png" /></div>Events</a></li>
<li class="more" ><a href="javascript:void(0)" id="more-toggle" ><div><img src="img/more-icon.png" /></div>More</a></li>
<li id="more-panel">
<a class="more-link" href="" style="border-top: none">READ 2012</a>
<a class="more-link" href="">Blog</a>
<a class="more-link" href="">Facebook</a>
<a class="more-link" href="">Twitter</a>
</li>
</ul>
</div>
<script>
$('#more-toggle').click(function() {
$('#overlay').toggleClass("activated");
$('#nav-wrapper').toggleClass("expanded");
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('img').retina();
});
$.ajax({
url: "http://www.lcbcchurch.com/mobileJSON/events",
dataType: "json",
success:function(data){
results(data);
}
});
function results(data) {
for(var i = 0; i<data.length;i++){
// this will log all of the images url
console.log(data[i].slideshow_image); // just access the part you want by it's name.
$("#events").append("<img src='"+data[i]["event-image"]+"'></a>");
}
picsReady();
}
</script>
<script type="text/javascript" src="scripts/klass.min.js"></script>
<script type="text/javascript" src="scripts/code.photoswipe-3.0.4.min.js"></script>
<script type="text/javascript">
function picsReady() {
(function(window, Util, PhotoSwipe){
$(document).ready(function(e){
var instance;
instance = PhotoSwipe.attach(
window.document.querySelectorAll('#slider a'),
{
target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
loop: true,
preventHide: true,
autoStartSlideshow: true,
captionAndToolbarHide: true,
margin: 0,
}
);
instance.show(0);
}, false);
}(window, window.Code.Util, window.Code.PhotoSwipe));
}
</script>
</body>
</html>

Resources