The problem concerning hosting a web app on the GitHub page. I am fully aware that GitHub page is only for hosting static web page and do not support PHP. The problem is I only want the people with my correct login id and password to access my web app. But people can simply access the content pages with URL without logging in. How to preclude direct access? Is it possible to do it without PHP?
Desired case:
home.html==> correct id and psw ==> contents.html
Current case:
URL for contents ==> contents.html
You can use a Javascript Validator
Check This one Username = Gaurav and Password = password
.buttonlo {
padding: 14px 20px;
background-color: red;
}
.buttonre {
padding: 14px 20px;
background-color: blue;
}
.buttonre,
.buttonlo {
float: left;
width: 50%;
}
.box {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
p {
margin-top: 50px;
text-align: center;
display: inline-block;
}
<html>
<head>
<title>Login page</title>
</head>
<body>
<h1>Login Page</h1>
<form name="login">
Username<input class="box" type="text" name="userid" /> Password
<input type="password" class="box" name="pswrd" />
<input class=buttonlo type="button" onclick="check(this.form)" value="Login" />
<input class="buttonre" type="reset" value="Cancel" />
</form>
<script language="javascript">
function check(form) {
if (form.userid.value == "Gaurav" && form.pswrd.value == "password") {
alert("Access Granted");
} else {
alert("Error Password or Username")
}
}
</script>
<p>username and password is in javascript section</p>
</body>
</html>
Related
I'm building an Instagram clone. In doing so, I'm getting a very weird CSS behavior that I've not seen before.
Right now, I've got two pages: sign-up and login. The sign-up page has a link to the login page and vice versa. However, when I load the sign-up page for the first time (if I go directly to the route), it loads as I would expect in terms of the CSS design. However, when I click on the login link then back to the sign-up page, the CSS design changes. More specifically, my main-container width seems to change.
This is what I have so far:
signup.js
import React, {useState} from 'react';
import {Link} from "react-router-dom"
import logo from '../../images/logo.png'
import * as ROUTES from '../../constants/routes';
import Button from "../../components/button/Button"
import './signup.css'
export default function Signup() {
const [inputData, setInputData] = useState({username: '', fullname: '', emailAddress: '', password: ''})
function handleChange(event) {
const {name, value} = event.target
setInputData(prevInputData => ({...prevInputData, [name]: value}))
}
return (
<div className="main-container flex-center flex-column-direction">
<div className="signup-container flex-center flex-column-direction">
<img src={logo} alt="Logo"/>
<form className="form flex-center flex-column-direction">
<input
type="text"
placeholder="Username"
name="username"
value={inputData.username}
onChange={handleChange}
className="form-input"
/>
<input
type="text"
placeholder="Full Name"
name="fullname"
value={inputData.fullname}
onChange={handleChange}
className="form-input"
/>
<input
type="text"
placeholder="Email Address"
name="emailAddress"
value={inputData.emailAddress}
onChange={handleChange}
className="form-input"
/>
<input
type="password"
placeholder="Password"
name="password"
value={inputData.password}
onChange={handleChange}
className="form-input"
/>
</form>
<Button label="Sign up" />
</div>
<div className="login-container flex-center">
<p>Have an account? <Link to={ROUTES.LOGIN} style={{color: 'blue'}}>Log in</Link></p>
</div>
</div>
)
}
and the associated CSS: signup.css
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-column-direction {
flex-direction: column;
}
.main-container {
height: 100vh;
width: 35%;
margin: 0 auto;
padding: 0;
}
.signup-container {
border: 0.1px solid #ebeff0;
padding: 10px;
background-color: white;
width: 100%;
}
.form {
padding: 10px;
width: 100%;
}
.form-input {
width: 100%;
padding: 10px;
border: 0.3px solid #ebeff0;
border-radius: 2px;
margin: 5px;
background-color: #f2fcff;
}
.login-container {
padding: 15px;
border: 0.3px solid #ebeff0;
background-color: white;
width: 100%;
margin: 10px;
}
Like I said before, when I navigate from and back to this page, my main-container width seems to change on its own (see below screenshots). If I refresh the page (on the browser), it goes back to what I would expect (i.e. what's in the CSS file - 35%).
Going to signup page directly:
Then clicking on the "login" page then going back to the signup page (through a link on the login page) gives me this:
As you can see, the width of the form has changed without modifying any parameters in the CSS.
Also, I'm actually getting almost the exact same behavior if I reverse the steps. So if I go to the login page directly then navigate to to the sign up page and back to the login, it changes the CSS width of my container in the login page. I'm hoping the reason is the same as my question above but I'll find that out through help.
All css files in react are merged into one final file, so if you have login.css inside your Login component with .main-container selector it can override .main-container from signup.css file.
You should use unique selectors for components or add additional classes only for properties which are different. E.g:
.main-container {
height: 100vh;
margin: 0 auto;
padding: 0;
}
.main-container__signup {
width: 35%;
}
.main-container__login {
width: 50%;
}
I have a media query that makes my container go to 90% width when the screen goes lower than 550px and when the password generator overflows it pushes the width to 500px instead of the 90%. How can i fix this? The overflow happens when I select one of the password options and set the length to 50.
Oof this website is hurting my eyes a bit,
Well it is because you are using flexbox on the body, to fix this try:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap");
body,
html {
padding: 0;
margin: 0;
background-color: blueviolet;
font-family: "Poppins", sans-serif;
color: black;
font-weight: 700;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h2 {
text-align: center;
font-size: 1.1em;
}
#generatorContainer {
width: 90%;
border: 2px solid white;
background-color: rgb(50, 64, 168);
padding: 0.5em;
}
#passwordContainer {
border-radius: 0.5em;
background-color: #3399ff;
overflow: auto;
}
.passwordFeaturesContainer {
display: flex;
justify-content: space-between;
margin: 0.5em 0;
}
#generatePasswordButton {
margin: 0 auto;
width: 80%;
display: block;
height: 60px;
}
#generatePasswordButton {
cursor: pointer;
background-color: rgb(50, 168, 52);
outline: none;
box-shadow: none;
color: rgb(50, 64, 168);
font-size: 1.2em;
font-weight: 700;
}
#media only screen and (min-width: 551px){
#generatorContainer {
width: 500px;
}
}
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Generator</title>
<!-- custom css -->
<link rel="stylesheet" href="style.css">
<!-- favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png">
<script data-dapp-detection="">
(function() {
let alreadyInsertedMetaTag = false
function __insertDappDetected() {
if (!alreadyInsertedMetaTag) {
const meta = document.createElement('meta')
meta.name = 'dapp-detected'
document.head.appendChild(meta)
alreadyInsertedMetaTag = true
}
}
if (window.hasOwnProperty('web3')) {
// Note a closure can't be used for this var because some sites like
// www.wnyc.org do a second script execution via eval for some reason.
window.__disableDappDetectionInsertion = true
// Likely oldWeb3 is undefined and it has a property only because
// we defined it. Some sites like wnyc.org are evaling all scripts
// that exist again, so this is protection against multiple calls.
if (window.web3 === undefined) {
return
}
__insertDappDetected()
} else {
var oldWeb3 = window.web3
Object.defineProperty(window, 'web3', {
configurable: true,
set: function (val) {
if (!window.__disableDappDetectionInsertion)
__insertDappDetected()
oldWeb3 = val
},
get: function () {
if (!window.__disableDappDetectionInsertion)
__insertDappDetected()
return oldWeb3
}
})
}
})()</script></head>
<body>
<div class="flex">
<form id="generatorContainer">
<div id="passwordContainer">
<h2>Password Generator</h2>
</div>
<div class="passwordFeaturesContainer">
<label for="passLength">Password Length</label>
<input type="number" step="1" min="4" max="50" id="passLength" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="lowerCase">Contain Lowercase Letters</label>
<input type="checkbox" id="lowerCase" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="upperCase">Contain Uppercase Letters</label>
<input type="checkbox" id="upperCase" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="numbers">Contain Numbers</label>
<input type="checkbox" id="numbers" required="">
</div>
<div class="passwordFeaturesContainer">
<label for="symbols">Contain Symbols</label>
<input type="checkbox" id="symbols" required="">
</div>
<button type="submit" id="generatePasswordButton">Generate Password</button>
</form>
</div>
<script src="main.js"></script>
</body></html>
I've added a flex div around the generator and added a class for flex as well... Try to avoid much styling on standard generated elements like html, body, script etc etc.. And please try start styling at a mobile perspective (most web users are commonly mobile users), so instead of using media-queries with max-width, use min-width: 551px; In your case you eventually dont need a media-query instead. If you are just using max-width: 500px; on your #generatorContainer its enough.
Happy coding!!
This question already has answers here:
Sending data from HTML form to a Python script in Flask
(2 answers)
Closed 2 years ago.
I am trying to send input from HTML form to python script using the CGI concept and flask concept. But unable to read the input.
Scenario:
1. We need to create an HTML Input form.
2. Read input from the form and send to python script.
I am attaching my code as well. If anybody finds the issue pls let me know.
Code Used:
import flask
from flask import Flask, render_template, request
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
#app.route('/', methods=['POST'])
def getvalue():
Name = request.form['yourName']
EnterpriseId = request.form['enterpriseId']
Servers = request.form['server']
tes = "Hello"
print(tes)
return render_template('pass.html', n=Name, eId=EnterpriseId, sName=Servers)
if __name__ == '__main__':
app.run(debug=True)
I have used this Html Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<h2>Enter Your Inputs</h2>
<div class="container">
<form action="app.py" method="post">
<div class="row">
<div class="col-25">
<label for="name">Enter Your Name</label>
</div>
<div class="col-75">
<input type="text" id="name" name="yourName" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="eId">Enter Your Enterprise Id</label>
</div>
<div class="col-75">
<input type="text" id="eId" name="enterpriseId" placeholder="Your enterprise Id..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="server">Enter Server Name</label>
</div>
<div class="col-75">
<input type="text" id="server" name="server" placeholder="write server..">
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
You can remove the second function and integrate the GET and POST requests in one method.
2 Change the form action to this <form action='/' method='POST'>
I'm looking for some help. I'm in a project where i need to upload images to a freemarker template(.ftl) which is coded with html. I'm using hippo cms console to create sitemaps, etc. I need to use local images in my project (from the project directory) but the URL they take is from localhost:8080/site/images. But I don't know where localhost:8080/site is in my project or where it refers.
Here is the code:
So,
<img src='https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F07%2F21%2F9757e437-5ec1-4378-804f-ca0f9567c110%2F380048_Widakk.png?auto=format&ch=Width%2CDPR&w=250&h=250' class="agoraIcon"/>
here I was using an Internet image and it works correctly, but I need to use the image at my site/freemarker/images/agoraLogo.PNG.
Here is the project structure:
<!doctype html>
<html>
<head>
<style type="text/css">
body {
font-family: Verdana;
}
.login {
color: white;
padding: 1%;
background-color: #2B516B;
}
.contButton {
padding: 0.5%;
padding-left: 4%;
padding-right: 4%;
color: white;
background-color: black;
text-align: center;
font-family: Verdana;
border-radius: 10px;
}
.agoraIcon {
height: 50px;
width: 200px;
}
.content {
text-align: center;
}
.credentials {
padding: 0.5%;
font-family: Verdana;
border-radius: 10px;
}
#year {
text-align: center;
}
</style>
</head>
<body>
<img src='https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F07%2F21%2F9757e437-5ec1-4378-804f-ca0f9567c110%2F380048_Widakk.png?auto=format&ch=Width%2CDPR&w=250&h=250' class="agoraIcon" />
<div class="login" id="year">2018</div>
<div class="content">
<p><b>Inicia sesión con tu <br>cuenta de concesión</b></p>
<input type="text" class="credentials" placeholder="Email" />
<input type="password" class="credentials" name="psw" placeholder="Contraseña" />
<div>
<a href="http://localhost:8080/site/welcome" type="button">
<button class="contButton" type="submit"> Continuar </button>
</a>
</div>
</div>
</body>
</html>
Directory to the image
Change this :
<img src='https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F07%2F21%2F9757e437-5ec1-4378-804f-ca0f9567c110%2F380048_Widakk.png?auto=format&ch=Width%2CDPR&w=250&h=250' class="agoraIcon"/>
to :
<img src='../images/agoraLogo.PNG' class="agoraIcon"/>
It is best to have binary links generated. You can use the #hst.link tag to do this.
I think you need:
<#hst.link path="/freemarker/images/agoraLogo.PNG" var="image"/>
The var image will contain the link.
See the documentation for more details:
https://www.onehippo.org/library/concepts/links-and-urls/hst-2-urls.html
May I also suggest you work through our tutorials?
https://www.onehippo.org/trails/demo-tutorials-and-download.html
This is my code:
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
#wrap {
width: 1000px;
margin: 0 auto;
}
.out_box {
float: left;
margin: 20px 20px 20px 20px;
border: 1px solid black;
padding: 0 5px 0 5px;
min-width: 280px;
}
input {
margin: 10px;
}
input {
vertical-align: -3px;
}
h1 {
font-size: 400%;
color: black;
margin: 0 0 10px 0;
text-align: center;
}
h2 {
font-size: 100%;
color: black;
margin: 5px 0 5px 0;
text-align: center;
}
h3 {
font-size: 95%;
color: black;
margin: 5px 0 5px 0;
}
h4 {
font-size: 200%;
color: black;
margin: 5px 0 5px 0;
text-align: center;
}
p, form, button {
font-size: 80%;
color: #252525;
}
.small_text {
font-size: 70%;
color: #737373;
}
body {
background-color: lightblue;
}
</style>
</head>
<body>
<div id=wrap>
<h1>Login</h1>
<form class="form1" action=”index3.htm”>
<div class="formtitle">
Enter the password to proceed
</div>
<div class="input nobottomborder">
<div class="inputtext">
Password:
</div>
<div class="inputcontent">
<input type="password" id="password" /><br />
</div>
</div>
<div class="buttons">
<input class="orangebutton" type="submit" value="Login" onclick="if (document.getElementById('password').value == ’smurfsmurf’) location.href='index3.htm'; else alert('Wrong Password!');" />
</div>
</form>
</div>
</body>
</html>
When I make it redirect it does like this with the adress: file:///Volumes/ETHERNET/"index3.htm".
There is a file in that directory named index.htm, and that's the file I am trying to access. How do I fix it adding the "" signs?
Best Regards
Oskar
You have the wrong type of quotes in your form's action. Change this line:
<form class="form1" action=”index3.htm”>
for this:
<form class="form1" action="index3.htm">
Also, because your javascript is on a button that will, according to standards, submit the form, your javascript will not react as you expect. You should add a return false; into the code, and add your curly braces around your if statements, and remove the curved single quotes:
<input class="orangebutton" type="submit" value="Login" onclick="if (document.getElementById('password').value == 'smurfsmurf') {location.href='index3.htm';} else {alert('Wrong Password!');}return false;" />
Although, personally, I would recommend against inline JavaScripting like that. Instead, use EventTarget.addEventListener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener Scroll down to the example to see how it works.
Explanation:
Straight quotes are not technically necessary for HTML attribute values (I highly recommend using them anyway). You have not used straight quotes ("), but instead curved quotes (”), which never were valid for wrapping HTML attribute vales. Thus, the browser interprets your action on your form to be ”index3.htm” instead of index3.htm.
When you click your submit button, the default action is to submit the form to it's action attribute. So your browser is redirected to /”index3.htm”. Your JavaScript won't have time to kick-in and change your browser's location before you are redirected to the form's action's value.
Let me know if that explanation makes since.