VulpesOS/assets/webapps/system.gaiamobile.org/mobile_id/js/ui.js

;(function(exports){'use strict';var initialized;var allowButton,header,verificationCodeButton,multistateButton,panelsContainer,verificationCodeInput,msisdnInput,msisdnAutomaticOptions,typeMSISDNButton,selectAutomaticOptionsButton,msisdnContainer,legend,legendParent,countryCodesSelect,verificationPanel,msisdnSelectionPanel,verificationCodeTimer,stepsExplanation,verificationExplanation,successExplanation;var isVerified=false;var isVerifying=false;var isVerificationCode=false;var isTimeoutOver=false;var isManualMSISDN=false;var buttonCurrentStatus;var appName,identity;var verificationInterval,verificationIntervalSteps=0,currentIntervalStep=0;var countryCodes;function _setMultibuttonStep(stepName){buttonCurrentStatus=stepName;var shift=0;switch(stepName){case'allow':shift=0;allowButton.className='msb-button-step state-allow';allowButton.disabled=false;break;case'sending':shift=0;allowButton.className='msb-button-step state-sending';allowButton.disabled=true;break;case'verify':shift=-50;verificationCodeButton.className='msb-button-step state-verify';verificationCodeButton.disabled=false;break;case'verifying':shift=-50;verificationCodeButton.className='msb-button-step state-verifying';verificationCodeButton.disabled=true;break;case'verified':shift=-50;verificationCodeButton.className='msb-button-step state-verified';verificationCodeButton.disabled=false;break;case'resend':shift=-50;verificationCodeButton.className='msb-button-step state-resend';verificationCodeButton.disabled=false;break;}
multistateButton.style.transform='translateX('+shift+'%)';}
function _setPanelsStep(stepName){var shift=0;switch(stepName){case'msisdn':shift=0;break;case'verification':shift=-25;break;case'done':shift=-50;break;}
panelsContainer.style.transform='translateX('+shift+'%)';}
function _disablePanel(stepName){switch(stepName){case'msisdn':msisdnAutomaticOptions.classList.add('disabled');typeMSISDNButton.classList.add('disabled');selectAutomaticOptionsButton.classList.add('disabled');countryCodesSelect.classList.add('disabled');msisdnInput.disabled=true;break;case'verification':verificationCodeInput.disabled=true;break;}}
function _enablePanel(stepName){switch(stepName){case'msisdn':msisdnAutomaticOptions.classList.remove('disabled');typeMSISDNButton.classList.remove('disabled');selectAutomaticOptionsButton.classList.remove('disabled');countryCodesSelect.classList.remove('disabled');msisdnInput.disabled=false;break;case'verification':verificationCodeInput.disabled=false;break;}}
function _msisdnContainerTranslate(step){isManualMSISDN=step===0?false:true;msisdnContainer.style.transform='translateX('+-1*50*step+'%)';}
function _fieldErrorDance(element){element.addEventListener('animationend',function danceOver(){element.removeEventListener('animationend',danceOver);element.classList.remove('error');});element.classList.add('error');}
function _fillCountryCodesList(callback){var xhr=new XMLHttpRequest();xhr.onreadystatechange=function fileLoaded(){if(xhr.readyState===4){if(xhr.status===0||xhr.status===200){countryCodes=xhr.response;var sortedObject=_sortCountriesByFullName();countryCodesSelect.innerHTML='';var ccFragment=document.createDocumentFragment();var added={};sortedObject.forEach(function(country){var mcc=country[0];if(added[countryCodes[mcc].code]){return;}
var option=document.createElement('option');option.textContent=countryCodes[mcc].full+' ('+
countryCodes[mcc].prefix+')';option.value=mcc;added[countryCodes[mcc].code]=true;ccFragment.appendChild(option);});countryCodesSelect.appendChild(ccFragment);var conn=window.navigator.mozMobileConnections?window.navigator.mozMobileConnections[0]:null;if(conn&&conn.voice&&conn.voice.network){countryCodesSelect.value=conn.voice.network.mcc;legend.innerHTML=countryCodes[countryCodesSelect.value].prefix;}
callback();}else{console.error('Failed to fetch file: ',xhr.statusText);callback();}}};xhr.open('GET',' /shared/resources/mcc.json',true);xhr.responseType='json';xhr.send();}
function _sortCountriesByFullName(){var sorted=[];for(var mcc in countryCodes){sorted.push([mcc,countryCodes[mcc].full]);}
sorted=sorted.sort(function compareFunction(a,b){return a[1]>b[1];});return sorted;}
function _getIdentitySelected(){var identity;if(isManualMSISDN){identity={prefix:countryCodes[countryCodesSelect.value].prefix,mcc:countryCodesSelect.value,phoneNumber:msisdnInput.value.length&&msisdnInput.value||null};}else{var query='input[name="msisdn-option"]:checked';var optionChecked=document.querySelector(query);if(optionChecked.dataset.identificationType==='msisdn'){identity={prefix:null,mcc:null,phoneNumber:optionChecked.value};}else{identity={serviceId:optionChecked.dataset.serviceId};}}
return identity;}
function _getCode(){return verificationCodeInput.value;}
function _showVerificationPanel(phoneNumber){isVerificationCode=false;isVerifying=false;isVerified=true;clearInterval(verificationInterval);_setMultibuttonStep('verified');verificationCodeTimer.classList.remove('show');navigator.mozL10n.setAttributes(successExplanation,'successMessage',{phone_number:phoneNumber||'',app_name:appName});panelsContainer.addEventListener('transitionend',function readyToGif(){panelsContainer.removeEventListener('transitionend',readyToGif);document.querySelector('.done-panel').classList.add('done-panel-gif');});_setPanelsStep('done');}
function _addEventListeners(){header.addEventListener('action',function onClose(){Controller.postCloseAction(isVerified);});typeMSISDNButton.addEventListener('click',function onManualMSISDN(){_msisdnContainerTranslate(1);});selectAutomaticOptionsButton.addEventListener('click',function onAutomaticMSISDN(){_msisdnContainerTranslate(0);});allowButton.addEventListener('click',function onAllow(){identity=_getIdentitySelected();if(identity.mcc&&(!identity.phoneNumber||isNaN(identity.phoneNumber))){_fieldErrorDance(msisdnInput);return;}
_disablePanel('msisdn');_setMultibuttonStep('sending');Controller.postIdentity(identity);});verificationCodeButton.addEventListener('click',function onVerify(){if(!isVerified){if(verificationCodeButton.classList.contains('state-resend')){Controller.requestCode();verificationCodeInput.value='';_enablePanel('verification');_setMultibuttonStep('sending');isVerifying=false;isTimeoutOver=false;}else{var code=_getCode();if(!code.length||isNaN(code)||code.length<6){_fieldErrorDance(verificationCodeInput);return;}
Controller.postVerificationCode(_getCode());_disablePanel('verification');_setMultibuttonStep('verifying');isVerifying=true;}
return;}
Controller.postCloseAction(isVerified);});countryCodesSelect.addEventListener('blur',function onSelectBlur(){countryCodesSelect.hidden=true;legend.innerHTML=countryCodes[countryCodesSelect.value].prefix;return;});legendParent.addEventListener('click',function onLegendClick(){countryCodesSelect.click();countryCodesSelect.focus();countryCodesSelect.hidden=false;return;});}
var UI={init:function ui_init(params){var callback=params&&params.callback?params.callback:function(){};header=document.getElementById('header');allowButton=document.getElementById('allow-button');verificationCodeButton=document.getElementById('verify-button');multistateButton=document.getElementById('msb');panelsContainer=document.getElementById('panels-container');verificationCodeInput=document.getElementById('verification-code');msisdnInput=document.getElementById('msisdn-input');msisdnAutomaticOptions=document.querySelector('.phone-options-list');typeMSISDNButton=document.getElementById('add-msisdn');selectAutomaticOptionsButton=document.getElementById('do-automatic-msisdn');msisdnContainer=document.querySelector('.msisdn-selection-wrapper');legend=document.getElementById('legend');legendParent=document.getElementById('legend-parent');countryCodesSelect=document.getElementById('country-codes-select');verificationPanel=document.querySelector('.verification-panel');msisdnSelectionPanel=document.querySelector('.msisdn-selection-panel');verificationCodeTimer=document.getElementById('verification-code-timer');stepsExplanation=document.getElementById('mobile-id-explanation');verificationExplanation=document.getElementById('verification-code-explanation');successExplanation=document.getElementById('success-explanation');_fillCountryCodesList(function(){if(initialized){callback();return;}
initialized=true;_addEventListeners();callback();});window.addEventListener('shown',function(){var title=header.querySelector('h1');title.textContent=title.textContent;});},localize:function ui_localize(name){appName=name;navigator.mozL10n.setAttributes(stepsExplanation,'mobileIDExplanation',{app_name:appName});},render:function ui_render(identifications){var optionsFragment=document.createDocumentFragment();if(!identifications||!identifications.length){_msisdnContainerTranslate(1);selectAutomaticOptionsButton.hidden=true;return;}
var isPrimaryOption=false;for(var i=0,l=identifications.length;i<l;i++){var li=document.createElement('li');var label=document.createElement('label');var typeIcon=document.createElement('span');var radio=document.createElement('input');var radioMask=document.createElement('span');var name=document.createElement('p');var iconClasses='icon icon-simcardlock';if(identifications[i].primary){isPrimaryOption=true;radio.checked=true;iconClasses+=' primary';}else{iconClasses+=' sim'+(+identifications[i].serviceId+1);}
typeIcon.className=iconClasses;name.removeAttribute('data-l10n-id');name.textContent=identifications[i].msisdn||identifications[i].operator;if(!name.textContent){navigator.mozL10n.setAttributes(name,'simLabel',{id:+identifications[i].serviceId+1});}
radio.name='msisdn-option';radio.type='radio';if(identifications[i].serviceId!==undefined){radio.dataset.identificationType='serviceid';radio.dataset.serviceId=identifications[i].serviceId;}else{radio.dataset.identificationType='msisdn';}
radio.value=identifications[i].msisdn||identifications[i].serviceId;radioMask.className='radio-mask';label.appendChild(typeIcon);label.appendChild(radio);label.appendChild(radioMask);label.appendChild(name);li.appendChild(label);optionsFragment.appendChild(li);}
var phoneOptionsList=document.querySelector('.phone-options-list');if(!isPrimaryOption&&identifications.length>0){optionsFragment.children[0].querySelector('input').checked=true;}
phoneOptionsList.innerHTML='';phoneOptionsList.appendChild(optionsFragment);},onVerifying:function ui_onverifiying(){_setMultibuttonStep('verifying');_disablePanel('verification');},onVerified:function ui_onverified(phoneNumber){if(isVerificationCode&&!isVerifying){_disablePanel('verification');verificationCodeInput.type='password';verificationCodeInput.value='FAKECODE';setTimeout(_showVerificationPanel.bind(this,phoneNumber),1000);}else{_showVerificationPanel(phoneNumber);}},onVerificationCode:function ui_onVerificationCode(params){isVerificationCode=true;_setMultibuttonStep('verify');_setPanelsStep('verification');_enablePanel('verification');navigator.mozL10n.setAttributes(verificationExplanation,'verificationCodeExplanation',{phone_number:identity.phoneNumber});isTimeoutOver=false;currentIntervalStep=+params.verificationTimeoutLeft;verificationIntervalSteps=+params.verificationTimeout;verificationCodeTimer.max=verificationIntervalSteps;verificationCodeTimer.value=currentIntervalStep;verificationCodeTimer.classList.add('show');verificationInterval=setInterval(function(){--currentIntervalStep;if(currentIntervalStep<0){if(!isVerifying){_setMultibuttonStep('resend');_disablePanel('verification');}
document.activeElement.blur();isTimeoutOver=true;verificationCodeTimer.classList.remove('show');clearInterval(verificationInterval);return;}
verificationCodeTimer.value=currentIntervalStep;},1000);},onerror:function ui_onError(error){switch(error){case'VERIFICATION_CODE_TIMEOUT':case'NO_RETRIES_LEFT':MobileIDErrorOverlay.show('errorTitle','timeoutErrorMessage');_disablePanel('verification');_setMultibuttonStep('resend');break;case'INVALID_PHONE_NUMBER':_enablePanel('msisdn');_setMultibuttonStep('allow');_fieldErrorDance(msisdnInput);break;case'INVALID_VERIFICATION_CODE':if(isTimeoutOver){_disablePanel('verification');_setMultibuttonStep('resend');isTimeoutOver=false;isVerifying=false;return;}
_enablePanel('verification');_setMultibuttonStep('verify');_fieldErrorDance(verificationCodeInput);break;default:MobileIDErrorOverlay.show('errorTitle','serverErrorMessage',function onClick(){Controller.postCloseAction(isVerified);});break;}},setScroll:function ui_setScroll(){var bodyRect=document.body.getBoundingClientRect(),codeRect=verificationCodeInput.getBoundingClientRect(),msisdnInputRect=msisdnInput.getBoundingClientRect(),offsetCode=codeRect.top-bodyRect.top,offsetMSISDN=msisdnInputRect.top-bodyRect.top;window.addEventListener('resize',function onResized(){verificationPanel.scrollTop=offsetCode;msisdnSelectionPanel.scrollTop=offsetMSISDN;});}};exports.UI=UI;}(this));