Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

adam2350

[Nieaktualny] Sprawdzanie siły hasła. [Nieaktualny]

Promowane odpowiedzi

adam2350    11

Na stronie chciałem zrobić pasek siły hasła ale nie działa to jak potrzeba w ogóle nie działa. Na stronach typu: Create a new fiddle - JSFiddle, działa normalnie 

<script type="text/javascript" >
var calculateComplexity = function (password) {
  var complexity = 0;
  var regExps = [ 
    /[a-z]/,
    /[A-Z]/,
    /[0-9]/,
    /.{8}/,
  /.{16}/,
    /[!-//:-@[-`{-ÿ]/
  ];
  regExps.forEach(function (regexp) {
    if (regexp.test(password)) {
      complexity++;
    }
  });
  return {
    value: complexity,
    max: regExps.length
  };
};
var checkPasswordStregth = function (password) {
  var progress = document.querySelector('#passwordComplexity'),
      complexity = calculateComplexity(this.value); 
  progress.value = complexity.value;
  progress.max = complexity.max;
};
var input = document.querySelector('#passwordField');
input.addEventListener('keyup', checkPasswordStregth);
</script>
<style type="text/css">
.passwordWrapper {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}
.passwordWrapper input {
  flex-basis: 100%;
  margin: 10px 0;
}
progress {
  flex-basis: 100%;
}
</style>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title> Password complexity</title>
</head>
<body>
  <div class="passwordWrapper">
    <label for="passwordField">
      Twoje nowe hasło
    </label>
    <input type="password" id="passwordField" placeholder="wpisz tutaj swoje hasło, np. Koduu.j3">
    <progress id="passwordComplexity" value="0"></progress>
  </div>
</body>
</html>

 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Mativve    1,260

@andreii tutaj nie potrzebne jest jQ,

@adam2350  Coś nie działa? Sprawdź konsolę, zwłaszcza w js. Nie wiem jak to wygląda w twoim pliku html ale style jak już to w head powinny być a script przed tagiem </body>. U mnie twój kod działa. Sprawdziłem też konsolę i nic nie pokazuje a twój kod powinien wyglądać tak:

Spoiler
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title> Password complexity</title>
<style type="text/css">
.passwordWrapper {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}
.passwordWrapper input {
  flex-basis: 100%;
  margin: 10px 0;
}
progress {
  flex-basis: 100%;
}
</style>
</head>
<body>
  <div class="passwordWrapper">
    <label for="passwordField">
      Twoje nowe hasło
    </label>
    <input type="password" id="passwordField" placeholder="wpisz tutaj swoje hasło, np. Koduu.j3">
    <progress id="passwordComplexity" value="0"></progress>
  </div>
<script type="text/javascript" >
var calculateComplexity = function (password) {
  var complexity = 0;
  var regExps = [ 
    /[a-z]/,
    /[A-Z]/,
    /[0-9]/,
    /.{8}/,
  /.{16}/,
    /[!-//:-@[-`{-ÿ]/
  ];
  regExps.forEach(function (regexp) {
    if (regexp.test(password)) {
      complexity++;
    }
  });
  return {
    value: complexity,
    max: regExps.length
  };
};
var checkPasswordStregth = function (password) {
  var progress = document.querySelector('#passwordComplexity'),
      complexity = calculateComplexity(this.value); 
  progress.value = complexity.value;
  progress.max = complexity.max;
};
var input = document.querySelector('#passwordField');
input.addEventListener('keyup', checkPasswordStregth);
</script>
</body>
</html>

 

 

Edytowane przez Mativve
  • Lubię to! 1

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
adam2350    11

@Mativve U mnie to co napisałeś działa ale mam trochę inaczej. Podzieliłem sobie skrypt poszczególne elementy każdy jest w innym pliku  to wszystko łączy się w całość. Gdy to dodam do jednego z "modułów" to nie działa chociaż css działa.

 

To jest 1 cześć:

Spoiler
<!DOCTYPE html>
<html lang="pl">
	<head>
	<meta charset="UTF-8">
	<title>Panel Administratora</title>
	<link href="css/style.css" rel="stylesheet">
	<link href="https://bootswatch.com/cosmo/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
		<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
		<script src="../../js/haslo.js" type="text/javascript"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
        <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon">
        <link rel="icon" href="../../favicon.ico" type="image/x-icon">
        <script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=  fque4wrkn7iq7zz3ah2am6xatgrrfm598yjy7psyuxzdl8ja"></script>
	</head>
	<body>

 

Druga część:

Spoiler

<?php
	include ("inc/header.html");
	require ("../config.php")
	?>
<?php
session_start();
if(!isset($_SESSION['logowanie']))
{ //sprawdzamy czy jestesmy zalogowani
include('index.php');
exit();
}
?>
<div class="container">
	<div class="row">
		<br><br>
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
					<span class="sr-only"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="index.php"><i class="fa fa-home"></i> Home</a>
				</div>
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
					<ul class="nav navbar-nav">
						<li><a href="#">Sklep <span class="sr-only">(current)</span></a></li>
						<li><a href="#">Nasi YouTuberzy</a></li>
						<li><a href="#">Administracja</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right bold">
						<li><a href="#">Kontakt</a></li>
					</ul>
				</div>
			</div>
		</nav>
		<ul class="breadcrumb">
			<li><a href="index.php"><i class="fa fa-home text-black"></i> Home</a></li>
			<li class="active">Panel Administracji</li>
		</ul>
		<div class="pulpit">
			<div class="row">
				<div class="col-md-9">
					<div class="page-header">
						<h2>Panel zarządzania <i class="fa fa-users"></i></h2>
					</div>
<ul class="nav nav-tabs">
  <li> <a href="#news" data-toggle="tab">Newsy</a></li>
    <li class="active"><a href="#zarz" data-toggle="tab">Ustawienia</a></li>
    <li><a href="#uz" data-toggle="tab">Użytkownicy</a></li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade" id="news"><br>
<?php 
include "newsy.php";
?>
</div>
      <div class="tab-pane fade active in" id="zarz">
          <?php include 'zarzadzanie.php'; ?>
    </div>
  <div class="tab-pane fade" id="uz">
   <br>
   <?php 
   include "uzytkownicy.php";
   ?>
<table class="table table-striped table-hover ">
  <thead>
    <tr>
      <th>#</th>
      <th>Login</th>
      <th>Hasło</th>
      <th>E-Mail</th>
      <th>Akcje</th>
    </tr>
  </thead>
  <tbody>
<?php 
include "uzwys.php";
?>
	</table>
  </div>
</div>
				</div>
				<div class="col-md-3">
					<div class="panel panel-warning text-center">
						<div class="panel-heading">
							<h3 class="panel-title">Akcje.</h3>
						</div>
						<div class="panel-body">
							<a  class="btn btn-success"><i class="fa fa-user-secret"></i>   <?php
							echo'Witaj<b> '. $_SESSION['logowanie']. '</b>!';
													?></a><br><br>
							<a href="logout.php" class="btn btn-warning"><i class="fa fa-power-off"></i> Wyloguj Się !</a>
						</div>
					</div>
				</div>
			</div>
			<div class="panel-footer text-center">Stronę wykonał <b>adamek0123</b> dla <b><?php echo $stopka; ?></div>
		</div>
		<br>
	</div>
</div>
<?php
	include ("inc/footer.html");
	?>

 

 

"Moduł":

Spoiler
<?php
session_start();
if(!isset($_SESSION['logowanie']))
{ //sprawdzamy czy jestesmy zalogowani
include('index.php');
exit();
}
function formularz($komunikat = '')
{// wyswietla formularz
echo($komunikat.'<br />');
echo('<form action="index2.php" method="post" class="form-horizontal text-center">');
echo(' <div class="form-group">
      <label for="inputEmail" class="col-lg-2 control-label" name="login" required>Login</label>
      <div class="col-lg-10">
        <input type="text" class="form-control" id="inputEmail" name="login" placeholder="Login" required>
      </div>
    </div>'); //nic nie zmieniac
echo(' <div class="form-group">
      <label for="inputEmail" class="col-lg-2 control-label" name="password" required>Hasło</label>
      <div class="col-lg-10">
        <input type="password" class="form-control" id="inputEmail" name="password" placeholder="Hasło" required>
      </div>
    </div>');
?>  <div class="passwordWrapper">
    <label for="passwordField">
      Twoje nowe hasło
    </label>
    <input type="password" id="passwordField" placeholder="wpisz tutaj swoje hasło, np. Koduu.j3">
    <progress id="passwordComplexity" value="0"></progress>
  </div>
<?php	echo(' <div class="form-group">
      <label for="inputEmail" class="col-lg-2 control-label" required>E-Mail</label>
      <div class="col-lg-10">
        <input type="text" class="form-control" id="inputEmail" name="email" placeholder="E-Mail" required>
      </div>
    </div>');
echo('<input type="hidden" value="1" name="wyslany" />');
echo('<input type="submit"  class="btn btn-success" value="Dodaj użytkownika" />');
echo('</form>');
}
$login = $_POST['login'];
$login = htmlspecialchars($login); //usuwanie html z loginu
$password = $_POST['password'];
$email = $_POST['email'];
if(isset($_POST['wyslany']) == false)
{
formularz();
}
elseif(!empty($login) && !empty($password))
{//sprawdza poprawnosc danych z formularza
if(mysqli_num_rows(mysqli_query($polaczenie, "SELECT * FROM `users` WHERE login='$login';"))) //sprawdza login
formularz('Konto o tej nazwie już istnieje!');
else
{
mysqli_query($polaczenie, "INSERT INTO `users` (login, password, email) VALUES ('$login','".md5($password)."', '$email')"); //kodowanie hasla przez md5 i zapis do bazy danych
echo('Nowy administrator pomyślnie dodany.');
}
}
else formularz('<div class="komunikat">Wymagane pola nie zostały uzupełnione!</div>');
?>

 

 

JS (haslo.js): 

Spoiler
var calculateComplexity = function (password) {
  var complexity = 0;
  var regExps = [ 
    /[a-z]/,
    /[A-Z]/,
    /[0-9]/,
    /.{8}/,
    /.{16}/,
    /[!-//:-@[-`{-ÿ]/
  ];
  regExps.forEach(function (regexp) {
    if (regexp.test(password)) {
      complexity++;
    }
  });
  return {
    value: complexity,
    max: regExps.length
  };
};
var checkPasswordStregth = function (password) {
  var progress = document.querySelector('#passwordComplexity'),
      complexity = calculateComplexity(this.value); 
  progress.value = complexity.value;
  progress.max = complexity.max;
};
var input = document.querySelector('#passwordField');
input.addEventListener('keyup', checkPasswordStregth);

 

 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Mativve    1,260
6 minut temu, adam2350 napisał:

@Mativve Tak:

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at haslo.js:34

Spróbuj dodać kod lub link do skryptu przed końcem strony w głównym pliku łączącym wszystkie moduły tzn:

 

<?php
TWÓJ KOD...
?>
tutaj daj link do skryptu
</body>
</html>

 

  • Super 1

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Mativve    1,260

Zanim zamknie się temat wytłumaczę Ci o co chodzi. Błąd "Uncaught TypeError: Cannot read property 'addEventListener' of null at haslo.js:34" oznacza, że skrypt nie znalazł #passwordField i jest to spowodowane tym, że strony są czytane od góry do dołu, linia po linii i jeśli strona nie załaduje tego elementu a skrypt będzie chciał go znaleźć będzie wywalało błąd, dlatego niektóre skrypty daje się w head a niektóre przed zakończeniem dokumentu. Mam nadzieję, że dobrze to opisałem :P 

  • Lubię to! 2

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

×