I am using Visual Studio Code editor and node js HTTP server. I have created the a simple login page and created a user in firebase. but i didn't able to login using the username. I wrote code for web page in HTML and bootstrap.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css" />
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>
</head>
<body class="bg-dark">
<div id="login-card" class="card">
<div class="card-body">
<h1>Wallpaper App Admin</h1>
<form id="login-form">
<div class="form-group">
<label for="email">email</label>
<input type="email" id="email" class="form-control"/>
</div>
<div class="form-group">
<label for="password">password</label>
<input type="password" id="password" class="form-control"/>
</div>
<div class="form-group">
<button type="button" id="btn-login" class="btn btn-primary">Login</button>
</div>
</form>
</div>
</div>
<script src="js/app.js"></script>
<script>
firebase.auth().onAuthStateChanged(function(user){
if(user){
window.location.href="admin.html";
}
});
</script>
</body>
</html>
style.css file
#login-card{
width:450px;
margin:150px auto;
}
app.js File
var config = {
apiKey: "AIzaSyBF2wl4WHBbLHg90M3lAk_dNKZ7SAo0iE8",
authDomain: "wallpaper-app-b7c7b.firebaseapp.com",
databaseURL: "https://wallpaper-app-b7c7b.firebaseio.com",
projectId: "wallpaper-app-b7c7b",
storageBucket: "wallpaper-app-b7c7b.appspot.com",
messagingSenderId: "302819877773"
};
firebase.initializeApp(config);
firebase.auth.Auth.persistence.LOCAL;
$("#btn-login").click(function(){
var email = $("#email").val();
var password = $("#password").val();
var result = firebase.auth().signInWithEmailAndPassword(email, password);
result.catch(function(error){
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode);
console.log(errorMessage);
});
});
admin.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css" />
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>
</head>
<body>
<h1>This is the Admin Page</h1>
<script src="js/app.js"></script>
<script>
firebase.auth().onAuthStateChanged(function(user){
if(!user){
window.location.href="index.html";
}
});
</script>
</body>
</html>
The line firebase.auth.Auth.Persistence.LOCAL is causing error, there are two problems.
The default value is already LOCAL, so it is not necessary to define it.
The proper way to define persistence is
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)
Related
I need help!
I need open html form from another html form by button PUTAWAY START.
At html code I have this button, but I cant understand how to write script to command for button.
I don't know where to start. Thank you for help!
<div class="row">
<div class="form-floating mb-3">
<button type="button" class="btn btn-primary" id="btn1" style="width: 100%">PUTAWAY START</button>
</div>
</div>
I know that it must be by function doGet(e) but how?
Thanks to help from Ron I add his script to my project.
Main form:
<!doctype html>
<html lang="en">
<head>
<base target="_top">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>KOP#CK-M#IN-MENU</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<script href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js"
integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js"
integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<?!= include("main-css"); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<link id="favicon" rel="shortcut icon" type="image/png" href="https://drive.google.com/file/d/14GrCbJYe3RExAKL_6yuF3kH1EO0L7zge/view?usp=sharing" />
<h6 style="color:blue;"><em>KOP#CK M#IN MENU:</em></h6>
<img src="https://drive.google.com/uc?export=download&id=14GDoNMZxgHlfTKMHmtamXmu93y2jaDy6" class="img-fluid" alt="...">
<form>
<hr></hr>
<div class="row">
<div class="form-floating mb-3">
<input type="button" class="btn btn-primary" value="PUT#WAY ST#RT" style="width: 100%" onclick="Link1()"/>
</div>
</div>
<div class="progress" id="PreLoaderBar">
<div class="indeterminate"></div>
</div>
<hr></hr>
<div class="row">
<div class="form-floating mb-3">
<button type="button" class="btn btn-primary" id="btn2" style="width: 100%">Insert</button>
</div>
</div>
<hr></hr>
<div class="row">
<div class="form-floating mb-3">
<button type="button" class="btn btn-primary" id="btn3" style="width: 100%">Insert</button>
</div>
</div>
<hr></hr>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?var url = ScriptApp.getService().getUrl();?><input type="hidden" value="<?= url ?>" id="url" />
<?!= include("main-js"); ?>
</body>
</html>
and script in include-main:
document.onreadystatechange = function () {
if (document.readyState === "complete") {
document.getElementById("PreLoaderBar").style.display = "none";
}
}
function Link1(){
var url = document.getElementById("url").value;
console.log(url);
var link = document.createElement('a');
console.log(link);
link.href = url + "&page=Link1";
link.id = 'linkURL';
console.log(link);
document.body.appendChild(link);
document.getElementById('linkURL').click();
}
Script in "doGet":
function doGet(e){
var params = JSON.stringify(e);
console.log(params);
console.log(e.parameter.page);
if(!e.parameter.page){
return HtmlService.createTemplateFromFile("MAIN_MENU").evaluate();
}
else if(e.parameter.page == 'Link1'){
return HtmlService.createTemplateFromFile("PUTAWAY_TO").evaluate();
}
else if(e.parameter.page == 'Main'){
return HtmlService.createTemplateFromFile("MAIN_MENU").evaluate();
}
}
You can use the doGet(e) event parameters as your condition to determine which html form you will create
Sample Code:
Code.gs
function doGet(e){
var params = JSON.stringify(e);
Logger.log(params);
Logger.log(e.parameter.page);
if(!e.parameter.page){
return HtmlService.createTemplateFromFile("Main").evaluate();
}
else if(e.parameter.page == 'Link1'){
return HtmlService.createTemplateFromFile("Form1").evaluate();
}
else if(e.parameter.page == 'Main'){
return HtmlService.createTemplateFromFile("Main").evaluate();
}
}
Main.html
<body>
<h1>Welcome to Main Form</h1>
<?var url = ScriptApp.getService().getUrl();?><input type="hidden" value="<?= url ?>" id="url" />
<br>
<input type="button" value="Link 1" onclick="link1()" />
</body>
<script>
function link1()
{
var url = document.getElementById("url").value;
var link = document.createElement('a');
link.href = url+"?page=Link1";
link.id = 'linkURL';
document.body.appendChild(link);
document.getElementById("linkURL").click();
}
</script>
Form1.html
<body>
<h1>Welcome to Form 1</h1>
<?var url = ScriptApp.getService().getUrl();?><input type="hidden" value="<?= url ?>" id="url" />
<br>
<input type="button" value="Back to Main" onclick="main()" />
</body>
<script>
function main()
{
var url = document.getElementById("url").value;
var link = document.createElement('a');
link.href = url+"?page=Main";
link.id = 'linkURL';
document.body.appendChild(link);
document.getElementById("linkURL").click();
}
</script>
What it does?
Creates a href link in your html page, the href link contains an event parameter "page". link.href = url+"?page=Link1";
When doGet(e) was called, It will check the page parameter in the event object. Then select the form you want to use based on the page parameter provided.
Additional References:
Create Views (Pages) in Web App - Google Apps Script Web App Tutorial - Part 7
Link HTML Pages using Google Apps Script Web App
We have a datepicker in our mvc asp.net core application.
But i want to make saturday and sunday unselectable in it is this possible?
Thanks in advance.
Joni
Yes possible, you can do this with bootstrap date picker
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
Date : <input type="text" name="date" class="form-control datepicker" autocomplete="off">
</div>
</body>
<script type="text/javascript">
$('.datepicker').datepicker({
daysOfWeekDisabled: [0,6]
});
</script>
</html>
Total Angular newb here...
Just going through a Lynda course and I've got everything working until we get to routing. When all the app logic was in the controller things worked fine. But now for whatever reason my page loads completely blank now that I've added routing into the mix.
I've got an index.html file and I'm trying to pass in a view from list.html.
This is my folder structure so far.
Angular |
|-angular.js
|-angular-route.min.js
|-index.html
js |
|-app.js
|-controllers.js
|-data.json
partials |
|-list.html
The JS and Partials folders are both within the Angular folder.
This is my code so far...
Index
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular/Bootstrap Tests</title>
<link rel="stylesheet" href="bootstrap4/css/bootstrap.css">
<link rel="stylesheet" href="css/bands.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="bootstrap4/js/bootstrap.js"></script>
<script src="angular.js"></script>
<script src="angular-route.min.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<!-- Recent Listens Section -->
<div id="recent-listens-wrapper" ng-view>
</div>
<!-- End of Recent Listens Section -->
</body>
</html>
List
<div class="container">
<div class="row">
<div class="col-sm-12" id="search">
<h2>Band Directory</h2>
<input class="search-bar" ng-model="query" placeholder="Search for bands" type="text" autofocus>
<label class="search-labels">Sort By:
<select ng-model="bandSort">
<option value="name" selected="selected">Name</option>
<option value="genre">Genre</option>
<option value="year">Year</option>
</select>
</label>
<label class="search-labels">
Ascending:
<input type="radio" ng-model="direction" name="direction" checked>
</label>
<label class="search-labels">
Descending:
<input type="radio" ng-model="direction" name="direction" value="reverse">
</label>
</div>
<div class="col-sm-12">
<h1 class="recent-listens">Recent Listens</h1>
</div>
<div class="col-md-2" ng-repeat="item in bands | filter:query | orderBy:bandSort:direction">
<div class="album-preview">
<img class="img-responsive" ng-src="images/bands/{{item.shortname}}_tn.jpg" alt="Photo of {{item.shortname}}"/>
<h3>{{item.album}}</h3>
<p>{{item.name}}</p>
</div>
</div>
</div>
</div>
Controllers
var bandControllers = angular.module('bandControllers', []);
bandControllers.controller('RecentBands', ['$scope','$http', function RecentBands($scope, $http) {
$http.get('js/data1.json').then(function(bands) {
$scope.bands = bands.data;
$scope.bandSort = 'name';
});
}]);
App
var myApp = angular.module('myApp', [
'ngRoute',
'bandControllers'
]);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'RecentBands'
}).
otherwise({
redriectTo:'/list'
});
}]);
Try using $stateProvider
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/list");
$stateProvider
.state('list', {
url: "/list",
templateUrl: 'partials/list.html',
controller:"RecentBands"
})
});
The error is in your recentBands controller. Change the first line for
var app = angular.module('myApp');
There is no need of [] if you don't use any injections. It was just the name of the module, it has to be the same as the general controller.
I am using the following code; the calendar icon does not appear, and there is an error logged to the console: 404 not found.
<html>
<head>
</head>
<script type="text/javascript">
$(function () {
$('#datetimepicker10').datetimepicker({
viewMode: 'years',
format: 'YYYY'
});
});
</script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />
<body>
<div class="container">
<div class="col-sm-6" style="height:130px;">
<div class="form-group">
<div class='input-group date' id='datetimepicker10'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker10').datetimepicker({
viewMode: 'years',
format: 'YYYY'
});
});
</script>
</div>
</body>
</html>
Your font files are missing. Please create folder named fonts and include font files to it. It will work.
eg: fonts/glyphicons-halflings-regular.woff2
Is there any cross-browser way of getting what the password masking character is in <input type="password"> fields, or, barring that, to set it?
For example, Chrome & Firefox & Safari on OSX use •, while Safari on iOS 7 uses ●. Perhaps other browsers might use the old-fashioned * - I don't know.
It seems like this was asked previously as well. Check out change password char in HTML which states it can't be done.
Quick search shows that it can be done via JS by faking it and can't be done on a regular password field since it's defined by the browser. Refer to http://www.htmlforums.com/showpost.php?p=655392&postcount=4
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var k=0;
var df;
window.onload=function() {
df=document.forms[0];
df[1].onkeyup=function() {
df[0].value+=df[1].value.charAt(k);
k++;
for(c=0;c<df[1].value.length;c++) {
df[1].value=df[1].value.replace(df[1].value.charAt(c),'#');
}
}
}
</script>
</head>
<body>
<noscript>
<div>
Without javascript enabled you will be unable to login
</div>
</noscript>
<form action="http://www.google.com/">
<div>
<input type="hidden" name="password">
<input type="text">
<input type="submit" value="submit password">
</div>
</form>
</body>
</html>
this is a full implementation with styling and handling . i hope you like it :)
function showHidePassword(passSelector, textSelector) {
if ($(passSelector).hasClass("hidden")) {
$(passSelector).val($(textSelector).val());
$(textSelector).addClass("hidden");
$(passSelector).toggleClass("hidden");
}
else {
$(textSelector).val($(passSelector).val());
$(passSelector).addClass("hidden");
$(textSelector).toggleClass("hidden");
}
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class='card'>
<div class='card-body'>
<div class='input-group'>
<div class='input-group-prepend'>
<span class='input-group-text'>
<i class='fa fa-key'></i>
</span>
</div>
<input type='password' id='password' class='form-control'/>
<input type='text' class='form-control hidden' id='passwordContent' disabled/>
<div class='input-group-append'><span class='input-group-text' onclick='showHidePassword("#password","#passwordContent")'><i class='fa fa-eye'></i></span></div>
</div>
</div>
</div>