monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-02-04 13:01:10 +08:00
Code Issues Projects Releases Packages Wiki Activity

added form buttons

Browse source 
moved sign out button
This commit is contained in:
Jack 2020-05-15 04:09:00 +01:00
parent 1faa3535e4
commit f887861966
5 changed files with 173 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
public/css/style.scss
View file

@ -705,6 +705,23 @@ key {
display: grid;
gap: .5rem;
width: 100%;
.button{
border-radius: var(--roundness);
background: var(--sub-color);
color: var(--bg-color);
padding: .5rem;
font-size: 1rem;
line-height: 1rem;
text-align: center;
cursor: pointer;
transition: .25s;
&:hover{
background: var(--main-color);
}
.fas{
margin-right: .5rem;
}
}
}
.preloader{
position: fixed;
@ -800,6 +817,26 @@ key {
}
}
.signOut{
font-size: 1rem;
line-height: 1rem;
justify-self: end;
// background: var(--sub-color);
color: var(--sub-color);
width: fit-content;
padding: .5rem;
border-radius: var(--roundness);
cursor: pointer;
transition: .25s;
float: right;
&:hover{
color: var(--main-color);
}
.fas{
margin-right: .5rem;
}
}
.pageAccount{
display: grid;
gap: 1rem;
@ -811,23 +848,6 @@ key {
font-size: 2rem;
justify-self: center;
}
.signOut{
justify-self: end;
// background: var(--sub-color);
color: var(--sub-color);
width: fit-content;
padding: .5rem;
border-radius: var(--roundness);
cursor: pointer;
transition: .25s;
float: right;
&:hover{
color: var(--main-color);
}
.fas{
margin-right: .5rem;
}
}
.triplegroup{
display: grid;
grid-auto-flow: column;

6
public/index.html
View file

@ -85,7 +85,7 @@
</div>
<div class="config">
<div class="config" style="grid-column: 3/4;grid-row: 1/2;">
<div class="group punctuationMode">
<!-- <div class="title">time</div> -->
<div class="buttons">
@ -127,6 +127,7 @@
</div>
</div>
<div class="signOut hidden" style="grid-column: 3/4;grid-row: 1/2;" tabindex="0"><i class="fas fa-sign-out-alt"></i>sign out</div>
</div>
<div id="middle">
@ -242,6 +243,7 @@
<input type="text" placeholder="email">
<input type="password" placeholder="password">
<input type="password" placeholder="verify password">
<div class="button"><i class="fas fa-user-plus"></i>Sign Up</div>
</form>
</div>
<div class="login side">
@ -249,6 +251,7 @@
<form action="">
<input type="text" placeholder="email">
<input type="password" placeholder="password">
<div class="button"><i class="fas fa-sign-in-alt"></i>Sign In</div>
</form>
</div>
@ -256,7 +259,6 @@
<div class="page pageAccount hidden">
<div class="preloader"><i class="fas fa-fw fa-spin fa-circle-notch"></i></div>
<div class="content hidden">
<div class="signOut"><i class="fas fa-sign-out-alt"></i>sign out</div>
<div class="group">
<div class="title"></div>
<div class="chart">

145
public/js/account.js
View file

@ -1,78 +1,99 @@
$(".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');
});
signUp();
}
})
$(".pageLogin .register .button").click(e => {
signUp();
})
$(".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');
});
signIn();
}
})
$(".pageAccount .signOut").click(e => {
$(".pageLogin .login .button").click(e => {
signIn();
})
$(".signOut").click(e => {
signOut();
})
function showSignOutButton() {
$(".signOut").removeClass('hidden').css("opacity",1);
}
function hideSignOutButton() {
$(".signOut").css("opacity",0).addClass('hidden');
}
function signIn() {
$(".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');
});
}
function signUp() {
$(".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');
});
}
function signOut() {
firebase.auth().signOut().then(function() {

74
public/js/script.js
View file

@ -20,16 +20,16 @@ function showNotification(text, time) {
let noti = $(".notification");
noti.text(text);
noti.css('top', `-${noti.outerHeight()}px`);
noti.stop(true,true).animate({
noti.stop(true, true).animate({
top: "1rem"
}, 250, 'swing', () => {
noti.stop(true,true).animate({
opacity: 1
}, time, () => {
noti.stop(true,true).animate({
top: `-${noti.outerHeight()}px`
}, 250, 'swing');
})
noti.stop(true, true).animate({
opacity: 1
}, time, () => {
noti.stop(true, true).animate({
top: `-${noti.outerHeight()}px`
}, 250, 'swing');
})
});
}
@ -389,7 +389,7 @@ function hideCrown() {
function showCrown() {
$("#result .stats .wpm .crownWrapper").animate({
width: '1.7rem'
},250);
}, 250);
}
function showResult() {
@ -436,7 +436,7 @@ function showResult() {
$("#result .loginTip").removeClass('hidden');
// showNotification("Sign in to save your result",3000);
}
}
} else {
showNotification("Test invalid", 3000);
firebase.analytics().logEvent('testCompletedInvalid', completedEvent);
@ -468,8 +468,8 @@ function showResult() {
}
let mainColor = getComputedStyle(document.body).getPropertyValue('--main-color').replace(' ', '');
let subColor = getComputedStyle(document.body).getPropertyValue('--sub-color').replace(' ','');
let subColor = getComputedStyle(document.body).getPropertyValue('--sub-color').replace(' ', '');
wpmOverTimeChart.options.scales.xAxes[0].ticks.minor.fontColor = subColor;
wpmOverTimeChart.options.scales.yAxes[0].ticks.minor.fontColor = subColor;
@ -497,13 +497,13 @@ function restartTest() {
testActive = false;
hideLiveWpm();
$("#words").stop(true,true).animate({ opacity: 0 }, 125);
$("#result").stop(true,true).animate({
$("#words").stop(true, true).animate({ opacity: 0 }, 125);
$("#result").stop(true, true).animate({
opacity: 0
}, 125, () => {
initWords();
$("#result").addClass('hidden');
$("#words").css('opacity', 0).removeClass('hidden').stop(true,true).animate({
$("#words").css('opacity', 0).removeClass('hidden').stop(true, true).animate({
opacity: 1
}, 125, () => {
clearIntervals();
@ -515,7 +515,7 @@ function restartTest() {
$("#timer")
.css("transition", "none")
.css("width", "0vw")
.stop(true,true)
.stop(true, true)
.animate({ top: 0 }, 0, () => {
$("#timer").css("transition", "1s linear");
});
@ -553,7 +553,7 @@ function restartTest() {
}
function focusWords() {
if(!$("#words").hasClass('hidden')) $("#wordsInput").focus();
if (!$("#words").hasClass('hidden')) $("#wordsInput").focus();
}
function changeCustomText() {
@ -589,18 +589,21 @@ function changePage(page) {
$(".page.pageTest").addClass('active');
swapElements(activePage, $(".page.pageTest"), 250, focusWords);
history.pushState('/', null, '/');
$('.config').css('opacity', 1);
showTestConfig();
hideSignOutButton();
} else if (page == "about") {
$(".page.pageAbout").addClass('active');
swapElements(activePage, $(".page.pageAbout"), 250);
history.pushState('about', null, 'about');
$('.config').css('opacity', 0);
hideTestConfig();
hideSignOutButton();
} else if (page == "settings") {
updateSettingsPage()
$(".page.pageSettings").addClass('active');
swapElements(activePage, $(".page.pageSettings"), 250);
history.pushState('settings', null, 'settings');
$('.config').css('opacity', 0);
hideTestConfig();
hideSignOutButton();
} else if (page == "account") {
if (!firebase.auth().currentUser) {
changePage("login");
@ -609,16 +612,19 @@ function changePage(page) {
swapElements(activePage, $(".page.pageAccount"), 250);
refreshAccountPage();
history.pushState('account', null, 'account');
$('.config').css('opacity', 0);
hideTestConfig();
showSignOutButton();
}
} else if (page == "login") {
if (firebase.auth().currentUser != null) {
changePage('account');
} else {
$(".page.pageLogin").addClass('active');
$(".page.pageLogin").addClass('active');
swapElements(activePage, $(".page.pageLogin"), 250);
history.pushState('login', null, 'login');
$('.config').css('opacity', 0);
hideTestConfig();
hideSignOutButton();
}
}
// firebase.analytics().logEvent('changedPage', {
@ -681,7 +687,7 @@ function hideLiveWpm() {
$("#liveWpm").css('opacity', 0);
}
function swapElements(el1, el2, totalDuration, callback = function(){ return; }) {
function swapElements(el1, el2, totalDuration, callback = function() { return; }) {
if (
(el1.hasClass('hidden') && !el2.hasClass('hidden')) ||
(!el1.hasClass('hidden') && el2.hasClass('hidden'))
@ -698,16 +704,16 @@ function swapElements(el1, el2, totalDuration, callback = function(){ return; })
$(el2).stop(true, true).removeClass('hidden').css('opacity', 0).animate({
opacity: 1
}, totalDuration / 2, () => {
callback();
callback();
});
});
} else if (el1.hasClass('hidden') && el2.hasClass('hidden')){
} else if (el1.hasClass('hidden') && el2.hasClass('hidden')) {
//both are hidden, only fade in the second
$(el2).stop(true, true).removeClass('hidden').css('opacity', 0).animate({
opacity: 1
}, totalDuration, () => {
callback();
callback();
});
}
@ -725,7 +731,7 @@ function updateAccountLoginButton() {
// $("#menu .button.account").removeClass('hidden');
// $("#menu .button.login").addClass('hidden');
} else {
swapElements($("#menu .button.login"), $("#menu .button.account"), 250);
swapElements($("#menu .button.login"), $("#menu .button.account"), 250);
// $("#menu .button.login").removeClass('hidden');
// $("#menu .button.account").addClass('hidden');
}
@ -788,13 +794,13 @@ $(window).on('popstate', (e) => {
});
$(document).on("keypress", "#restartTestButton", (event) => {
$(document).on("keypress", "#restartTestButton", (event) => {
if (event.keyCode == 32 || event.keyCode == 13) {
restartTest();
}
});
$(document.body).on("click", "#restartTestButton", (event) => {
$(document.body).on("click", "#restartTestButton", (event) => {
restartTest();
});
@ -826,7 +832,7 @@ $(document).keypress(function(event) {
//start the test
if (currentInput == "" && inputHistory.length == 0) {
if (firebase.auth().currentUser != null) {
firebase.analytics().logEvent('testStarted');
firebase.analytics().logEvent('testStarted');
} else {
firebase.analytics().logEvent('testStartedNoLogin');
}
@ -873,7 +879,7 @@ $(document).keydown((event) => {
//tab
if (event["keyCode"] == 9) {
if (config.quickTab && $(".pageTest").hasClass("active")) {
event.preventDefault();
@ -1005,7 +1011,7 @@ let wpmOverTimeChart = new Chart(ctx, {
intersect: true
},
scales: {
xAxes: [{
ticks: {
fontFamily: "Roboto Mono"

9
public/js/userconfig.js
View file

@ -33,6 +33,15 @@ function loadConfigFromCookie() {
}
}
function showTestConfig() {
$("#top .config").removeClass('hidden').css("opacity",1);
}
function hideTestConfig() {
$("#top .config").css("opacity",0).addClass('hidden');
}
//key tips
function setKeyTips(keyTips) {
config.showKeyTips = keyTips;