jQuery- salted password

salted password system

by I Sang Hyeon

HTML

<div>
    OTP image 내의
    <select id="selEgSaltFrom"><option value="0">?</option></select>
    번째 문자부터 <br />
    <select id="selEgSaltCount"><option value="0">?</option></select>
    개의 문자를 <br />
    본인의 비밀번호 
    <select id="selEgSaltAt"><option value="0">?</option></select>
    번째 문자 뒤에<br />
    삽입하는 규칙을 설정합니다.
</div>
<p>
    <input type="button" id="cmdEgReset" value="reset"/>
    <input type="button" id="cmdEgGet" value="GetPassword"/>
</p>

<p>[본인의 비밀번호] : entersoft</p>
<p>[OTP image]</p>
<div id="divEg1" class="divEgBlock centeredText">a</div>
<div id="divEg2" class="divEgBlock centeredText">B</div>
<div id="divEg3" class="divEgBlock centeredText">c</div>
<div id="divEg4" class="divEgBlock centeredText">D</div>
<div id="divEg5" class="divEgBlock centeredText">E</div>
<div id="divEg6" class="divEgBlock centeredText">f</div>
<div id="divEg7" class="divEgBlock centeredText">g</div>
<div id="divEg8" class="divEgBlock centeredText">h</div>
<div id="divEg9" class="divEgBlock centeredText">i</div>
<div id="divEg10" class="divEgBlock centeredText">j</div>
<br />
<hr />
<p> 입력해야 할 비밀번호 : <span id="spnEgFinalPassword">entersoft</span></p>

CSS

.divEgBlock {
    position: relative;
    background-color: #abc;
    width: 20px;
    height: 20px;
    float: left;
    margin: 2px;
}
.centeredText {
    text-align : center;
}

JavaScript

/** salted password **/
var selectedSaltFrom = 0;
var selectedSaltCount = 0;
var selectedSaltAt = 0;

$(document).ready(function () {
    makeOptionsByNumber('selEgSaltFrom', 1, 10);
    egEvents();
});

function resetAllEgEvent() {
    resetSaltFrom();
    resetSaltCount();
    resetSaltAt();
    resetFinalPassword();
    clearEgEventClass();
    resetingHeightByClassAttr();
    makeOptionsByNumber('selEgSaltFrom', 1, 10);
}

function resetSaltFrom() {
    selectedSaltFrom = 0;
    $('#selEgSaltFrom').html('<option value="0">?</option>');
}

function resetSaltCount() {
    selectedSaltCount = 0;
    $('#selEgSaltCount').html('<option value="0">?</option>');
}

function resetSaltAt() {
    selectedSaltAt = 0;
    makeOptionsByNumber('selEgSaltAt', 1, 9);
}

function resetFinalPassword() {
    $('#spnEgFinalPassword').html('');
    $('#spnEgFinalPassword').html('entersoft');
}

function clearEgEventClass() {
    $('.divEgBlock').removeClass('eg40Height');
}

function resetingHeightByClassAttr() {
    $('.divEgBlock').animate({
        "height": "20px"
    }, "slow");
    $('.eg40Height').animate({
        "height": "40px"
    }, "slow");
}

function makeOptionsByNumber(makeAtID, valueFrom, valueTo) {
    var $targetID = $('#' + makeAtID);
    var optLength = 0;
    var optValue = 0;
    var htmlString = '<option value="0">?</option>';

    if (valueFrom > valueTo) return false;

    optLength = (valueTo - valueFrom) + 1;
    optValue = valueFrom;
    $targetID.html('');

    for (var i = 0; i < optLength; i++) {
        htmlString += '<option value="' + optValue + '">' + optValue + '</option>';
        optValue++;
    }

    $targetID.html(htmlString);
}

function egEvents() {

    $('#selEgSaltFrom').change(function () {
        var selectedOptVal = parseInt($('#selEgSaltFrom option:selected').val());

        resetSaltCount();
        resetSaltAt();
        resetFinalPassword();
        clearEgEventClass();

        $('#divEg' +...