Простой сайт с генерацией логинов и паролей

Предисловие

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

Сайт

Более 2 недель назад я написал и выложил в открытий доступ свой простейший мини сайт, который генерирует примитивные логины и пароли. На все это ушло порядка 100 строк кода на языке JavaScript. Скриншот этого сайта вы можете рассмотреть ниже.

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

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

Давайте взглянем под капот моего сайта. Начнем с первого файла, его я назвал generate.js. Ко всему коду я прикрепил множество комментариев, так что не думаю нужным говорить отдельно о каждом из них (;

'Use strict'

// Функция для генерации символов
// Параметр keys получает рандомное число от 0 до 9 и использует его как ключ для получения какого-либо значения из списка symbol
function generate_symbol(keys)
{
	// Коллеция symbol содержащая в себе разнообразные символы
	let symbol = new Map([
	[0, '-'],
	[1, '!'],
	[2, '@'],
	[3, '#'],
	[4, '$'],
	[5, '%'],
	[6, '^'],
	[7, '&'],
	[8, '&'],
	[9, '*']
	])
	
	// Метод get считает значения по полученному выше рандомному ключу и возврощает его
	return symbol.get(keys)
}

// Функция для генерации цифр
// Параметр max отвечает за количество цифр
function generate_number(max)
{
	let final_number = ''
	// Цикл с полученной переменной max
	for (var i = 0; i < max; i++)
	{
		// random выдает дробное рандомное число
		// 10 это умножение дробного результата random на число 10, чтобы получилось дробное число с целым от 0 до 9
		// floor округлит дробное число к целому в меньшую степень
		let number = Math.floor(Math.random() * 10)
		// Присвоим полученное число из выражения выше финальному паролю
		final_number += number
		// Присвоим финальному паролю рандомный символ
		final_number += generate_symbol(number)
	}
	
	return final_number // Вернем готовый финальный пароль длинною 20 символов
}

// Функция, которая занимается генерацией комбинаций слов и местоимений
function generator_words()
{
	let words_human_arr = ['person', 'man', 'woman', 'child', 'boy', 'girl', 'friend', 'neighbour', 'name', 'surname', 'maiden', 'address', 'single', 'age', 'old', 'man', 'young'] // Массив слов связанных с человеком
	
	let pronouns_human_arr = ['i', 'you', 'we', 'they', 'he', 'she', 'it', 'my', 'me', 'your', 'our', 'us', 'their', 'them', 'his', 'him', 'her', 'its'] // Массив местоимений связанных с человеком
	
	// Переменаая, в которую запишется фиинальная комбинация слов и местоимений
	let final_words = ''
	
	// random выдает дробное рандомное число
	// 4 это умножение дробного результата random на число 4, чтобы получилось дробное число с целым от 0 до 3
	// floor округлит дробное число к целому в меньшую степень, а единица увеличит число на единицу чтобы цикл выполнился хотя бы один раз
	// Переменная amount хранит исход работы, которая описана в этом блоке комментариев, чтобы использовать его в цикле ниже
	let amount = Math.floor(Math.random() * 4) + 1
	
	// Цикл объединяет комбинацию слово и местоимение при каждой итерации
	for (let i = 0; i <= amount; i++)
	{
		// Думаю не стоит объяснять как работает random, ведь есть описание работы и пример выше.
		let words_human_arr_length = words_human_arr.length // Получаем количество элементов в массиве и записываем в переменную
		let num1 = Math.floor(Math.random() * words_human_arr_length) // Тут итог работы random умножается на переменную words_human_arr_length и записывается в переменную num1
		let word_human = words_human_arr[num1] // Выбираем рандомное слово из массива использую переменную num1
		
		// То же самое и с местоимением
		let pronouns_human_arr_length = pronouns_human_arr.length
		let num2 = Math.floor(Math.random() * pronouns_human_arr_length)
		let pronoun_human = pronouns_human_arr[num2]

		// Записываем итог работы итерации в переменную при каждой итерации цикла
		final_words += word_human + '_' +  pronoun_human
		if (amount > 1)
			final_words += '_'
	}
	
	return final_words
}

function genetate_password()
{
	let final_password = ''
	final_password += generate_number(10) // Передали функции аргументом количество цифр у сгенирированного числа
	return final_password
}

function genetate_login()
{
	let final_login = ''
	final_login = generator_words()
	return final_login
}

// Главная функция привязанная к кнопке Generate
function generate_login_and_password()
{
	// Получением элемента с id login
	let final_login = document.getElementById('login')
	// Присваение этому элементу новое значение, которые мы получили при работе всего кода
	final_login.value = genetate_login()
	// Получением элемента с id password
	let final_password = document.getElementById('password')
	// Присваение этому элементу новое значение, которые мы получили при работе всего кода
	final_password.value = genetate_password()
}

Второй файл занимается копированием в буфер обмена готового логина и пароля, его же я назвал copy.js. Символично)

'Use strict'

// Функция для копирования логина в буфер обмена при клики кнопки скопировать логин
function copy_login() {
	// Получением элемента с id login
	let final_login = document.getElementById('login')
	
	// Выбираем текстовое поле
	final_login.select();

	// Копируем текст внутри текстового поля
	document.execCommand("copy");
}

// Функция для копирования пароля в буфер обмена при клики кнопки скопировать пароль
function copy_password() {
	// Получением элемента с id password
	let final_password = document.getElementById('password')
		
	// Выбираем текстовое поле
	final_password.select();

	// Копируем текст внутри текстового поля
	document.execCommand("copy");
}

// Функция для копирования логина и пароля в буфер обмена при клики кнопки скопировать все
function copy_all(){
	// Получением элемента с id login
	let final_login = document.getElementById('login')
	// Получением элемента с id password
	let final_password = document.getElementById('password')
	
	// Объявляю переменную ca и записываю в нее значение final_login и final_password
	// Так же устанавливаю между ними символ новой строки, чтобы расположить их отдельно.
	// Так же присваиваю текст Login и Password, чтобы пользователь мог отличить логин и пароль
	let ca = 'Login: ' + final_login.value + ' ' + 'Password: ' + final_password.value // Там где ' ' лучше было бы поставить символ \n, но я таки не смог скопировать его в буфер обмена
	
	// Создаю временный элемент input и присваиваю его переменноой temporary_element_input
    let temporary_element_input = document.createElement("input")
	
	// Метод appendChild позволяет вставить в конец одного элемента другой элемент 
	// Чаще всего используется после создания элемента с помощью createElement
    document.body.appendChild(temporary_element_input)
	
	// Изменяю значение недавно созданного элемента input на значение переменной ca
    temporary_element_input.setAttribute('value', ca)
	
	// Выбираем текстовое поле
    temporary_element_input.select()
	
	// Копируем текст внутри текстового поля
    document.execCommand("copy")
	
	// Метод removeChild позволяет удалить элемент из другого элемента 
    document.body.removeChild(temporary_element_input)
}

Сайт оптимизирован под мобильные устройства, так что все должно работать и на мобильных устройствах (извините за тавтологию). Если есть проблемы, пишите о них в комментариях. А на этом моменте можно уже заканчивать статью, не забудь заглянуть на мой сайт, все ссылки прикрепил ниже! Так же предлагайте что изменить мне на сайте, что добавить, а что убрать. Ну и пишете свое мнение, я обязательно прочту их (;

Ссылки

• Сайт со статьи

• Исходный код (Лицензия MIT)

• Ну и мой официальный сайт, где есть и другие мои творения (;