mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-11-11 06:31:51 +08:00
d5956dabad
preloader is now showed when creating an account made sure the registration will not continue when no name was given
410 lines
No EOL
11 KiB
JavaScript
410 lines
No EOL
11 KiB
JavaScript
$(".pageLogin .register input").keyup(e => {
|
|
if (e.key == "Enter") {
|
|
$(".pageLogin .preloader").removeClass('hidden');
|
|
|
|
|
|
let name = $(".pageLogin .register input")[0].value;
|
|
let email = $(".pageLogin .register input")[1].value;
|
|
let password = $(".pageLogin .register input")[2].value;
|
|
let passwordVerify = $(".pageLogin .register input")[3].value;
|
|
|
|
if (name == "") {
|
|
showNotification("Name is required", 3000);
|
|
$(".pageLogin .preloader").addClass('hidden');
|
|
return;
|
|
}
|
|
|
|
if (password != passwordVerify) {
|
|
showNotification("Passwords do not match", 3000);
|
|
$(".pageLogin .preloader").addClass('hidden');
|
|
return;
|
|
}
|
|
|
|
firebase.auth().createUserWithEmailAndPassword(email, password).then(user => {
|
|
// Account has been created here.
|
|
let usr = user.user;
|
|
usr.updateProfile({
|
|
displayName: name
|
|
}).then(function() {
|
|
// Update successful.
|
|
showNotification("Account created", 2000);
|
|
firebase.analytics().logEvent("accountCreated", usr.uid);
|
|
$(".pageLogin .preloader").addClass('hidden');
|
|
changePage('account');
|
|
}).catch(function(error) {
|
|
// An error happened.
|
|
usr.delete().then(function() {
|
|
// User deleted.
|
|
showNotification("Name invalid", 2000);
|
|
$(".pageLogin .preloader").addClass('hidden');
|
|
}).catch(function(error) {
|
|
// An error happened.
|
|
$(".pageLogin .preloader").addClass('hidden');
|
|
});
|
|
});
|
|
}).catch(function(error) {
|
|
// Handle Errors here.
|
|
var errorCode = error.code;
|
|
var errorMessage = error.message;
|
|
showNotification(errorMessage, 5000);
|
|
$(".pageLogin .preloader").addClass('hidden');
|
|
});
|
|
|
|
|
|
}
|
|
})
|
|
|
|
$(".pageLogin .login input").keyup(e => {
|
|
if (e.key == "Enter") {
|
|
$(".pageLogin .preloader").removeClass('hidden');
|
|
let email = $(".pageLogin .login input")[0].value;
|
|
let password = $(".pageLogin .login input")[1].value;
|
|
|
|
firebase.auth().signInWithEmailAndPassword(email, password).then(e => {
|
|
changePage('account');
|
|
}).catch(function(error) {
|
|
showNotification(error.message, 5000);
|
|
$(".pageLogin .preloader").addClass('hidden');
|
|
});
|
|
}
|
|
})
|
|
|
|
$(".pageAccount .signOut").click(e => {
|
|
signOut();
|
|
})
|
|
|
|
|
|
function signOut() {
|
|
firebase.auth().signOut().then(function() {
|
|
showNotification("Signed out", 2000);
|
|
updateAccountLoginButton();
|
|
changePage('login');
|
|
}).catch(function(error) {
|
|
showNotification(error.message, 5000);
|
|
});
|
|
}
|
|
|
|
firebase.auth().onAuthStateChanged(function(user) {
|
|
if (user) {
|
|
// User is signed in.
|
|
var displayName = user.displayName;
|
|
var email = user.email;
|
|
var emailVerified = user.emailVerified;
|
|
var photoURL = user.photoURL;
|
|
var isAnonymous = user.isAnonymous;
|
|
var uid = user.uid;
|
|
var providerData = user.providerData;
|
|
showNotification('Signed in', 2000);
|
|
$(".pageLogin .preloader").addClass('hidden');
|
|
updateAccountLoginButton()
|
|
}
|
|
});
|
|
|
|
var resultHistoryChart = new Chart($(".pageAccount #resultHistoryChart"), {
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{
|
|
label: "words 10",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#f44336',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(244,67,54,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "words 25",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#FF5722',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(255,87,34,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "words 50",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#FF9800',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(255,152,0,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "words 100",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#FFC107',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(255,193,7,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "words 200",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#FFEB3B',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(255,235,59,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "time 15",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#3F51B5',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(63,81,181,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "time 30",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#2196F3',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(33,150,243,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "time 60",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#03A9F4',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(3,169,244,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "time 120",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#00BCD4',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(0,188,212,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "custom",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#4CAF50',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(76,175,80,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
}
|
|
],
|
|
},
|
|
options: {
|
|
tooltips: {
|
|
titleFontFamily: "Roboto Mono",
|
|
bodyFontFamily: "Roboto Mono"
|
|
},
|
|
legend: {
|
|
display: true,
|
|
labels: {
|
|
fontFamily: "Roboto Mono",
|
|
fontColor: "#ffffff"
|
|
}
|
|
},
|
|
responsive: true,
|
|
// maintainAspectRatio: false,
|
|
// tooltips: {
|
|
// mode: 'index',
|
|
// intersect: false,
|
|
// },
|
|
hover: {
|
|
mode: 'nearest',
|
|
intersect: true
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
ticks: {
|
|
fontFamily: "Roboto Mono"
|
|
},
|
|
type: 'time',
|
|
time: {
|
|
tooltipFormat:'DD MMM YYYY HH:mm'
|
|
},
|
|
bounds: 'ticks',
|
|
distribution: 'series',
|
|
display: false,
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Date'
|
|
},
|
|
}],
|
|
yAxes: [{
|
|
ticks: {
|
|
fontFamily: "Roboto Mono"
|
|
},
|
|
display: true,
|
|
scaleLabel: {
|
|
display: false,
|
|
labelString: 'Words per Minute'
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
function refreshAccountPage() {
|
|
|
|
function cont(){
|
|
|
|
let testModes = {
|
|
words10: [],
|
|
words25: [],
|
|
words50: [],
|
|
words100: [],
|
|
words200: [],
|
|
time15: [],
|
|
time30: [],
|
|
time60: [],
|
|
time120: [],
|
|
custom: []
|
|
}
|
|
|
|
|
|
let topWpm = 0;
|
|
let topMode = '';
|
|
|
|
let testCount = dbSnapshot.length;
|
|
$(".pageAccount .history table tbody").empty();
|
|
dbSnapshot.forEach(result => {
|
|
let withpunc = '';
|
|
if (result.punctuation) {
|
|
withpunc = ', with punctuation';
|
|
}
|
|
$(".pageAccount .history table tbody").append(`
|
|
<tr>
|
|
<td>${result.wpm}</td>
|
|
<td>${result.acc}%</td>
|
|
<td>${result.correctChars}</td>
|
|
<td>${result.incorrectChars}</td>
|
|
<td>${result.mode} ${result.mode2}${withpunc}</td>
|
|
<td>${moment(result.timestamp).format('DD MMM YYYY HH:mm')}</td>
|
|
</tr>`)
|
|
if (result.mode == "words" && result.mode2 == 10) {
|
|
testModes.words10.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "words" && result.mode2 == 25) {
|
|
testModes.words25.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "words" && result.mode2 == 50) {
|
|
testModes.words50.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "words" && result.mode2 == 100) {
|
|
testModes.words100.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "words" && result.mode2 == 200) {
|
|
testModes.words200.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "time" && result.mode2 == 15) {
|
|
testModes.time15.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "time" && result.mode2 == 30) {
|
|
testModes.time30.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "time" && result.mode2 == 60) {
|
|
testModes.time60.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "time" && result.mode2 == 120) {
|
|
testModes.time120.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "custom") {
|
|
testModes.custom.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
|
|
if (result.wpm > topWpm) {
|
|
let puncsctring = result.punctuation ? ",<br>with punctuation" : "";
|
|
topWpm = result.wpm;
|
|
topMode = result.mode + " " + result.mode2 + puncsctring;
|
|
}
|
|
})
|
|
|
|
let subColor = getComputedStyle(document.body).getPropertyValue('--sub-color').replace(' ','');
|
|
|
|
resultHistoryChart.options.scales.xAxes[0].ticks.minor.fontColor = subColor;
|
|
resultHistoryChart.options.scales.yAxes[0].ticks.minor.fontColor = subColor;
|
|
resultHistoryChart.options.legend.labels.fontColor = subColor;
|
|
|
|
resultHistoryChart.data.datasets[0].data = testModes.words10;
|
|
resultHistoryChart.data.datasets[1].data = testModes.words25;
|
|
resultHistoryChart.data.datasets[2].data = testModes.words50;
|
|
resultHistoryChart.data.datasets[3].data = testModes.words100;
|
|
resultHistoryChart.data.datasets[4].data = testModes.words200;
|
|
resultHistoryChart.data.datasets[5].data = testModes.time15;
|
|
resultHistoryChart.data.datasets[6].data = testModes.time30;
|
|
resultHistoryChart.data.datasets[7].data = testModes.time60;
|
|
resultHistoryChart.data.datasets[8].data = testModes.time120;
|
|
resultHistoryChart.data.datasets[9].data = testModes.custom;
|
|
|
|
$(".pageAccount .highestWpm .val").text(topWpm);
|
|
$(".pageAccount .highestWpm .mode").html(topMode);
|
|
|
|
$(".pageAccount .testsTaken .val").text(testCount);
|
|
|
|
let favMode = testModes.words10;
|
|
let favModeName = 'words10';
|
|
$.each(testModes, (key, mode) => {
|
|
if (mode.length > favMode.length) {
|
|
favMode = mode;
|
|
favModeName = key;
|
|
}
|
|
})
|
|
if (favModeName == 'words10' && testModes.words10.length == 0) {
|
|
//new user
|
|
$(".pageAccount .favouriteTest .val").text(`-`);
|
|
} else {
|
|
$(".pageAccount .favouriteTest .val").text(`${favModeName} (${Math.floor((favMode.length/testCount) * 100)}%)`);
|
|
}
|
|
|
|
|
|
resultHistoryChart.update({ duration: 0 });
|
|
|
|
swapElements($(".pageAccount .preloader"), $(".pageAccount .content"), 250);
|
|
}
|
|
|
|
if (dbSnapshot == null) {
|
|
console.log('no db snap');
|
|
db_getUserResults().then(data => {
|
|
cont();
|
|
})
|
|
} else {
|
|
console.log('using db snap');
|
|
cont();
|
|
}
|
|
} |