[password-resets/feat/passwords-account: 6/10] feat(validation): refactored form-reset and added proper validation
- From: Claudio Wunder <cwunder src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [password-resets/feat/passwords-account: 6/10] feat(validation): refactored form-reset and added proper validation
- Date: Sun, 22 Nov 2020 16:17:31 +0000 (UTC)
commit 0704599122541e5321a6c7ab82ef5f5a868a5cd3
Author: Claudio Wunder <cwunder gnome org>
Date: Sun Nov 22 16:55:06 2020 +0100
feat(validation): refactored form-reset and added proper validation
improved the password-reset to use HTML5 form validations
based on the HTML Living API
also refactored the page to follow HTML conventions.
templates/form-reset.html | 150 ++++++++++++++++++++++++++--------------------
1 file changed, 85 insertions(+), 65 deletions(-)
---
diff --git a/templates/form-reset.html b/templates/form-reset.html
index a0d036b..23aa6b4 100644
--- a/templates/form-reset.html
+++ b/templates/form-reset.html
@@ -1,81 +1,101 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd";>
<html>
-
<head>
- <title>GNOME Account Password Reset</title>
-
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">
- <meta content="#4a86cf" name="theme-color">
- <meta content="Planet GNOME" name="application-name">
- <link rel="shortcut icon" type="image/png" href="https://static.gnome.org/img/favicon.ico";>
- <link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
- <link href="https://static.gnome.org/css/deneb.min.css"; media="all" rel="stylesheet" type="text/css">
- <link href="https://static.gnome.org/css/fonts.css"; media="all" rel="stylesheet" type="text/css">
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css";>
- <link rel="stylesheet" href="/static/css/custom.css">
-
- <script type="text/javascript" src="https://static.gnome.org/js/jquery-2.1.4.min.js";></script>
- <script type="text/javascript" src="https://static.gnome.org/js/deneb.min.js";></script>
- <script type="text/javascript" src="/static/js/password-strength.js"></script>
+ <title>GNOME Account Password Reset</title>
+ <meta charset="UTF-8"/>
+ <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"/>
+ <meta content="#4a86cf" name="theme-color"/>
+ <meta content="GNOME Password Reset" name="application-name"/>
+ <link rel="shortcut icon" type="image/png" href="https://static.gnome.org/img/favicon.ico"/>
+ <link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'/>
+ <link href="https://static.gnome.org/css/deneb.min.css"; media="all" rel="stylesheet" type="text/css"/>
+ <link href="https://static.gnome.org/css/fonts.css"; media="all" rel="stylesheet" type="text/css"/>
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"/>
+ <link rel="stylesheet" href="/static/css/custom.css"/>
</head>
-
<body class="gnome-body">
<header class="gnome-header">
- <nav class="navbar navbar-fixed-top navbar-default affix-top">
- <div class="container">
- <div class="navbar-header">
- <a class="gnome-navbar-brand" href="https://www.gnome.org"; title="Go to home
page">
- <img alt="GNOME: The Free Software Desktop Project"
src="https://static.gnome.org/img/gnome-logo.svg";>
- </a>
- </div>
- </div>
- </nav>
+ <nav class="navbar navbar-fixed-top navbar-default affix-top">
+ <div class="container">
+ <div class="navbar-header">
+ <a class="gnome-navbar-brand" href="https://www.gnome.org"; title="Go to home page">
+ <img alt="GNOME: The Free Software Desktop Project"
+ src="https://static.gnome.org/img/gnome-logo.svg"/>
+ </a>
+ </div>
+ </div>
+ </nav>
</header>
-
<div class="gnome-content">
<div class="container">
- <div class="row">
- <div class="col-lg-auto">
- <h1>This form will allow you to effectively reset your GNOME Account
- Password. Once done you will be able to login against GNOME services or
- manage your account <a href="https://account.gnome.org"; target="_blank">here</a>.
- </h1>
- </div>
- </div>
+ <div class="row">
+ <div class="col-lg-8 col-centered text-center">
+ <h1>Update your password.</h1>
+ <h3>This form will allow you to effectively reset your GNOME Account
+ Password. Once done you will be able to login against GNOME services or
+ manage your account <a href="https://account.gnome.org"; target="_blank">here</a>.
+ </h3>
+ </div>
+ </div>
<div class="row my-5">
- <div class="col-md-4 col-centered">
- <form method="post">
- <label for="password" data-error="Password does not match requirements" data-success="Password
matches requirements" style="width:400px;"><h3>Please enter your new GNOME Account password:</h3></label>
- <input type="password" id="password" name="password" class="form-control form-control-lg
validate" required>
- <button type="submit" class="btn btn-primary btn-lg btn-block" style="margin-top:
1%">Submit</button>
- </form>
- </div>
- <div class="col-md-5 col-centered" style="margin-top: 1%">
- <div class="alert alert-warning password-alert" role="alert">
- <ul>
- <li class="requirements leng"><i class="fas fa-check green-text"></i><i class="fas fa-times
red-text"></i> Your password must have at least 8 chars.</li>
- <li class="requirements big-letter"><i class="fas fa-check green-text"></i><i class="fas
fa-times red-text"></i> Your password must have at least 1 big letter.</li>
- <li class="requirements num"><i class="fas fa-check green-text"></i><i class="fas fa-times
red-text"></i> Your password must have at least 1 number.</li>
- <li class="requirements special-char"><i class="fas fa-check green-text"></i><i class="fas
fa-times red-text"></i> Your password must have at least 1 special char.</li>
- </ul>
+ <div class="col-md-4 col-centered">
+ <form method="post">
+ <input type="password"
+ id="password"
+ name="password"
+ pattern="[a-zA-Z0-9!@#$%^*()_+\-=\[\]{};':\\|,.<>\/?]{8,48}"
+ title="7 to 24 letters with special characters, numbers and uppercase letters"
+ class="form-control form-control-lg validate"
+ placeholder="Your new GNOME Account password..."
+ required=""/>
+ <button type="submit" class="btn btn-primary btn-lg btn-block">
+ Change my password
+ </button>
+ </form>
+ </div>
+ <div class="col-md-5 col-centered" style="margin-top: 1%">
+ <div class="alert alert-warning password-alert" role="alert">
+ <ul>
+ <li class="requirements length">
+ <i class="fas fa-check green-text"></i>
+ <i class="fas fa-times red-text"></i>
+ Your password must have at least 8 chars and maximum 48 chars.
+ </li>
+ <li class="requirements big-letter">
+ <i class="fas fa-check green-text"></i>
+ <i class="fas fa-times red-text"></i>
+ Your password must have at least 1 big letter.
+ </li>
+ <li class="requirements numbers">
+ <i class="fas fa-check green-text"></i>
+ <i class="fas fa-times red-text"></i>
+ Your password must have at least 1 number.
+ </li>
+ <li class="requirements special-char">
+ <i class="fas fa-check green-text"></i>
+ <i class="fas fa-times red-text"></i>
+ Your password must have at least 1 special char.
+ </li>
+ </ul>
+ </div>
</div>
- </div>
</div>
- </div>
+ </div>
</div> <!-- /gnome-content -->
-
<div class="footer m-t-0">
- <div class="container">
- <div class="row">
- <div class="col-xs-12 footnotes">
- <div class="section">
- <p>© <a href="https://www.gnome.org/";>The GNOME Project</a>.</p>
- <p>Hosted by <a href="https://www.redhat.com"; target="_blank">Red
Hat</a>. Powered by <a href="https://fastapi.tiangolo.com"; target="_blank">FastAPI</a>.</p>
- </div>
- </div> <!-- /footnotes -->
- </div>
- </div>
+ <div class="container">
+ <div class="row">
+ <div class="col-xs-12 footnotes">
+ <div class="section">
+ <p>© <a href="https://www.gnome.org/";>The GNOME Project</a>.</p>
+ <p>Hosted by <a href="https://www.redhat.com"; target="_blank">Red Hat</a>. Powered by
Hosted by <a
+ href="https://fastapi.tiangolo.com"; target="_blank">FastAPI</a>.</p>
+ </div>
+ </div> <!-- /footnotes -->
+ </div>
+ </div>
</div> <!-- /footer -->
+<script type="text/javascript" src="https://static.gnome.org/js/jquery-2.1.4.min.js";></script>
+<script type="text/javascript" src="https://static.gnome.org/js/deneb.min.js";></script>
+<script type="text/javascript" src="/static/js/password-strength.js"></script>
</body>
</html>
\ No newline at end of file
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
![https://static.gnome.org/img/gnome-logo.svg"](https://static.gnome.org/img/gnome-logo.svg"){kind=link}
![https://static.gnome.org/img/gnome-logo.svg"/](https://static.gnome.org/img/gnome-logo.svg"/){kind=link}