Главная Обзор Помощь
Регистрация Вход
TooManySugar
/
go-site
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

регистрация обновлена на bootstrap

toomanysugar 3 лет назад
Родитель
e87c8844ea
Сommit
21767a069e
3 измененных файлов с 214 добавлено и 24 удалено
Разделённый вид Показать статистику Diff
  1. 27 0
      resources/signin/script.js
  2. 139 0
      resources/signin/style.css
  3. 48 24
      ui/templates/signin.html

+ 27 - 0
resources/signin/script.js
Просмотреть файл 

@@ -0,0 +1,27 @@
 
+$(document).ready(function(){
 
+	$('.pass_show').append('<span class="ptxt">Показать</span>');
 
+
 
+	$('.ptxt').on('mousedown', function(){
 
+		$(this).prev().attr('type', function(index, attr){return 'text';})
 
+	});
 
+
 
+	$('.ptxt').on('mouseup', function(){
 
+		$(this).prev().attr('type', function(index, attr){return 'password';})
 
+	});
 
+});
 
+
 
+ $("#signinsubmitform").submit(function(event){
 
+ 	//alert("alert");
 
+    var isValid = true;
 
+
 
+    // do all your validation if need here
 
+    if (document.getElementById('password').value != document.getElementById('password-repeat').value) {
 
+    	isValid = false;
 
+    }
 
+
 
+
 
+    if (!isValid) {
 
+        event.preventDefault();
 
+        document.getElementById("errmsg").innerHTML = "Введеные пароли не совпадают";
 
+    }
 
+});

+ 139 - 0
resources/signin/style.css
Просмотреть файл 

@@ -0,0 +1,139 @@
 
+.has-float-label{
 
+	display:block;
 
+	position:relative;
 
+	width:100%;
 
+}
 
+
 
+.has-float-label label,.has-float-label>span{
 
+	position:absolute;
 
+	cursor:text;
 
+	font-size:75%;
 
+	opacity:1;
 
+	-webkit-transition:all .2s;
 
+	transition:all .2s;
 
+	top:-.5em;
 
+	left:.75rem;
 
+	z-index:3;
 
+	line-height:1;
 
+	padding:0 3px;
 
+	background:#fff;
 
+	font-weight:normal;
 
+}
 
+.has-float-label>span{/*For select2-bootstrap dropdown set top,left margin 0*/
 
+	top:0;
 
+	left:0;
 
+}
 
+.has-float-label label::after,.has-float-label>span::after{
 
+	content:" ";
 
+	display:block;
 
+	position:absolute;
 
+	/*background:#fff;*/
 
+	height:2px;
 
+	top:50%;
 
+	left:-.2em;
 
+	right:-.2em;
 
+	z-index:-1;
 
+}
 
+.has-float-label .form-control::-webkit-input-placeholder{
 
+	opacity:1;
 
+	-webkit-transition:all .2s;
 
+	transition:all .2s;
 
+}
 
+.has-float-label .form-control::-moz-placeholder{
 
+	opacity:1;
 
+	transition:all .2s;
 
+}
 
+.has-float-label .form-control:-ms-input-placeholder{
 
+	opacity:1;
 
+	transition:all .2s;
 
+}
 
+.has-float-label .form-control::placeholder{
 
+	opacity:1;
 
+	-webkit-transition:all .2s;
 
+	transition:a.has-float-labelll .2s;
 
+}
 
+
 
+ .form-control:placeholder-shown:not(:focus)+*{
 
+	font-size:100%;
 
+	color: #6c757d;
 
+	opacity: 0;
 
+	top:.3em;
 
+}
 
+.input-group .has-float-label{
 
+	-webkit-box-flex:1;
 
+	-webkit-flex-grow:1;
 
+	-ms-flex-positive:1;
 
+	flex-grow:1;
 
+	margin-bottom:0;
 
+	display:-webkit-box;
 
+	display:-webkit-flex;
 
+	display:-ms-flexbox;
 
+	display:flex;
 
+	-webkit-box-orient:vertical;
 
+	-webkit-box-direction:normal;
 
+	-webkit-flex-direction:column;
 
+	-ms-flex-direction:column;
 
+	flex-direction:column;
 
+	-webkit-box-pack:center;
 
+	-webkit-justify-content:center;
 
+	-ms-flex-pack:center;
 
+	justify-content:center;
 
+}
 
+
 
+
 
+
 
+/*pass_show*/
 
+.ptxt {
 
+	user-select: none;
 
+	color:#6c757d;
 
+	float: right !important;
 
+	font-size: 20px !important;
 
+	left: auto !important;
 
+	background: transparent !important;
 
+	position: absolute;
 
+	cursor: pointer !important;
 
+	top: 30% !important;
 
+	right: 10px;
 
+	opacity: 0;
 
+}
 
+
 
+.has-float-label:not(:hover) > .ptxt {
 
+	opacity: 0;
 
+}
 
+
 
+.ptxt:pressed > .form-control {
 
+    background-color: #25272a;
 
+    box-shadow: none;
 
+    color: #fff;
 
+    border-color: #4f63e7
 
+}
 
+
 
+.errmsg {
 
+	color: #E78587;
 
+}
 
+
 
+.gradient-custom {
 
+  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
+  background: linear-gradient(140deg, rgba(0, 33, 58, 1), rgba(66, 108, 121, 1))
 
+}
 
+
 
+.form-control {
 
+	background-color: #25272a !important;
 
+	color:#d6d9db;
 
+}
 
+
 
+.form-control:focus {
 
+    box-shadow: none;
 
+    color: #fff;
 
+    border-color: #4f63e7;
 
+}
 
+
 
+.btn-dark {
 
+	background-color: #25272a;
 
+	color: #fff;
 
+}
 
+
 
+.btn-dark:hover {
 
+	background-color: #25272a;
 
+	border-color: "pink";
 
+}

+ 48 - 24
ui/templates/signin.html
Просмотреть файл 

@@ -3,31 +3,55 @@
 
 	<head>
 
 		<meta charset="UTF-8">
 
 		<title>Регистрация</title>
 
+		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
+		<link rel="stylesheet" type="text/css" href="http://localhost:8080/resources/signin/style.css">
 
 	</head>
 
 	<body>
 
-		<h1>SIGNIN</h1>
 
-		<form method="POST">
 
-			<p>
 
-				Логин:
 
-				<br>
 
-				<input name="username" value="{{.Username}}">
 
-			</p>
 
-			<p>
 
-				Пароль: 
-				<br>
 
-				<input name="password" value="{{.Password}}">
 
-			</p>
 
-			<p>
 
-				Подтвердить пароль:
 
-				<br>
 
-				<input name="password-repeat" value="{{.PasswordRepeat}}">
 
-			</p>
 
-			<p>
 
-				<button type="submit">Зарегистрироваться</button>
 
-			</p>
 
-			{{if .Error}}<p>
 
-				{{.Error}}
 
-			</p>{{end}}
 
-		</form>
 
+		<section class="vh-100 gradient-custom">
 
+		  <div class="container py-5 h-100">
 
+		    <div class="row d-flex justify-content-center align-items-center h-100">
 
+		      <div class="col-12 col-md-8 col-lg-6 col-xl-5">
 
+		        <div class="ard bg-dark text-white" style="border-radius: 1rem;">
 
+		          <div class="card-body p-5">
 
+		            <div class="mb-md-5 mt-md-4 pb-2">
 
+		              <form method="POST" id="signinsubmitform">
 
+		                <h2 class="fw-bold mb-2 text-uppercase text-center pb-4">Регистрация</h2>
 
+		                <div class="form-outline form-white mb-4">
 
+		                  <label class="form-label" for="typeEmailX">Имя пользователя</label>
 
+		                  <input type="text" id="username" name="username" class="form-control form-control-lg" value="{{.Username}}" required>
 
+		                </div>
 
+		                <div class="form-group form-outline form-white mb-4">
 
+		                  <label class="form-label" for="typePasswordX">Пароль</label>
 
+		                  <span class="has-float-label pass_show mb-4">
 
+		                	<input type="password" id="password" name="password" class="form-control form-control-lg has-float-label" value="{{.Password}}" required>
 
+		                  </span>
 
+		                </div>
 
+		                <div class="form-group form-outline form-white mb-4">
 
+		                  <label class="form-label" for="typePasswordX">Подтвердить пароль</label>
 
+		                  <span class="has-float-label pass_show mb-4">
 
+		                	<input type="password" id="password-repeat" name="password-repeat" class="form-control form-control-lg has-float-label" value="{{.PasswordRepeat}}" required>
 
+		                  </span>
 
+		                  <small id="errmsg" class="form-text text-center errmsg">{{if .Error}}{{.Error}}{{end}}</small>
 
+		                </div>
 
+		           	    <div class="text-center">
 
+		                  <input class="btn btn-dark btn-lg px-5" type="submit" value="Регистрация">
 
+		                </div>
 
+		              </form>
 
+		            </div>
 
+		            <div>
 
+		              <p class="mb-0 text-secondary">Уже зарегистрированы? <a href="/login/" class="text-primary fw-bold myclass">Войти</a></p>
 
+		            </div>  
+		          </div>
 
+		        </div>
 
+		      </div>
 
+		    </div>
 
+		  </div>
 
+		</section>
 
+
 
+		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
 
+		</script>
 
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
 
+		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 
+		<script src="http://localhost:8080/resources/signin/script.js"></script>
 
 	</body>
 
 </html>