I'm trying to use the pgadmin4 container image with kerberos, according to https://www.pgadmin.org/docs/pgadmin4/development/kerberos.html.
The pgadmin webinterface keeps telling me "Delegated credentials not supplied." But the Authorization header is transmitted properly. What am I doing wrong`?
Here is a curl dump:
Command line:
kinit myuser
curl -v --negotiate --user : http://***MYHOST***/login
Output:
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0* Trying 172.28.28.133:80...
* TCP_NODELAY set
* Connected to ***MYHOST*** (172.28.28.133) port 80 (#0)
* Server auth using Negotiate with user ''
> GET /login HTTP/1.1
> Host: ***MYHOST***
> Authorization: Negotiate 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
> User-Agent: curl/7.68.0
> Accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Server: gunicorn
< Date: Tue, 07 Sep 2021 15:24:47 GMT
< Connection: keep-alive
< Content-Type: text/html; charset=utf-8
< Content-Length: 6073
< X-Frame-Options: SAMEORIGIN
< Content-Security-Policy: default-src ws: http: data: blob: 'unsafe-inline' 'unsafe-eval';
< X-Content-Type-Options: nosniff
< X-XSS-Protection: 1; mode=block
< Set-Cookie: pga4_session=f372e462-19be-4c4b-926f-d23469d51237!ckfFYMTygG5gvVXmXlhZglyHop4=; Expires=Wed, 08-Sep-2021 15:24:47 GMT; HttpOnly; Path=/; SameSite=Lax
<
{ [6073 bytes data]
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>pgAdmin 4</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- To set pgAdmin4 shortcut icon in browser -->
<link rel="shortcut icon" href="/favicon.ico?ver=50600"/>
<!-- Base template stylesheets -->
<link type="text/css" rel="stylesheet" href="/static/js/generated/style.css?ver=50600"/>
<link type="text/css" rel="stylesheet" href="/static/js/generated/pgadmin.style.css?ver=50600"/>
<link type="text/css" rel="stylesheet" href="/static/js/generated/pgadmin.css?ver=50600"/>
<!--View specified stylesheets-->
<script type="application/javascript">
/* This is used to change publicPath of webpack at runtime */
window.resourceBasePath = "/static/js/generated/";
</script>
<!-- Base template scripts -->
<script type="application/javascript"
src="/static/vendor/require/require.min.js?ver=50600"></script>
<script type="application/javascript">
require.config({
baseUrl: '',
urlArgs: 'ver=50600',
waitSeconds: 0,
shim: {},
paths: {
sources: "/static/js",
datagrid: "/static/js/generated/datagrid",
sqleditor: "/static/js/generated/sqleditor",
'pgadmin.browser.utils': "/browser/" + "js/utils",
'pgadmin.browser.endpoints': "/browser/" + "js/endpoints",
'pgadmin.browser.messages': "/browser/" + "js/messages",
'pgadmin.browser.constants': "/browser/" + "js/constants",
'pgadmin.server.supported_servers': "/browser/" + "server/supported_servers",
'pgadmin.user_management.current_user': "/user_management/" + "current_user",
'translations': "/tools/" + "translations"
}
});
</script>
<!-- View specified scripts -->
<script type="application/javascript" src="/static/js/generated/vendor.main.js?ver=50600" ></script>
<script type="application/javascript" src="/static/js/generated/vendor.others.js?ver=50600" ></script>
<script type="application/javascript" src="/static/js/generated/pgadmin_commons.js?ver=50600" ></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container-fluid h-100 login_page">
<div style="position: fixed; top: 20px; right: 20px; width: 400px; z-index: 9999">
<div class="alert alert-danger alert-dismissible fade show" role="alert">
Delegated credentials not supplied.
<button onclick="hide()" type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
</div>
<script>
function hide(){
var target = event.target || event.srcElement;
if (target.type === undefined)
target=target.parentNode;
target.parentNode.classList.remove("show");
}
</script>
<div class="row h-100 align-items-center justify-content-center">
<div class="col-md-6"><div class="pr-4">
<img src="/static/img/login.svg?ver=50600" alt="Login">
</div>
</div>
<div class="col-md-3">
<div class="panel-header text-color h4"><i class="app-icon pg-icon" aria-hidden="true"></i> pgAdmin 4</div>
<div class="panel-body">
<div class="d-block text-color pb-3 h5">Login</div>
<form action="/authenticate/login" method=
100 6073 100 6073 0 0 197k 0 --:--:-- --:--:-- --:--:-- 197k
* Connection #0 to host ***MYHOST*** left intact
"POST" name="login_user_form">
<input id="next" name="next" type="hidden" value="">
<input id="csrf_token" name="csrf_token" type="hidden" value="ImY4Y2U0NDVmOTZhYmNiYWM2MjU1Njk2YWUxNGU2ZTM2NjlmODgxODQi.YTeEPw.goqhnkaxNASl3A7wzXHiKeqEWis">
<div class="form-group mb-3 ">
<input class="form-control" placeholder="Email Address / Username" name="email"
type="text" autofocus>
</div>
<div class="form-group mb-3 ">
<input class="form-control" placeholder="Password" name="password"
type="password" autofocus>
</div>
<button name="internal_button" disabled class="btn btn-primary btn-block btn-login" type="submit" value="Login">Login</button>
<div class="form-group row mb-3 c user-language">
<div class="col-7"><span class="help-block">Forgotten your password?</span></div>
<div class="col-5">
<select class="form-control" name="language" value="en">
<option value="en" selected>English</option>
<option value="zh" >Chinese (Simplified)</option>
<option value="cs" >Czech</option>
<option value="fr" >French</option>
<option value="de" >German</option>
<option value="it" >Italian</option>
<option value="ja" >Japanese</option>
<option value="ko" >Korean</option>
<option value="pl" >Polish</option>
<option value="ru" >Russian</option>
<option value="es" >Spanish</option>
</select>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="application/javascript">
</script>
</body>
</html>
EDIT:
Please understand that I have hidden host, user and realm to disguise my employer.
Further details from inside the container:
/pgadmin4 # klist -k -t /etc/krb5.keytab
Keytab name: FILE:/etc/krb5.keytab
KVNO Timestamp Principal
---- ----------------- --------------------------------------------------------
3 01/01/70 00:00:00 HTTP/***MYHOST***#***MYREALM***
/pgadmin4 # kinit ***MYUSER***
Password for ***MYUSER***#***MYREALM***: ***
/pgadmin4 #
... so I concluded my keytab is correct, my kerberos configuration works (due to the fact that kinit works) (?)
By the way, I am using the same keytab with the same serviceprincipalname on the same host with a webserver container that works - so I do not suspect problems with the serviceprincipalname in general(?)
Related
We have an app built in flutter everything is connecting quite well however when we run the app in debug mode we get an error.
The base url has been set within another class which works fine.
If i take the base url + the url snippet in the code below and paste it in a browser it works 100%, but not when running it within the app
Here is the code snippet below
**#override
Future<SplashResponse> splashData() async {
const _extra = <String, dynamic>{};
final queryParameters = <String, dynamic>{};
final _data = <String, dynamic>{};
final _result = await _dio.request<Map<String, dynamic>> (
'/pos/web?config_id=1#action=pos.ui&cids=1/splashdata',
queryParameters: queryParameters,
options: RequestOptions(
method: 'GET',
headers: <String, dynamic>{},
extra: _extra,
baseUrl: baseUrl),
data: _data);
final value = SplashResponse.fromJson(_result.data);
return value;
}**
The above code gives of an Exception error
Here are the logs
[log] MySharedPref-> null
I/flutter (12057): --> GET https://erpdemo.appxtreme.co.za/pos/web?config_id=1#action=pos.ui&cids=1/splashdata
I/flutter (12057): Headers:
I/flutter (12057): Authorization: cwpsysD0tp1mpl#
I/flutter (12057): Accept: application/json
I/flutter (12057): content-type: text/plain
I/flutter (12057): Login: null
I/flutter (12057): queryParameters:
I/flutter (12057): Body: {}
I/flutter (12057): --> END GET
I/flutter (12057): 200--> GET https://erpdemo.appxtreme.co.za/pos/web?config_id=1#action=pos.ui&cids=1/splashdata
[log] response: ->
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>ERP</title>
<link type="image/x-icon" rel="shortcut icon" href="/web/static/src/img/favicon.ico"/>
<link type="text/css" rel="stylesheet" href="/web/content/2086-67b044e/web.assets_common.css"/>
<link type="text/css" rel="stylesheet" href="/web/content/2087-6dba58d/web.assets_frontend.css"/>
<script type="text/javascript">
var odoo = {
csrf_token: "189c6000060bdb888fab768c666efcfd02b0f1f1o",
debug: "",
};
</script>
<script type="text/javascript">
odoo.session_info = {"is_admin": false, "is_system": false, "is_website_user": false, "user_id": false, "is_frontend": true, "translationURL": "/website/translations", "cache_hashes": {"translations": "f568e808869e9f2daadf9b03e6cf575dc1feef78"}};
</script>
<script defer="defer" type="text/javascript" src="/web/content/2088-486a751/web.assets_common_minimal_js.js"></script>
<script defer="defer" type="text/javascript" src="/web/content/2089-be897af/web.assets_frontend_minimal_js.js"></script>
<script defer="defer" type="text/javascript" data-src="/web/content/2090-1c86fec/web.assets_common_lazy.js"></script>
<script defer="defer" type="text/javascript" data-src="/web/content/2091-1683bd0/web.assets_frontend_lazy.js"></script>
</head>
<body class="o_home_menu_background">
<link rel="stylesheet" href="/web/static/_custom/style.css"/>
<div id="wrapwrap" class=" ">
<main>
<div class="container py-5">
<div style="max-width: 300px;" class="card border-0 mx-auto bg-100 rounded-0 shadow-sm bg-white o_database_list">
<div class="card-body">
<div class="text-center pb-3 border-bottom mb-4">
<img alt="Logo" style="max-height:120px; max-width: 100%; width:auto" src="/web/binary/company_logo"/>
</div>
<form class="oe_login_form" role="form" method="post" onsubmit="this.action = this.action + location.hash" action="/web/login">
<input type="hidden" name="csrf_token" value="0c70f6a46a3f4f0bcecda2e06da78e5d54bec2a5o1641827119"/>
<div class="form-group field-login">
<label for="login">Email</label>
<input type="text" placeholder="Email" name="login" id="login" required="required" autofocus="autofocus" autocapitalize="off" class="form-control "/>
</div>
<div class="form-group field-password">
<label for="password">Password</label>
<input type="password" placeholder="Password" name="password" id="password" required="required" autocomplete="current-password" maxlength="4096" class="form-control "/>
</div>
<div class="clearfix oe_login_buttons text-center mb-1 pt-3">
<button type="submit" class="btn btn-primary btn-block">Log in</button>
<div class="justify-content-between mt-2 d-flex small">
Don't have an account?
Reset Password
</div>
<div class="o_login_auth"></div>
</div>
<input type="hidden" name="redirect" value="https://erpdemo.appxtreme.co.za/pos/web?config_id=1"/>
</form>
<div class="text-center small mt-4 pt-3 border-top">
<a class="border-right pr-2 mr-1" href="/web/database/manager">Manage Databases</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
If anyone can provide some insight as to why this error would occurr and maybe a possible fix it would be of great help
Regards
You are providing parameters for GET type request against the data parameter whereas it should be against queryParameters for GET type request. please read Performing a GET request section.
I have an ionic 1 app that I'm working on updating.
One of the new requirements is that I add an 'x' on the right side of an input field.
I've tried a number of things and this is the closest I think I've gotten to the right implementation, but still doesn't work.
Any thoughts?
<form action="">
<input type="text" onfocus="this.placeholder = ''" style="border-top:none; border-left:none; border-right:none; border-bottom:solid gray 3px; background:transparent; margin-left:auto; margin-right:auto; text-align:center; font-size:1.2em; margin-bottom:20px; color:#acb2b4;" placeholder="{{profileEdit.userName}}" ng-model="profileEdit.theUserName">
<i class="icon ion-close" style="font-size:14px;" item-right></i>
</form>
You can use the list and item classes, along with item-icon-right class to achieve what you are looking for. Here is a working sample:
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Input X Icon</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Input X Icon On Right</h1>
</ion-header-bar>
<ion-content>
<form>
<div class="card list">
<div class="item item-icon-right">
<input type="text" placeholder="Placeholder Goes Here">
<i class="icon ion-close"></i>
</div>
</div>
</form>
</ion-content>
</body>
</html>
I have this in a bootstrap form:
Name
"/>
<div class="form-group ">
<label class="control-label col-sm-3 col-xs-3 col-md-3 col-lg-3" for="email">E-mail</label><?php echo #$_SESSION['ctform']['email_error'] ?>
<div class="col-sm-7 col-xs-7 col-md-7 col-lg-7">
<input class="form-control" id="email" name="ct_email" type="text" value="<?php echo htmlspecialchars(#$_SESSION['ctform']['ct_email']) ?>"/>
</div>
</div>
I cannot define the height of my and as a result I have a lot of space (200px) between the fields. Any idea how to solve this? Thank you.
Try to do this way:
var el = document.querySelector(".form-group");
el.style.width = "200px";
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<?php echo #$_SESSION['ctform']['email_error'] ?>
<input class="form-control" id="email" name="ct_email" type="text" value="<?php echo htmlspecialchars(#$_SESSION['ctform']['ct_email']) ?>"/>
</div>
</form>
</body>
</html>
https://www.w3schools.com/code/tryit.asp?filename=FENK34MFH506
I have a site(wordpress), and I received a pre-made landing page to upload to my site.
This landing page has a button which supposed to send the input that a user enters (name, last name) to a file named results.php
Right now the "search now" button does nothing.
I haven’t figured out how to make it work.
Please help,
Many thanks
this is the html/php page:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>yoursite.com</title>
<link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Header -->
<header id="header">
<div class="wrapper cf">
<h1 class="site-logo"><img src="img/logo.png" alt="yoursite.com"></h1>
<div class="arrested">
<div class="arrested-title">.. Today:</div>
<div class="arrested-list">
<ul>
<li><span><img src="img/mug.jpg" alt=""></span><span>John Smith</span></li>
<li><span><img src="img/mug.jpg" alt=""></span><span>John Smith</span></li>
<li><span><img src="img/mug.jpg" alt=""></span><span>John Smith</span></li>
<li><span><img src="img/mug.jpg" alt=""></span><span>John Smith</span></li>
<li><span><img src="img/mug.jpg" alt=""></span><span>John Smith</span></li>
</ul>
</div>
</div>
</div>
</header>
<!-- // Header -->
<!-- Content -->
<div id="main">
<div class="wrapper cf">
<div class="search-content cf">
<div class="search-secure">All searches are Secure</div>
<div class="search-header cf">
<div class="search-header-content">
<div class="search-header-content-inn">
<h2 class="search-title"><span>yoursite.com</span> Search Service</h2>
<div class="search-database">Database Update on September 8, 2015</div>
</div>
</div>
<div class="search-header-sidebar">
<div class="search-map"><img src="img/map.png" alt=""></div>
</div>
</div>
<div class="search-form cf">
<div class="search-start"><span>Start Your Search Below</span></div>
<div class="cell">
<input id="firstname" type="text" name="firstname" value="" placeholder="FIRST NAME" />
</div>
<div class="cell">
<input id="lastname" type="text" name="lastname" value="" placeholder="LAST NAME" />
</div>
<div class="cell">
<select id="state" name="state"><option value="00">SELECT STATE</option><option value="ALL">Nationwide</option><option value="AL">AL</option><option value="AK">AK</option><option value="AR">AR</option><option value="AZ">AZ</option><option value="CA">CA</option><option value="CO">CO</option><option value="CT">CT</option><option value="DC">DC</option><option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option><option value="HI">HI</option><option value="IA">IA</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN">IN</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option><option value="MA">MA</option><option value="MD">MD</option><option value="ME">ME</option><option value="MI">MI</option><option value="MN">MN</option><option value="MO">MO</option><option value="MS">MS</option><option value="MT">MT</option><option value="NE">NE</option><option value="NH">NH</option><option value="NJ">NJ</option><option value="NM">NM</option><option value="NV">NV</option><option value="NC">NC</option><option value="ND">ND</option><option value="NY">NY</option><option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option><option value="RI">RI</option><option value="SD">SD</option><option value="SC">SC</option><option value="TN">TN</option><option value="TX">TX</option><option value="UT">UT</option><option value="VA">VA</option><option value="VT">VT</option><option value="WA">WA</option><option value="WI">WI</option><option value="WV">WV</option><option value="WY">WY</option></select>
</div>
<div class="cell btn">
<input type="submit" name="submit" value="Search Now" />
</div>
</div>
<div class="search-incs cf">
<h3 class="search-title">Records on File:</h3>
<div class="search-incs-list cf">
<ul>
<li>And More...</li>
</ul>
</div>
<div class="search-report"></div>
</div>
</div>
</div>
</div>
<!-- // Content -->
<!-- Footer -->
<footer id="footer">
<div class="wrapper cf">
<div class="fnav cf">
<ul>
<li>Home</li>
<li>Login</li>
<li>Help</li>
<li>Privacy</li>
<li>Terms</li>
</ul>
</div>
<div class="fcopy">
<p>© Copyright 2015 yoursite.com. All Rights Reserved.</p>
</div>
</div>
</footer>
<!-- // Footer -->
</body>
</html>
I am using Twitter's Bootstrap to build a form (served by django). I want to have the form centered on the page but I'm running into some problems.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="span12" style="text-align:center; margin: 0 auto;">
<form class="form-horizontal" method="post" action="/form/">
<fieldset>
<legend>Please login</legend>
<div class="control-group">
<label class="control-label" for="id_username">Username</label>
<div class="controls">
<input name="username" maxlength="100" placeholder="Enter your username..." type="text" class="input-large" id="id_username" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="id_password">Password</label>
<div class="controls">
<input name="password" maxlength="100" placeholder="Enter your password..." type="password" class="input-large" id="id_password" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/bootstrap/js/jquery.js"></script>
<script src="/bootstrap/js/bootstrap-transition.js"></script>
<script src="/bootstrap/js/bootstrap-alert.js"></script>
<script src="/bootstrap/js/bootstrap-modal.js"></script>
</body>
</html>
I've excluded some additional django logic ({% csrf_token %}, some if statements, etc), but this should recreate the problem.
The actual input elements (username and password textboxes) are centering like I expected, but the labels remain to the far left of the page. Am I missing markup somewhere or do I have to override some of the control-label CSS?
You need to include your form inside a container, the bootstrap already comes with a container class that is width:940px so you can wrap everything inside and it'll center automatically, like so:
<div class="container">
<div class="row">
<div class="span12">
<form class="form-horizontal" method="post" action="/form/">
<fieldset>
<legend>Please login</legend>
<div class="control-group">
<label class="control-label" for="id_username">Username</label>
<div class="controls">
<input name="username" maxlength="100" placeholder="Enter your username..." type="text" class="input-large" id="id_username" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="id_password">Password</label>
<div class="controls">
<input name="password" maxlength="100" placeholder="Enter your password..." type="password" class="input-large" id="id_password" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>