Перейти к публикации

Генерация пароля при регистрации

radrigo
 Рассказать Подписчики 1

Рекомендованные сообщения

radrigo

radrigo 192

Опубликовано:
Опубликовано:

Пример небольшого хака для генерации случайного пароля при регистрации на примере стандартного шаблона Default.

image.png

Открываем в текстовом редакторе файл images/sprite.svg и в самом низу перед закрывающимся тегом </defs> добавляем следующий код. 

<symbol id="icon-bones" viewBox="0 0 68 68">
<title>bones</title>
<path class="path1" d="m25.85 33.4512v-6.27h-16.53c-4.07 0-7.37 3.3-7.37 7.37v23.46c0 4.07 3.3 7.37 7.37 7.37h23.46c4.08 0 7.38-3.3 7.38-7.37v-15.19h-4.94c-5.17 0-9.37-4.2-9.37-9.37zm-14.0791 8.0162c-2.4659 0-4.4608-1.9949-4.4608-4.461 0-2.466 1.9949-4.467 4.4608-4.467 2.4662 0 4.4671 2.001 4.4671 4.467 0 2.4661-2.0008 4.461-4.4671 4.461zm9.28 9.2811c-2.466 0-4.461-1.995-4.461-4.461s1.995-4.467 4.461-4.467 4.467 2.001 4.467 4.467-2.001 4.461-4.467 4.461zm9.2799 9.2788c-2.4659 0-4.4608-1.9949-4.4608-4.4609s1.9949-4.4671 4.4608-4.4671c2.4662 0 4.4672 2.001 4.4672 4.4671s-2.0009 4.4609-4.4672 4.4609z"></path><path d="m58.68 2.6188h-23.463c-4.07 0-7.37 3.3-7.37 7.371 0-.51 0 22.952 0 23.462 0 4.07 3.3 7.37 7.37 7.37h23.463c4.07 0 7.37-3.3 7.37-7.37v-23.462c0-4.071-3.3-7.371-7.37-7.371zm-21.0143 32.8442c-2.4661 0-4.4609-2.0009-4.4609-4.4671 0-2.466 1.9948-4.4609 4.4609-4.4609s4.4671 1.9949 4.4671 4.4609c0 2.4662-2.001 4.4671-4.4671 4.4671zm-.0006-18.5583c-2.466 0-4.461-1.995-4.461-4.461 0-2.467 1.995-4.468 4.461-4.468 2.467 0 4.468 2.001 4.468 4.468 0 2.466-2.001 4.461-4.468 4.461zm9.2803 9.2793c-2.466 0-4.461-1.994-4.461-4.461 0-2.466 1.995-4.467 4.461-4.467s4.467 2.001 4.467 4.467c0 2.467-2.001 4.461-4.467 4.461zm9.2802-18.2089c2.4661 0 4.4671 1.9949 4.4671 4.4608 0 2.4662-2.001 4.4671-4.4671 4.4671s-4.4609-2.0009-4.4609-4.4671c-.0001-2.4659 1.9948-4.4608 4.4609-4.4608zm.0001 27.4892c-2.467 0-4.461-1.995-4.461-4.461s1.994-4.467 4.461-4.467c2.466 0 4.467 2.001 4.467 4.467s-2.001 4.461-4.467 4.461z"></path>
</symbol>
<symbol id="icon-eye" viewBox="0 0 488.85 488.85">
<title>eye</title>
<path class="path1" d="M244.425,98.725c-93.4,0-178.1,51.1-240.6,134.1c-5.1,6.8-5.1,16.3,0,23.1c62.5,83.1,147.2,134.2,240.6,134.2 s178.1-51.1,240.6-134.1c5.1-6.8,5.1-16.3,0-23.1C422.525,149.825,337.825,98.725,244.425,98.725z M251.125,347.025 c-62,3.9-113.2-47.2-109.3-109.3c3.2-51.2,44.7-92.7,95.9-95.9c62-3.9,113.2,47.2,109.3,109.3 C343.725,302.225,302.225,343.725,251.125,347.025z M248.025,299.625c-33.4,2.1-61-25.4-58.8-58.8c1.7-27.6,24.1-49.9,51.7-51.7 c33.4-2.1,61,25.4,58.8,58.8C297.925,275.625,275.525,297.925,248.025,299.625z"></path>
</symbol>

В файле registration.tpl ищем следующую строчку 

<input type="password" name="password1" id="password1" class="wide" required>

Заменяем на 

				<div class="registration-input-btn">
					<input type="password" name="password1" id="password1" class="wide" required>
					<button class="btn-reg-show" type="button" onclick="togglePasswordDisplay(passwordField1,passwordField2,showPassword)"><svg class="icon icon-eye"><use xlink:href="#icon-eye"/></svg><span class="title_hide">Скрыть или показать пароль</span></button>
					<button class="btn-reg-pass" type="button" onclick="generatePasswords(passwordField1,passwordField2,showPassword)"><svg class="icon icon-bones"><use xlink:href="#icon-bones"/></svg><span class="title_hide">Сгенерировать пароль</span></button>
				</div>

В этом же файле самом низу прописываем следующее 

[registration]
<script>
	var passwordField1 = document.getElementById('password1');
	var passwordField2 = document.getElementById('password2');
	var showPassword = document.querySelector('.btn-reg-show');
	function generatePasswords(pass1, pass2, show) {
		var alphabet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
		var password = '';
		var passwordLength = 12;
		var currentIndex = 0;
		if (pass1.type === 'password') {
			setTimeout(function () {
				pass1.type = 'password';
				pass2.type = 'password';
				show.classList.remove('on');
			}, 1000);
		}
		pass1.type = 'text';
		pass2.type = 'text';
		show.classList.add('on');
		function addCharacter() {
			if (currentIndex < passwordLength) {
				password += alphabet.charAt(Math.floor(Math.random() * alphabet.length));
				pass1.value = password;
				pass2.value = password;
				currentIndex++;
				setTimeout(addCharacter, 20);
			}
		}
		addCharacter();
	}
	function togglePasswordDisplay(pass1, pass2, show) {
		if (pass1.type === 'password') {
			pass1.type = 'text';
			pass2.type = 'text';
			show.classList.add('on');
		} else {
			pass1.type = 'password';
			pass2.type = 'password';
			show.classList.remove('on');
		}
	}
</script>
[/registration]

В файле css/styles.css в самом низу прописываем следующее 

.registration-input-btn {
	position: relative;
}
.btn-reg-show,
.btn-reg-pass {
	display: block;
	padding: 0;
	position: absolute;
	top: 50%;
	margin-top: -15px;
	height: 28px;
	width: 28px;
	border: 0;
	outline: 0;
	background-color: transparent;
	padding: 3px;
	cursor: pointer;
}
.btn-reg-pass {
	right: 10px;
}
.btn-reg-show {
	right: 43px;
}
.registration-input-btn input {
	padding-right: 71px;
}
.btn-reg-show.on .icon {
	fill: red;
}

.btn-reg-show .icon,
.btn-reg-pass .icon {
	width: 100%;
	height: 100%;
}

Пример можно посмотреть на моём сайте
https://gusev-online.ru/index.php?do=register

  • Нравится 1
  • Спасибо 4
Ссылка на сообщение
Поделиться на других сайтах
kamensk

kamensk 88

Опубликовано:
Опубликовано:

Автор, благодарю!

Очень радует, что находятся те - кто развивает тему простых, и в тоже время интересных хаков на cms DLE.

Надо будет ради интереса к себе на сайт закинуть.

Ссылка на сообщение
Поделиться на других сайтах
Bomber

Bomber 6

Опубликовано:
Опубликовано:

Немного допилил скрипт. Теперь после генерации пароля он добавится автоматически в буфер обмена. 

var passwordField1 = document.getElementById('password1');
var passwordField2 = document.getElementById('password2');
var showPassword = document.querySelector('.btn-reg-show');

function generatePasswords(pass1, pass2, show) {
    var alphabet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    var password = '';
    var passwordLength = 12;
    var currentIndex = 0;
    
    if (pass1.type === 'password') {
        setTimeout(function () {
            pass1.type = 'password';
            pass2.type = 'password';
            show.classList.remove('on');
        }, 1000);
    }
    
    pass1.type = 'text';
    pass2.type = 'text';
    show.classList.add('on');
    
    function addCharacter() {
        if (currentIndex < passwordLength) {
            password += alphabet.charAt(Math.floor(Math.random() * alphabet.length));
            pass1.value = password;
            pass2.value = password;
            currentIndex++;
            setTimeout(addCharacter, 20);
        } else {
            navigator.clipboard.writeText(password);
        }
    }
    addCharacter();
}

function togglePasswordDisplay(pass1, pass2, show) {
    if (pass1.type === 'password') {
        pass1.type = 'text';
        pass2.type = 'text';
        show.classList.add('on');
    } else {
        pass1.type = 'password';
        pass2.type = 'password';
        show.classList.remove('on');
    }
}

 

Ссылка на сообщение
Поделиться на других сайтах
Bomber

Bomber 6

Опубликовано:
Опубликовано:

Этот вариант добавляет всплывающее сообщение DLE что пароль скопирован. 

<script>
var passwordField1 = document.getElementById('password1');
var passwordField2 = document.getElementById('password2');
var showPassword = document.querySelector('.btn-reg-show');

function generatePasswords(pass1, pass2, show) {
    var alphabet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    var password = '';
    var passwordLength = 12;
    var currentIndex = 0;
    
    if (pass1.type === 'password') {
        setTimeout(function () {
            pass1.type = 'password';
            pass2.type = 'password';
            show.classList.remove('on');
        }, 1000);
    }
    
    pass1.type = 'text';
    pass2.type = 'text';
    show.classList.add('on');
    
    function addCharacter() {
        if (currentIndex < passwordLength) {
            password += alphabet.charAt(Math.floor(Math.random() * alphabet.length));
            pass1.value = password;
            pass2.value = password;
            currentIndex++;
            setTimeout(addCharacter, 20);
        } else {
            navigator.clipboard.writeText(password).then(function() {
                DLEPush.info('Пароль скопирован!', 'Внимание');
            });
        }
    }
    addCharacter();
}

function togglePasswordDisplay(pass1, pass2, show) {
    if (pass1.type === 'password') {
        pass1.type = 'text';
        pass2.type = 'text';
        show.classList.add('on');
    } else {
        pass1.type = 'password';
        pass2.type = 'password';
        show.classList.remove('on');
    }
}
</script>

 

  • Нравится 2
  • Спасибо 3
Ссылка на сообщение
Поделиться на других сайтах
stimul992

stimul992 6

Опубликовано:
Опубликовано: (изменено)

тоже сделал, ранее как это увидел), интересно почему этого нету из коробки

Изменено пользователем stimul992
Ссылка на сообщение
Поделиться на других сайтах
kamensk

kamensk 88

Опубликовано:
Опубликовано:
57 минут назад, stimul992 сказал:

тоже сделал, ранее как это увидел), интересно почему этого нету из коробки

Потому что это опция внедряется на уровне шаблона. А в шаблонах из коробки - очень много чего нет..., что приходится самим добавлять.... Например, вывод похожих новостей с превью-фото.
 

Ссылка на сообщение
Поделиться на других сайтах
stimul992

stimul992 6

Опубликовано:
Опубликовано:
1 минуту назад, kamensk сказал:

Потому что это опция внедряется на уровне шаблона. А в шаблонах из коробки - очень много чего нет..., что приходится самим добавлять.... Например, вывод похожих новостей с превью-фото.

да в курсе что в шаблоне))

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
 Рассказать
Подписчики 1
Перейти к списку тем
×
×
  • Создать...