SignUp.js v0.1

/**
 * @Version 0.1
 * @Last 2020.05.20
 * @Author rairen
 */
$(function () {
	'use strict';
	var is_submit = true;
	var id_check = false;
	$(document).on('blur', 'input[name="id"]', function () {
		var id_check_text = $('.id_check_text');
		if (this.value.length >= 4) {
			var pattern1 = /[0-9]/;
			var pattern2 = /[a-z]/;
			var pattern_count = 0;
			if (pattern1.test(this.value)) {
				pattern_count++;
			}
			if (pattern2.test(this.value)) {
				pattern_count++;
			}
			if (pattern_count === 1 || pattern_count === 2) {
				var f = $(this).closest('form');
				var id = this.value;
				$.ajax({
					url: base_url + 'process/member/id_duplication_check',
					type: 'post',
					data: {
						id: id,
						pdx_csrf_token: $('input[name="' + csrf + '"]').val(),
					},
					dataType: 'json',
					success: function (result) {
						if (result.code === 'success') {
							id_check_text.addClass('text-danger').text(result.message);
							id_check = false;
						}
						else if (result.code === 'fail') {
							id_check_text.addClass('text-success').text(result.message);
							id_check = true;
						}
						else {
							id_check_text.addClass('text-danger').text('ERROR : AJAX');
							id_check = false;
						}
						f.find('input[name="' + result.data.csrf.name + '"]').val(result.data.csrf.hash);
					},
					error: function (error) {
						console.log(error);
						id_check = false;
					},
				});
			}
			else {
				id_check_text.addClass('text-danger').text('영어 소문자, 숫자 외의 문자는 아이디로 이용하실 수 없습니다.');
				id_check = false;
			}
		}
		else if (this.value.length >= 1 && this.value.length < 4) {
			id_check_text.addClass('text-danger').text('4자 이상으로 입해야합니다.');
			id_check = false;
		}
		else {
			id_check_text.addClass('text-danger').text('아이디는 필 수 입니다.');
			id_check = false;
		}
	});
	var password_check = false;
	var password_status = '취약';
	//비밀번호 강중약
	$(document).on('keyup', 'input[name="password"]', function () {
		var progress_bar = $('.password-progress > .progress-bar');
		var progress_text = $('.password-progress > .progress-bar > .progress-text');
		if (this.value.length > 4) {
			progress_bar.attr({
				'aria-valuenow': 33,
			}).css({ width: '33%' });
			progress_text.text('약');
			var pattern_count = 0;
			var pattern1 = /[0-9]/;
			var pattern2 = /[a-z]/;
			var pattern3 = /[A-Z]/;
			var pattern4 = /[!@#$%^&*()\-=\\_+|`~]/;     // 원하는 특수문자 추가 제거
			if (pattern1.test(this.value)) {
				pattern_count++;
			}
			if (pattern2.test(this.value)) {
				pattern_count++;
			}
			if (pattern3.test(this.value)) {
				pattern_count++;
			}
			if (pattern4.test(this.value)) {
				pattern_count++;
			}
			switch (pattern_count) {
				case 1:
					progress_bar.removeClass('progress-bar-primary').removeClass('progress-bar-warning').addClass('progress-bar-danger').attr({
						'aria-valuenow': 25,
					}).css({ width: '25%' });
					progress_text.text('약');
					password_status = '약';
					break;
				case 2:
					progress_bar.removeClass('progress-bar-primary').removeClass('progress-bar-danger').addClass('progress-bar-warning').attr({
						'aria-valuenow': 50,
					}).css({ width: '50%' });
					progress_text.text('중');
					password_status = '중';
					break;
				case 3:
					progress_bar.removeClass('progress-bar-warning').removeClass('progress-bar-danger').addClass('progress-bar-primary').attr({
						'aria-valuenow': 75,
					}).css({ width: '75%' });
					progress_text.text('강');
					break;
				case 4:
					progress_bar.removeClass('progress-bar-warning').removeClass('progress-bar-danger').addClass('progress-bar-primary').attr({
						'aria-valuenow': 100,
					}).css({ width: '100%' });
					progress_text.text('특강');
					break;
			}
			password_check = true;
		}
		else {
			progress_bar.removeClass('progress-bar-primary').removeClass('progress-bar-warning').addClass('progress-bar-danger').attr({
				'aria-valuenow': 0,
			}).css({ width: '0%' });
			progress_text.text('취약');
			password_status = '취약';
			password_check = false;
		}
	});
	//비밀번호 일치표시
	$(document).on('keyup', 'input[name="password_confirm"]', function () {
		var password = $('input[name=password]').val();
		if (password === this.value) {
			$('.password_confirm_text').removeClass('text-danger').addClass('text-success').text('일치합니다.');
		}
		else {
			$('.password_confirm_text').removeClass('text-success').addClass('text-danger').text('일치하지 않습니다.');
		}
	});
	//비밀번호 보기
	$(document).on('click', '.password_view_toggle', function () {
		var target = $($(this).data('target'));
		if (target.attr('type') === 'password') {
			target.attr('type', 'text');
			$(this).empty().append('<i class="fa fa-eye-slash"></i>');
		}
		else {
			target.attr('type', 'password');
			$(this).empty().append('<i class="fa fa-eye"></i>');
		}
	});
	$(document).on('submit', 'form[name="sign_up_form"]', function () {
		var f = $(this);
		var id = $.trim(f.find('input[name="id"]').val());
		if (js_empty(id)) {
			alert('아이디를 입력하세요.');
			return false;
		}
		if (id.length < 4) {
			alert('아이디는 4자 이상 입력하세요.');
			return false;
		}
		var password = $.trim(f.find('input[name="password"]').val());
		if (js_empty(password)) {
			alert('비밀번호를 입력하세요.');
			return false;
		}
		if (password.length < 4) {
			alert('비밀번호는 4자 이상 입력하세요.');
			return false;
		}
		var password_confirm = $.trim(f.find('input[name="password_confirm"]').val());
		if (js_empty(password_confirm)) {
			alert('비밀번호 확인을 입력하세요.');
			return false;
		}
		if (password !== password_confirm) {
			alert('비밀번호가 일치하지 않습니다.');
			return false;
		}
		switch (password_status) {
			case '취약':
			case '약':
				if (!confirm('비밀번호 강도가 약하여 보안에 취약할 수 있습니다.\n비밀번호 강도 "강"이상을 권장합니다.\n정말로 이대로 진행하시겠습니까?')) {
					return false;
				}
				break;
		}
		if (is_submit) {
			is_submit = false;
			f.find('button[id="sign_up"]').prop('disabled', true);
			$.ajax({
				url: f.attr('action'),
				type: f.attr('method'),
				data: f.serialize(),
				dataType: 'json',
				success: function (result) {
					if (result.code === 'success') {
						if (result.message !== undefined && result.message !== '') {
							alert(result.message);
						}
						location.href = result.url;
					}
					else if (result.code === 'fail') {
						if (result.message !== undefined && result.message !== '') {
							alert(result.message);
						}
					}
					else {
						console.log('ERROR : SIGN UP RESULT');
						alert('통신 상의 오류가 발생되어 진행할 수 없습니다.');
					}
					is_submit = true;
					f.find('button[id="sign_up"]').prop('disabled', false);
					f.find('input[name="' + result.data.csrf.name + '"]').val(result.data.csrf.hash);
				},
				error: function (error) {
					console.log('ERROR : SIGN UP', error);
					alert(AJAX_ERROR_MESSAGE);
					f.find('button[id="sign_up"]').prop('disabled', false);
				},
			});
			return false;
		}
		else {
			alert('처리 중에 있습니다.\n잠시만 기다려 주시기 바랍니다.\n기다려도 응답이 없으신 경우 관리자에게 문의주시기 바랍니다.');
			return false;
		}
	});
});