I have a spring boot application that uses a GitHub oauth2 app for authentication.
When the successful authentication returns then one of the stylesheet files will be displayed. Literally. It is a random choice as to which one it is. The browser is firefox. The url will be http://machine:8090/css/demo.css. Resending http://machine:8090 will then display the screen properly.
Commenting out the css lines in the html will display the expected result after a return from github. But obviously I lose any formatting.
<!DOCTYPE html>
<html>
<head>
<title>Bikes Application</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width"/>
<script src="https://unpkg.com/vue#2.6.8/dist/vue.js"></script>
<script src="https://unpkg.com/vuex#3.1.0/dist/vuex.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios#0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash#4.13.1/lodash.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="css/demo.css"/>
<link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css"/> -->
</head>
<body>
<div id="app-3" class="container">
<template v-if="!authd">
Click here to Github Login
</template>
<template v-else>
Logged in as: <span id="user">{{ user }}</span>
<div>
<button v-on:click="logout" class="btn btn-primary">Logout</button>
</div>
<p>Get your greeting here</p>
<p>Listing Owners and their bikes with Thymeleaf here</p>
<p>Listing Owners and their bikes with vue in a thymeleaf template here</p>
</template>
</div>
<script type="application/javascript" src="authorisation.js"></script>
</body>
</html>
Does anyone know what is happening here?
Update from comments.
I don't think it is connected to grant types because if, before authentication, I go to machine:8090/greeting for instance then I am redirected to GitHub, authenticate and then passed to greeting (which does contain a subset of the css files listed in index.html). And that works; the contents of css is not listed.
The oauth app in GitHub has a redirect url of machine:8090/login. I have tried machine:8090/ and get the same result - after authentication, I see a css file listed.
Here is WebSecurityConfiguration.java
#Configuration
//#EnableEurekaClient
#EnableOAuth2Sso
#PropertySources(
{
#PropertySource("classpath:application-github.properties")
}
)
public class WebSecurityConfiguration extends WebSecurityConfigurerAdapter {
#Override
protected void configure(HttpSecurity http) throws Exception {
http
// .csrf()
// .disable()
.antMatcher("/**")
.authorizeRequests()
.antMatchers("/", "/login**", "/unpkg.com/**", "/cdn.jsdelivr.net","/error**","/*.js","/*.css")
.permitAll()
.anyRequest()
.authenticated()
.and()
.logout()
.logoutSuccessUrl("/")
.permitAll()
.and()
.csrf()
.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
}
}
I have expanded index.html. Are there other files that would be helpful?
and here is the javascript
vm = new Vue({
el: '#app-3',
data: function() {
return {
user: null,
baseurl: "http://mint191:9080/",
authd: false
}
},
methods: {
logout: function () {
axios({
method: 'post',
url: 'logout',
baseURL: this.baseurl
})
.then(response => {
console.log(`post logout: ${JSON.stringify(response)}`)
this.user = null
this.authd = !this.authd
console.log(`logout: authorised is ${this.authd}`)
console.log(`logout: user is ${this.user}`)
})
.catch(function (error) {
console.log("logout has gone wrong" + error)
})
}
},
mounted () {
axios({
method: 'get',
url: 'user',
baseURL: this.baseurl
})
.then(response => {
console.log(`get user: ${JSON.stringify(response)}`)
this.user = response.data.userAuthentication.details.login
this.authd = !this.authd
console.log(`authorised is ${this.authd}`)
})
.catch(function (error) {
console.log("nothing in user" + error)
})
}
})
Related
I want to make previews of one view on a homepage type view. To do so, I'd like to call a ListPreviews Action. I want this action to get the html body of a given view and then take the first hundred characters or so.
How can I access the actual html of a view from a controller?
This should be simple.
In your RouteConfig.cs set the defaults, mine looks like this:
defaults: new { controller = "Home", action = "Index2006", id = UrlParameter.Optional }
For your Controller/Model:
public class AView
{
public string theHtml { get; set; }
}
public class HomeController : Controller
{
[HttpPost]
public ActionResult Index2005(AView AView)
{
//put breakpoint here to see all the <html> here in view
var result = HttpUtility.UrlDecode(AView.theHtml, System.Text.Encoding.Default);
return Json(new
{
Greeting = "Returning data not used"
}
, #"application/json");
}
For your view:
<!DOCTYPE html>
<html id="PassMe">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index2005</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".btn").click(function () {
var AView = { theHtml: escape($("#PassMe").html()) }; //JSON.stringify($("#PassMe").html())
$.ajax({
url: '/Home/Index2005',
type: 'POST',
data: AView,
success: function (result) {
$("#detail").append(result.Greeting);
},
error: function (result) {
alert('Error');
}
});
});
});
</script>
</head>
<body>
<button style="margin-bottom: 20px;" class="btn btn-default">Click to pass HTML</button>
</body>
</html>
I am relatively new to Angularjs, and am building a website. When I try to inject todo.html into the body tags of index.html nothing happens. I am not getting any errors in the console. I have read many of the similar posts to mine, and have already tried
Remove the ng-include from the body of index.html
Moved the links for angualrjs and bootstrap from the body of index.html to the head
Originally I used Ng-route but it did not work, so I implemented ui-router
I have tried both ng-route and ui-router,and both run without any errors. I don't think it has anything to do with either.
index.html
<html ng-app="todoApp">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<title>Todo App</title>
<!-- Angular ans JS links-->
<script src="vendor/angular/angular.min.js"></script>
<script src="vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="app/app.js"></script>
<script src="app/services/todo.service.js"></script>
<script src="app/controllers/todo.controller.js"></script>
<!-- <script src="vendor/angular-route/angular-route.min.js"></script>-->
<!--Jquery and Bootstrap Links-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU"
crossorigin="anonymous"></script>
<!-- css links -->
<link href="vendor/bootstrap-css-only/css/bootstrap.min.css" rel="stylesheet"><!-- load bootstrap -->
<link rel="stylesheet" href="assets/css/todoApp.css">
<link rel="stylesheet" type="text/css" href="assets/css/Header-Picture.css">
</head>
<body >
<div ng-include="'app/views/header.html'"></div>
<!--<div ng-include="'app/views/footer.view.html'"></div>
-->
<ui-view></ui-view>
<!--<div ui-view></div>-->
</body>
</html>
App.js
var todoApp = angular.module('todoApp', [
'ui.router'
]);
todoApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('todo', {
url: "/",
templateUrl: 'views/todo.html',
controller: 'TodoController'
})});
todo.controller.js
todoApp.controller('TodoController', ['$scope', 'Todos', function TodoController($scope, Todos) {
$scope.formData = {};
console.log("in the TodoController");
// when landing on the page, get all todos and show them
Todos.get()
.success(function(data) {
$scope.todos = data;
});
// when submitting the add form, send the text to the spring API
$scope.createTodo = function() {
if(!$scope.todoForm.$valid) {
return;
}
Todos.create($scope.formData)
.success(function(data) {
$scope.formData = {}; // clear the form so our user is ready to enter another
$scope.todos.push(data);
});
};
// delete a todo after checking it
$scope.deleteTodo = function(id) {
Todos.delete(id)
.success(function(data) {
angular.forEach($scope.todos, function(todo, index){
if(todo.id == id) {
$scope.todos.splice(index, 1);
}
});
});
};
// when submitting the add form, send the text to the node API
$scope.saveTodo = function(todo) {
Todos.update(todo)
.success(function(data) {
$scope.editedTodo = {};
});
};
$scope.editedTodo = {};
$scope.editTodo = function(todo) {
$scope.editedTodo = todo;
}
$scope.revertTodo = function() {
$scope.editedTodo = {};
}
}]);
You should be using otherwise to force the first state to be loaded as below
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('todo', {
url: "/",
templateUrl: 'todo.html',
})
$urlRouterProvider.otherwise('/');
});
Your index.html will look like
<div ng-include="'app/views/header.html'"></div>
<ui-view>
</ui-view>
LIVE DEMO
I added the code posted by #Aravind to my project which I belive was an improvement on my own and was correct. But the issue was the file path to the todo.html. The file path in the original was views/todo.html
the correct path is app/views/todo.html
My original code:
todoApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('todo', {
url: "/",
templateUrl: 'views/todo.html',
controller: 'TodoController'
})});
Current Working Code
todoApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('todo', {
url: "/",
templateUrl: 'app/views/todo.html',
})
$urlRouterProvider.otherwise('/');
});
I'm completely brand new to React JS and am trying to create an application that will grab JSON data from a pokemon API, which I will then use to display on screen. Right now, I have it set up so that the user has to input the name of the pokemon they are looking for, i.e. pikachu, and when the search button is pressed, the application will make the API call to return the JSON. I've been searching for the past few days, and cannot seem to find anything to work with the way I currently have my code set up. How do I bind the JSON output to a component that I would then be able to display to the user?
Here's the js code (App.js)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactDOM from 'react-dom';
class App extends Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Text field value is: ' + this.state.value);
fetch('https://pokeapi.co/api/v2/pokemon/'+this.state.value+'/')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data.name +" "+ data.id);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
}
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<input type="text"
placeholder="enter name of pokemon here"
value={this.state.value}
onChange={this.handleChange}
/>
<button type="button" onClick={this.handleSubmit}>Search the Pokedex</button>
</div>
);
}
}
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tag above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>
Screenshot of issue:
http://imgur.com/a/g9H5r
Try this
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactDOM from 'react-dom';
class App extends Component {
constructor(props) {
super(props);
this.state = {
value: '',
data: {} //filled by fetch data from API
};
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Text field value is: ' + this.state.value);
var _this = this;
fetch('https://pokeapi.co/api/v2/pokemon/'+this.state.value+'/')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data.name +" "+ data.id);
_this.setState({data: data});
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
_this.setState({data: {}});
});
}
render() {
var data = this.state.data;
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<input type="text"
placeholder="enter name of pokemon here"
value={this.state.value}
onChange={this.handleChange.bind(this)}
/>
<button type="button" onClick={this.handleSubmit.bind(this)}>Search the Pokedex</button>
<h3>{data.id}</h3>
<h3>{data.name}</h3>
</div>
);
}
}
ReactDOM.render(App, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tag above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>
I have nested abstract view in my angular js project.
I got Error : Cannot transition to abstract state 'main.middle' when i move to nested abstract view.
My html code is as below:
<!DOCTYPE html>
<html ng-app="nesting">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-router#*" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="testController">
href:
<br />
#/alpha
#/beta
#/gama
<button ng-click="moveToMiddle()">move to middle</button>
<br />
ui-sref:
<br />
<a ui-sref="main.middle.alpha">main.middle.alpha</a>
<a ui-sref="main.middle.beta">main.middle.beta</a>
<a ui-sref="main.middle.gama">main.middle.gama</a>
<hr />
<div ui-view=""></div>
<script>
'use strict';
var $urlRouterProviderRef = null;
var $stateProviderRef = null;
var app = angular.module('nesting', [
'ui.router'
]);
app.config(function( $urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/alpha');
$stateProvider
.state('main', {
url: "",
abstract: true,
template: '<div><h3>Main</h3><div ui-view=""></div></div>',
})
.state('main.middle', {
url: "",
abstract: true,
template: '<div><h4>Middle</h4><div ui-view=""></div></div>',
})
.state('main.middle.alpha', {
url: "/alpha",
template: '<div><h5>The leaf: {{state.name}}</h5></div>',
controller: function ($scope, $state){
$scope.state = $state.current;
},
})
.state('main.middle.beta', {
url: "/beta",
template: '<div><h5>The leaf: {{state.name}}</h5></div>',
controller: function ($scope, $state){
$scope.state = $state.current;
},
})
.state('main.middle.gama', {
url: "/gama",
template: '<div><h5>The leaf: {{state.name}}</h5></div>',
controller: function ($scope, $state){
$scope.state = $state.current;
},
})
;
});
app.controller('testController', function ($scope, $state) {
$scope.moveToMiddle = function () {
$state.go('main.middle');
}
})
</script>
</body>
</html>
When I click on move to middle button I got error.
How to move to abstract view?
I have referred this but its not useful in my case.
You never go to an abstract state. From the docs:
An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.
If you define main.middle.alpha, main.middle.beta, and main.middle.gama as not abstract, you can transition to those.
As mentioned in angualr docs
An abstract state can have child states but can not get activated
itself. An 'abstract' state is simply a state that can't be
transitioned to. It is activated implicitly when one of its
descendants are activated.
app.controller('testController', function ($scope, $state) {
$scope.moveToMiddle = function () {
$state.go('main.middle.alpha');
}
as abstract state cannot be instantiated and can't viewed. if you want to access then remove abstract line
I'm getting crazy about how AngularJS + Typescript work together. Basically what I want to achieve is a simple call to a method. The problem is that I have to use a certain kind of "architecture" and I don't know where I made the mistake.
this is my interface (IAthorizathionScope.ts):
module Main {
export interface IAuthorizationScope extends ng.IScope {
vm: AuthenticationController;
login: (username: string, password: string) => void;
}
}
this is my controller (AuthorizationController.ts):
module Main {
'use strict';
export class AuthenticationController
{
public static $inject = [
'$scope',
];
private username: string;
private password: string;
constructor($scope : IAuthorizationScope)
{
$scope.vm = this;
}
login = function (username:string, password:string) {
alert("authorised!");
}
}
}
and this is my view (secretTest.html):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div ng-controller="AuthenticationController">
<label>Username: <input type="text" ng-model="username"/> </label>
<label>Password: <input type="password" ng-model="password"/> </label>
<button ng-click="vm.login(username, password)">
Login
</button>
</div>
</body>
</html>
EDIT
This is my application file (Application.js)
module Main
{
'use strict';
var txtmobileMvc = angular.module('txtmobileMvc', ['kendo.directives'])
// factories
.factory('Main.ItemCommonModel', function ($rootScope)
{
return new Main.ItemCommonModel($rootScope);
})
// controllers
.controller('detailCollectionController', DetailCollectionController)
.controller('detailController', DetailController)
.controller('gridController', GridController)
.controller('authenticationController', AuthenticationController)
.controller('wijmoController', WijmoController)
// services
.service('itemStorage', ItemStorage)
.service('itemDataService', ItemDataService)
// Page routing
.config(($routeProvider: ng.IRouteProvider) =>
{
$routeProvider
.when('/', { controller: 'detailController', templateUrl: 'views/detail.html' })
.when('/grid', { controller: 'gridController', templateUrl: 'views/grid.html' })
.when('/secret', { controller: AuthenticationController, templateUrl: 'views/secretTest.html'})
.when('/wijmo', { controller: WijmoController, templateUrl: 'views/wijmoTest.html' })
.otherwise({ redirectTo: '/' });
});
}
Probably I'm also confused about how this stuff works here.
Thank you in advance.
Basically the problem was that I added this code to my HTML file
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
and the controller couldn't fire up my methods. Also I realised that if I add the controller to the
angular.module(...).controller(...)
I needn't to add the ng-controller to the HTML file. With those two things, the login() method was fired up by the ng-click.
Thank you anyway for your help.
As mentioned in the comment you are missing an ng-app
Additionally the controller name you are registering .controller('authenticationController', AuthenticationController) should match the name in ng-controller ng-controller="AuthenticationController"
I would make both AuthenticationController