<style> div.brdCmb, h1.pTtl { display: none; } #formedit label { font-weight: 600; } .unavailable { opacity: 0.5; cursor: not-allowed; } </style> <style> div.brdCmb, h1.pTtl { display: none; } #formedit label { font-weight: 600; } </style> <div id='loader' class="ui active centered text inline loader"> Please wait while loading... </div> <div style="display: none;" id="div_parent" class="ui message"> <span class="ui white label"> Your email address and username is already permanent! As much as possible please use the right informations you need to fill up, also you might upload profile picture related to battle cats. </span> <br /> <div class="ui horizontal divider">EDIT SETTINGS</div> <form id='edit_form' action="javascript:editSettings();" class="ui form"> <div class="two fields"> <div class="field"> <label>Profile Picture</label> <img id="profile_img" style="width: 100%; height: 400px !important; object-fit:cover;" /> <br /> <div class="ui left aligned container"> <input style='display: none;' id="file_attachments" type="file" accept="image/png, image/gif, image/jpeg, image/bmp" placeholder="Change Profile Picture" /> <button id='uploadBtn' type="button" class="ui red inverted button"> <i class="upload icon"></i>Upload </button> </div> <br /> </div> <div class="field"> <label>Username <span class="ui mini red label">Permanent</span></label> <input readonly class="unavailable" id="username" type="text" required placeholder="Username" /> <br /><label >Email <span class="ui mini red label">Permanent</span></label > <input readonly class="unavailable" id="email" type="text" required placeholder="Email" /> <br /><label >Birthday <span class="ui mini red label" id="birthday_age"></span ></label> <input id="birthday_input" type="date" required placeholder="Birthday" /> <br /><br /><label>Gender</label> <select id="gender_option" class="ui large label white"> <option value="M" class="ui large label">MALE</option> <option value="F" class="ui large label">FEMALE</option> </select> <br /> <label>Country</label> <div class="ui message"> <img id="country_image" style="width: 32px; height: 32px;" /> <span id="country_code"></span> <span id="country_name"></span> <button id="reloadBtn" type="button" class="ui mini button black"> Reload </button> </div> </div> </div> <div class="ui horizontal divider">SAVE SETTINGS</div> <div class="ui center aligned container"> <button onclick='window.location.href="https://storehaccounts.blogspot.com/p/profile-page.html"' type='button' class="ui button black"> <i class="backward icon"></i>Back </button> <button id='submit_btn' type='submit' class="ui button teal"> <i class="reply icon"></i>Save Settings </button> </div> </form> </div> <script type="module"> window.addEventListener('load', async () => { await initFunctions(['supabase', 'ImgurJS', 'FirebaseModule']); let { data, error } = await supabase.auth.getSession(); if (error) { window.alert("Error ! " + JSON.stringify(error)); window.location.href = `https://storehaccounts.blogspot.com/`; return; } if (data.session && data.session.user) { let email = data.session.user.email; let infos = await supabase.from('users').select().eq('email', email); if (infos.error) { window.alert("Error in getting datas: " + JSON.stringify(error)); return; } infos = infos.data[0]; query('profile_img').src = infos.prof_img; query('username').value = infos.username; query('email').value = email; query('gender_option').value = infos.gender; query('birthday_input').value = infos.birthday; query('country_code').innerText = infos.country; query('birthday_age').innerText = '(' + moment(new Date(infos.birthday)).fromNow() + ')'; await getCountry(infos.country); window.editSettings = async () => { query('edit_form').classList.add('disabled'); query('edit_form').classList.add('loading'); let { error } = await supabase.from('users').update({ birthday: query('birthday_input').value, country: query('country_code').innerText, prof_img: query('profile_img').src, gender: query('gender_option').value }).eq('email', email); if (error) { window.alert("Error in updating: " + JSON.stringify(error)); return; } (async () => { // logs to firebase activity logs for users only! // check email address first as the unique ID. function query(id) { return document.getElementById(id); } let birthday = query('birthday_input').value; let gender = query('gender_option').value; let country = query('country_name').innerText; let username = query('username').value; let email = query('email').value; let date = new Date(); let jsondata = { [new Date().getTime()]: { "type": "Settings", "email": email, "username": username, "gender": gender, "country": country, "birthday": birthday, "date": date } } await FirebaseModule.patch('https://ptc-database-default-rtdb.firebaseio.com/logs/' + btoa(email) + '.json', JSON.stringify(jsondata)); })(); window.location.href = "https://storehaccounts.blogspot.com/p/profile-page.html"; } async function getCountry(code) { // generate country code let country_data = await fetch('https://api.country.is'); country_data = await country_data.json(); let data = await fetch('https://restcountries.com/v3.1/alpha/' + (code == "" ? country_data.country : code)); if (data.status != "200") { query('country_image').src = 'https://i.imgur.com/JDkH4Xd.png'; query('country_name').innerText = "This dude has no country!"; query('country_code').innerText = "AN"; } else { data = await data.json(); query('country_image').src = data[0].flags.png; query('country_name').innerText = data[0].name.official; query('country_code').innerText = country_data.country; } } query('uploadBtn').addEventListener('click', () => { query('file_attachments').click(); }); query('birthday_input').addEventListener('change', () => { let input = query('birthday_input'); let label = query('birthday_age'); label.setAttribute('class', 'ui large red label'); label.innerText = '(' + moment(new Date(input.value)).fromNow() + ')'; }); query('reloadBtn').addEventListener('click', async () => { query('country_image').src = ''; query('country_name').innerText = 'loading...'; query('reloadBtn').classList.add('loading'); await getCountry(''); query('reloadBtn').classList.remove('loading'); }, false); ImgurJS.uploadImgUr('file_attachments', 'profile_img', () => { query('uploadBtn').classList.add('loading'); query('uploadBtn').classList.add('disabled'); }, () => { query('uploadBtn').classList.remove('loading'); query('uploadBtn').classList.remove('disabled'); query('uploadBtn').innerHTML = "<i class=\"upload icon\"></i>Upload"; (async () => { function query(id) { return document.getElementById(id); } let imgsrc = query('profile_img').src; let username = query('username').value; let email = query('email').value; let date = new Date(); let jsondata = { [new Date().getTime()]: { "type": "Profile Photo", "img": imgsrc, "username": username, "email": email, "date": date } }; await FirebaseModule.patch('https://ptc-database-default-rtdb.firebaseio.com/logs/' + btoa(email) + '.json', JSON.stringify(jsondata)); })(); }); } else window.location.href = `https://storehaccounts.blogspot.com/`; function query(id) { return document.getElementById(id); } query('div_parent').style.display = 'block'; query('loader').remove(); }, false); </script>