lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Login & Sign in

Browse source 
Create html element to log in and sign in
This commit is contained in:
Gregoire Parant 2020-12-21 16:48:40 +01:00
parent 7bbfa16ca2
commit d5dc807b09
10 changed files with 813 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
front/dist/resources/html/gameForgotPassword.html vendored Normal file
View file

@ -0,0 +1,105 @@
<style>
*{
font-family: 'Open Sans', sans-serif;
cursor: url('/resources/logos/cursor_normal.png'), auto;
}
* a, button, input{
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
}
#gameForgotPassword {
background: #eceeee;
border: 1px solid #42464b;
border-radius: 6px;
margin: 20px auto 0;
width: 298px;
height: 160px;
}
#gameForgotPassword h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
border-bottom: 1px solid #a6abaf;
border-radius: 6px 6px 0 0;
box-sizing: border-box;
color: #727678;
display: block;
height: 43px;
padding-top: 10px;
margin: 0;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
}
#gameForgotPassword input {
font-size: 70%;
background: linear-gradient(top, #d6d7d7, #dee0e0);
border: 1px solid #a1a3a3;
border-radius: 4px;
box-shadow: 0 1px #fff;
box-sizing: border-box;
color: #696969;
height: 30px;
transition: box-shadow 0.3s;
width: 100%;
}
#gameForgotPassword section {
margin: 10px;
}
#gameForgotPassword section.action{
text-align: center;
margin: 0;
}
#gameForgotPassword button {
margin-top: 10px;
background-color: black;
color: white;
border-radius: 7px;
padding-bottom: 4px;
width: 60px;
}
#gameForgotPassword button#gameLoginFormForgotPasswordCancel {
background-color: #c7c7c700;
color: #292929;
}
#gameForgotPassword section a{
text-align: center;
font-size: 12px;
margin: 0 6px;
color: black;
}
#gameForgotPassword section h6,
#gameForgotPassword section h5{
margin: 1px;
}
#gameForgotPassword section.text-center{
text-align: center;
}
#gameForgotPassword section p{
font-size: 8px;
margin: 0px 70px;
}
#gameForgotPassword section p.err{
color: red;
display: none;
}
#gameForgotPassword section p.info{
display: none;
}
#gameForgotPassword button#gameLoginFormForgotPasswordSubmit{
width: 90px;
}
</style>
<form id="gameForgotPassword" hidden>
<section class="text-center">
<h5>Reset Password</h5>
<p class="info" id="gameForgotPasswordInfo"></p>
<p class="err" id="gameForgotPasswordError"></p>
</section>
<section>
<h6>E-Mail Address*</h6>
<input type="email" name="email" id="gameLoginForgotPasswordEmail">
</section>
<section class="action">
<button type="submit" id="gameLoginFormForgotPasswordSubmit">Send email</button>
<button type="submit" id="gameLoginFormForgotPasswordCancel">Login</button>
</section>
</form>

111
front/dist/resources/html/gameLogin.html vendored Normal file
View file

@ -0,0 +1,111 @@
<style>
*{
font-family: 'Open Sans', sans-serif;
cursor: url('/resources/logos/cursor_normal.png'), auto;
}
* a, button, input{
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
}
#gameLogin {
background: #eceeee;
border: 1px solid #42464b;
border-radius: 6px;
height: 257px;
margin: 20px auto 0;
width: 298px;
}
#gameLogin .cautiousText {
font-size: 50%;
}
#gameLogin h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
border-bottom: 1px solid #a6abaf;
border-radius: 6px 6px 0 0;
box-sizing: border-box;
color: #727678;
display: block;
height: 43px;
padding-top: 10px;
margin: 0;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
}
#gameLogin input {
font-size: 70%;
background: linear-gradient(top, #d6d7d7, #dee0e0);
border: 1px solid #a1a3a3;
border-radius: 4px;
box-shadow: 0 1px #fff;
box-sizing: border-box;
color: #696969;
height: 30px;
transition: box-shadow 0.3s;
width: 100%;
}
#gameLogin section {
margin: 10px;
}
#gameLogin section.action{
text-align: center;
margin: 0;
}
#gameLogin button {
margin-top: 10px;
background-color: black;
color: white;
border-radius: 7px;
padding-bottom: 4px;
width: 60px;
}
#gameLogin button#gameLoginFormCancel {
background-color: #c7c7c700;
color: #292929;
}
#gameLogin section a{
text-align: center;
font-size: 12px;
margin: 0 6px;
color: black;
}
#gameLogin section h6,
#gameLogin section h5{
margin: 1px;
}
#gameLogin section.text-center{
text-align: center;
}
#gameLogin section p{
font-size: 8px;
margin: 0px 70px;
}
#gameLogin section p.err{
color: red;
display: none;
}
</style>
<form id="gameLogin" hidden>
<section class="text-center">
<h5>Login WorkAdventure</h5>
<p>Log in WorkAdventure and find your friends / colleagues</p>
<p class="err" id="gameLoginError"></p>
</section>
<section>
<h6>Email*</h6>
<input type="email" name="email" id="gameLoginEmail">
</section>
<section>
<h6>Password*</h6>
<input type="password" name="password" id="gameLoginPassword">
</section>
<section class="text-center" style="margin: 0;">
<a href="#" target="register" id="gameLoginFormForgotPassword">Forgot Password</a>
</section>
<section class="action">
<button type="submit" id="gameLoginFormSubmit">Login</button>
</section>
<section class="text-center" style="margin: 0;">
<a href="#" target="register" id="gameLoginFormRegister">Sign in</a>
<a href="#" target="anonymous" id="gameLoginFormCancel">Anonymous</a>
</section>
</form>

3
front/dist/resources/html/gameMenu.html vendored
View file

@ -38,5 +38,8 @@
<section id="adminConsoleSection" hidden>
<button id="adminConsoleButton">Admin console</button>
</section>
<section>
<button id="gameLoginMenu">Login</button>
</section>
</main>
</div>

117
front/dist/resources/html/gameRegister.html vendored Normal file
View file

@ -0,0 +1,117 @@
<style>
*{
font-family: 'Open Sans', sans-serif;
cursor: url('/resources/logos/cursor_normal.png'), auto;
}
* a, button, input{
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
}
#gameRegister {
background: #eceeee;
border: 1px solid #42464b;
border-radius: 6px;
margin: 20px auto 0;
width: 298px;
height: 340px;
}
#gameRegister .cautiousText {
font-size: 50%;
}
#gameRegister h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
border-bottom: 1px solid #a6abaf;
border-radius: 6px 6px 0 0;
box-sizing: border-box;
color: #727678;
display: block;
height: 43px;
padding-top: 10px;
margin: 0;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
}
#gameRegister input {
font-size: 70%;
background: linear-gradient(top, #d6d7d7, #dee0e0);
border: 1px solid #a1a3a3;
border-radius: 4px;
box-shadow: 0 1px #fff;
box-sizing: border-box;
color: #696969;
height: 30px;
transition: box-shadow 0.3s;
width: 100%;
}
#gameRegister section {
margin: 10px;
}
#gameRegister section.action{
text-align: center;
margin: 0;
}
#gameRegister button {
margin-top: 10px;
background-color: black;
color: white;
border-radius: 7px;
padding-bottom: 4px;
width: 60px;
}
#gameRegister button#gameRegisterFormCancel {
background-color: #c7c7c700;
color: #292929;
}
#gameRegister section a{
text-align: center;
font-size: 12px;
margin: 0 6px;
color: black;
}
#gameRegister section h6,
#gameRegister section h5{
margin: 1px;
}
#gameRegister section.text-center{
text-align: center;
}
#gameRegister section p{
font-size: 8px;
margin: 0px 70px;
}
#gameRegister section p.err{
color: red;
display: none;
}
#gameRegister section p.info{
display: none;
}
</style>
<form id="gameRegister" hidden>
<section class="text-center">
<h5>Sign in WorkAdventure</h5>
<p>Sign in WorkAdventure and share your friends / colleagues</p>
<p class="err" id="gameRegisterError"></p>
<p class="info" id="gameRegisterInfo"></p>
</section>
<section>
<h6>Name*</h6>
<input type="text" name="email" id="gameRegisterName">
</section>
<section>
<h6>Email*</h6>
<input type="email" name="email" id="gameRegisterEmail">
</section>
<section>
<h6>Password*</h6>
<input type="password" name="password" id="gameRegisterPassword">
</section>
<section>
<h6>Confirm password*</h6>
<input type="password" name="password" id="gameRegisterConfirmPassword">
</section>
<section class="action">
<button type="submit" id="gameRegisterFormSubmit">Sign In</button>
<button type="submit" id="gameRegisterFormCancel">Login</button>
</section>
</form>

106
front/dist/resources/html/gameShare.html vendored Normal file
View file

@ -0,0 +1,106 @@
<style>
*{
font-family: 'Open Sans', sans-serif;
cursor: url('/resources/logos/cursor_normal.png'), auto;
}
* a, button, input{
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
}
#gameShare {
background: #eceeee;
border: 1px solid #42464b;
border-radius: 6px;
margin: 20px auto 0;
width: 298px;
height: 150px;
}
#gameShare .cautiousText {
font-size: 50%;
}
#gameShare h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
border-bottom: 1px solid #a6abaf;
border-radius: 6px 6px 0 0;
box-sizing: border-box;
color: #727678;
display: block;
height: 43px;
padding-top: 10px;
margin: 0;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
}
#gameShare input {
font-size: 70%;
background: linear-gradient(top, #d6d7d7, #dee0e0);
border: 1px solid #a1a3a3;
border-radius: 4px;
box-shadow: 0 1px #fff;
box-sizing: border-box;
color: #696969;
height: 30px;
transition: box-shadow 0.3s;
width: 100%;
}
#gameShare section {
margin: 10px;
}
#gameShare section.action{
text-align: center;
margin: 0;
}
#gameShare button {
margin-top: 10px;
background-color: black;
color: white;
border-radius: 7px;
padding-bottom: 4px;
width: 60px;
}
#gameShare button#gameShareFormCancel {
background-color: #c7c7c700;
color: #292929;
}
#gameShare section a{
text-align: center;
font-size: 12px;
margin: 0 6px;
color: black;
}
#gameShare section h6,
#gameShare section h5{
margin: 1px;
}
#gameShare section.text-center{
text-align: center;
}
#gameShare section p{
font-size: 8px;
margin: 0px 70px;
}
#gameShare section p.err{
color: red;
display: none;
}
#gameShare section p.info{
display: none;
}
#gameShare section input#gameShareLink{
background-color: #a1a3a3;
}
</style>
<form id="gameShare" hidden>
<section class="text-center">
<h5>Share this link !</h5>
<p class="info" id="gameShareInfo"></p>
</section>
<section>
<h6>Link</h6>
<input type="text" name="email" id="gameShareLink" readonly>
</section>
<section class="action">
<button type="submit" id="gameShareFormSubmit">Copy</button>
<button type="submit" id="gameShareFormCancel">Close</button>
</section>
</form>

54
front/src/Connexion/ConnectionManager.ts
View file

@ -4,15 +4,24 @@ import {RoomConnection} from "./RoomConnection";
import {OnConnectInterface, PositionInterface, ViewportInterface} from "./ConnexionModels";
import {GameConnexionTypes, urlManager} from "../Url/UrlManager";
import {localUserStore} from "./LocalUserStore";
import {LocalUser} from "./LocalUser";
import {ConnectedUser, LocalUser} from "./LocalUser";
import {Room} from "./Room";
import {NotConnectedError} from "../Exception/NotConnectedError";
import {ErrorConnectedError} from "../Exception/ErrorConnectedError";
const URL_ROOM_STARTED = '/Floor0/floor0.json';
class ConnectionManager {
private localUser!:LocalUser;
private connexionType?: GameConnexionTypes
private connexionType?: GameConnexionTypes;
private connectedUser?: ConnectedUser|null;
constructor() {
this.verifyLoggedUser();
}
/**
* Tries to login to the node server and return the starting map url to be loaded
*/
@ -109,6 +118,47 @@ class ConnectionManager {
get getConnexionType(){
return this.connexionType;
}
public verifyLoggedUser(){
//Verify spark session
Axios.get('http://admin.workadventure.localhost/user/connected').then((res) => {
console.log('res', res);
Axios.get('http://admin.workadventure.localhost/notifications/recent').then((res) => {
this.connectedUser = res.data;
}).catch((err) => {
console.error(err);
this.connectedUser = null;
throw new ErrorConnectedError('Error to get user element');
});
}).catch((err) => {
if(err instanceof ErrorConnectedError) {
throw err;
}
console.log('err', err);
this.connectedUser = null;
throw new NotConnectedError('User not connected');
});
}
/**
* RegisterUser
*
* @param name
* @param email
* @param password
* @param confirmPassword
*/
public registerUser(name: string, email: string, password: string, confirmPassword: string){
Axios.get('http://admin.workadventure.localhost/member/register')
.then((res) => {
this.connectedUser = res.data;
})
.catch((err) => {
this.connectedUser = null;
console.log(err);
throw err;
})
}
}
export const connectionManager = new ConnectionManager();

10
front/src/Connexion/LocalUser.ts
View file

@ -9,3 +9,13 @@ export class LocalUser {
constructor(public readonly uuid:string, public readonly jwtToken: string, public readonly textures: CharacterTexture[]) {
}
}
export class ConnectedUser {
constructor(
public readonly name:string,
public readonly email: string,
public readonly notification: [],
public readonly announcements: [],
) {
}
}

1
front/src/Exception/ErrorConnectedError.ts Normal file
View file

@ -0,0 +1 @@
export class ErrorConnectedError extends Error{}

1
front/src/Exception/NotConnectedError.ts Normal file
View file

@ -0,0 +1 @@
export class NotConnectedError extends Error{}

311
front/src/Phaser/Menu/MenuScene.ts
View file

@ -9,6 +9,10 @@ export const MenuSceneName = 'MenuScene';
const gameMenuKey = 'gameMenu';
const gameMenuIconKey = 'gameMenuIcon';
const gameSettingsMenuKey = 'gameSettingsMenu';
const gameLogin = 'gameLogin';
const gameForgotPassword = 'gameForgotPassword';
const gameRegister = 'gameRegister';
const gameShare = 'gameShare';
const closedSideMenuX = -200;
const openedSideMenuX = 0;
@ -19,8 +23,14 @@ const openedSideMenuX = 0;
export class MenuScene extends Phaser.Scene {
private menuElement!: Phaser.GameObjects.DOMElement;
private gameQualityMenuElement!: Phaser.GameObjects.DOMElement;
private gameLoginElement!: Phaser.GameObjects.DOMElement;
private gameForgotPasswordElement!: Phaser.GameObjects.DOMElement;
private gameRegisterElement!: Phaser.GameObjects.DOMElement;
private gameShareElement!: Phaser.GameObjects.DOMElement;
private sideMenuOpened = false;
private settingsMenuOpened = false;
private gameLoginMenuOpened = false;
private gameShareOpened = false;
private gameQualityValue: number;
private videoQualityValue: number;
private menuButton!: Phaser.GameObjects.DOMElement;
@ -36,6 +46,10 @@ export class MenuScene extends Phaser.Scene {
this.load.html(gameMenuKey, 'resources/html/gameMenu.html');
this.load.html(gameMenuIconKey, 'resources/html/gameMenuIcon.html');
this.load.html(gameSettingsMenuKey, 'resources/html/gameQualityMenu.html');
this.load.html(gameLogin, 'resources/html/gameLogin.html');
this.load.html(gameForgotPassword, 'resources/html/gameForgotPassword.html');
this.load.html(gameRegister, 'resources/html/gameRegister.html');
this.load.html(gameShare, 'resources/html/gameShare.html');
}
create() {
@ -47,6 +61,62 @@ export class MenuScene extends Phaser.Scene {
this.gameQualityMenuElement = this.add.dom(middleX, -400).createFromCache(gameSettingsMenuKey);
this.revealMenusAfterInit(this.gameQualityMenuElement, 'gameQuality');
this.gameLoginElement = this.add.dom(middleX, -400).createFromCache(gameLogin);
this.revealMenusAfterInit(this.gameLoginElement, gameLogin);
this.gameLoginElement.addListener('click');
this.gameLoginElement.on('click', (event:MouseEvent) => {
event.preventDefault();
if((event?.target as HTMLInputElement).id === 'gameLoginFormCancel') {
this.closeGameLogin();
}else if((event?.target as HTMLInputElement).id === 'gameLoginFormSubmit') {
this.login();
}else if((event?.target as HTMLInputElement).id === 'gameLoginFormForgotPassword') {
this.closeGameLogin();
this.openGameForgotPassword();
}else if((event?.target as HTMLInputElement).id === 'gameLoginFormRegister') {
this.closeGameLogin();
this.openGameRegister();
}
});
this.gameForgotPasswordElement = this.add.dom(middleX, -400).createFromCache(gameForgotPassword);
this.revealMenusAfterInit(this.gameForgotPasswordElement, gameForgotPassword);
this.gameForgotPasswordElement.addListener('click');
this.gameForgotPasswordElement.on('click', (event:MouseEvent) => {
event.preventDefault();
if((event?.target as HTMLInputElement).id === 'gameLoginFormForgotPasswordSubmit') {
this.sendEmail();
}else if((event?.target as HTMLInputElement).id === 'gameLoginFormForgotPasswordCancel') {
this.closeGameForgotPassword();
this.openGameLogin();
}
});
this.gameRegisterElement = this.add.dom(middleX, -400).createFromCache(gameRegister);
this.revealMenusAfterInit(this.gameRegisterElement, gameRegister);
this.gameRegisterElement.addListener('click');
this.gameRegisterElement.on('click', (event:MouseEvent) => {
event.preventDefault();
if((event?.target as HTMLInputElement).id === 'gameRegisterFormSubmit') {
this.register();
}else if((event?.target as HTMLInputElement).id === 'gameRegisterFormCancel') {
this.closeGameRegister();
this.openGameLogin();
}
});
this.gameShareElement = this.add.dom(middleX, -400).createFromCache(gameShare);
this.revealMenusAfterInit(this.gameShareElement, gameShare);
this.gameShareElement.addListener('click');
this.gameShareElement.on('click', (event:MouseEvent) => {
event.preventDefault();
if((event?.target as HTMLInputElement).id === 'gameShareFormSubmit') {
this.copyLink();
}else if((event?.target as HTMLInputElement).id === 'gameShareFormCancel') {
this.closeGameShare();
}
});
this.input.keyboard.on('keyup-TAB', () => {
this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu();
});
@ -91,7 +161,11 @@ export class MenuScene extends Phaser.Scene {
private closeSideMenu(): void {
if (!this.sideMenuOpened) return;
this.sideMenuOpened = false;
this.closeGameQualityMenu()
this.closeGameQualityMenu();
this.closeGameForgotPassword();
this.closeGameLogin();
this.closeGameRegister();
this.closeGameShare();
this.menuButton.getChildByID('openMenuButton').innerHTML = `<img src="/static/images/menu.svg">`;
gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.disabledMessageConsole();
this.tweens.add({
@ -158,7 +232,231 @@ export class MenuScene extends Phaser.Scene {
});
}
private openGameLogin(): void{
this.closeGameRegister();
this.closeGameForgotPassword();
if (this.gameLoginMenuOpened) {
this.closeGameLogin();
return;
}
this.gameLoginMenuOpened = true;
let middleY = (window.innerHeight / 3) - (257);
if(middleY < 0){
middleY = 0;
}
let middleX = (window.innerWidth / 3) - 298;
if(middleX < 0){
middleX = 0;
}
this.tweens.add({
targets: this.gameLoginElement,
y: middleY,
x: middleX,
duration: 1000,
ease: 'Power3'
});
}
private closeGameLogin(): void{
this.gameLoginMenuOpened = false;
this.tweens.add({
targets: this.gameLoginElement,
y: -400,
duration: 1000,
ease: 'Power3'
});
}
private openGameShare(): void{
if (this.gameShareOpened) {
this.closeGameShare();
return;
}
const gameShareLink = this.gameShareElement.getChildByID('gameShareLink') as HTMLInputElement;
gameShareLink.value = location.toString();
this.gameShareOpened = true;
let middleY = (window.innerHeight / 3) - (257);
if(middleY < 0){
middleY = 0;
}
let middleX = (window.innerWidth / 3) - 298;
if(middleX < 0){
middleX = 0;
}
this.tweens.add({
targets: this.gameShareElement,
y: middleY,
x: middleX,
duration: 1000,
ease: 'Power3'
});
}
private closeGameShare(): void{
const gameShareInfo = this.gameShareElement.getChildByID('gameShareInfo') as HTMLParagraphElement;
gameShareInfo.innerText = '';
gameShareInfo.style.display = 'none';
this.gameShareOpened = false;
this.tweens.add({
targets: this.gameShareElement,
y: -400,
duration: 1000,
ease: 'Power3'
});
}
private login(): void{
let errorForm = false;
const gameLoginEmail = this.gameLoginElement.getChildByID('gameLoginEmail') as HTMLInputElement;
const gameLoginPassword = this.gameLoginElement.getChildByID('gameLoginPassword') as HTMLInputElement;
const gameLoginError = this.gameLoginElement.getChildByID('gameLoginError') as HTMLInputElement;
gameLoginError.innerText = '';
gameLoginError.style.display = 'none';
if (!gameLoginEmail.value || gameLoginEmail.value === '') {
gameLoginEmail.style.borderColor = 'red';
errorForm = true;
}else{
gameLoginEmail.style.borderColor = 'black';
}
if (!gameLoginPassword.value || gameLoginPassword.value === '') {
gameLoginPassword.style.borderColor = 'red';
errorForm = true;
}else{
gameLoginPassword.style.borderColor = 'black';
}
if(errorForm){return;}
gameLoginError.innerText = 'Login or password incorrect';
gameLoginError.style.display = 'block';
//TODO login user in back
}
private sendEmail(){
const gameForgotPasswordInfo = this.gameForgotPasswordElement.getChildByID('gameForgotPasswordInfo') as HTMLParagraphElement;
gameForgotPasswordInfo.style.display = 'none';
gameForgotPasswordInfo.innerText = '';
const gameForgotPasswordError = this.gameForgotPasswordElement.getChildByID('gameForgotPasswordError') as HTMLParagraphElement;
gameForgotPasswordError.style.display = 'none';
gameForgotPasswordError.innerText = '';
const gameLoginForgotPasswordEmail = this.gameForgotPasswordElement.getChildByID('gameLoginForgotPasswordEmail') as HTMLInputElement;
gameLoginForgotPasswordEmail.style.borderColor = 'black';
if(!gameLoginForgotPasswordEmail.value || gameLoginForgotPasswordEmail.value === ''){
gameForgotPasswordError.innerText = 'The email field is required.';
gameForgotPasswordError.style.display = 'block';
gameLoginForgotPasswordEmail.style.borderColor = 'red';
return;
}
//TODO send email
gameForgotPasswordInfo.style.display = 'block';
gameForgotPasswordInfo.innerText = 'We have emailed your password reset link!';
}
private register(){
const gameRegisterName = this.gameRegisterElement.getChildByID('gameRegisterName') as HTMLInputElement;
gameRegisterName.style.borderColor = 'black';
const gameRegisterEmail = this.gameRegisterElement.getChildByID('gameRegisterEmail') as HTMLInputElement;
gameRegisterEmail.style.borderColor = 'black';
const gameRegisterPassword = this.gameRegisterElement.getChildByID('gameRegisterPassword') as HTMLInputElement;
gameRegisterPassword.style.borderColor = 'black';
const gameRegisterConfirmPassword = this.gameRegisterElement.getChildByID('gameRegisterConfirmPassword') as HTMLInputElement;
gameRegisterConfirmPassword.style.borderColor = 'black';
let hasError = false;
if(!gameRegisterName.value || gameRegisterName.value === ''){
gameRegisterName.style.borderColor = 'red';
hasError = true;
}
if(!gameRegisterEmail.value || gameRegisterEmail.value === ''){
gameRegisterEmail.style.borderColor = 'red';
hasError = true;
}
if(!gameRegisterPassword.value || gameRegisterPassword.value === ''){
gameRegisterPassword.style.borderColor = 'red';
hasError = true;
}
if(
!gameRegisterConfirmPassword.value
|| gameRegisterConfirmPassword.value === ''
|| gameRegisterConfirmPassword.value !== gameRegisterPassword.value
){
gameRegisterConfirmPassword.style.borderColor = 'red';
hasError = true;
}
const gameRegisterInfo = this.gameRegisterElement.getChildByID('gameRegisterInfo') as HTMLParagraphElement;
gameRegisterInfo.style.display = 'none';
gameRegisterInfo.innerText = '';
const gameRegisterError = this.gameRegisterElement.getChildByID('gameRegisterError') as HTMLParagraphElement;
gameRegisterError.style.display = 'none';
gameRegisterError.innerText = '';
if(hasError){return;}
}
private openGameForgotPassword(): void{
let middleY = (window.innerHeight / 3) - (257);
if(middleY < 0){
middleY = 0;
}
let middleX = (window.innerWidth / 3) - 298;
if(middleX < 0){
middleX = 0;
}
this.tweens.add({
targets: this.gameForgotPasswordElement,
y: middleY,
x: middleX,
duration: 1000,
ease: 'Power3'
});
}
private closeGameForgotPassword(): void{
this.tweens.add({
targets: this.gameForgotPasswordElement,
y: -400,
duration: 1000,
ease: 'Power3'
});
}
private openGameRegister(): void{
let middleY = (window.innerHeight / 3) - (257);
if(middleY < 0){
middleY = 0;
}
let middleX = (window.innerWidth / 3) - 298;
if(middleX < 0){
middleX = 0;
}
this.tweens.add({
targets: this.gameRegisterElement,
y: middleY,
x: middleX,
duration: 1000,
ease: 'Power3'
});
}
private closeGameRegister(): void{
this.tweens.add({
targets: this.gameRegisterElement,
y: -400,
duration: 1000,
ease: 'Power3'
});
}
private onMenuClick(event:MouseEvent) {
event.preventDefault();
@ -179,7 +477,7 @@ export class MenuScene extends Phaser.Scene {
this.closeSideMenu();
break;
case 'shareButton':
this.shareUrl();
this.openGameShare();
break;
case 'editGameSettingsButton':
this.openGameSettingsMenu();
@ -187,12 +485,17 @@ export class MenuScene extends Phaser.Scene {
case 'adminConsoleButton':
gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.activeMessageConsole();
break;
case 'gameLoginMenu':
this.openGameLogin();
break;
}
}
private async shareUrl() {
private async copyLink() {
await navigator.clipboard.writeText(location.toString());
alert('URL is copied to your clipboard!');
const gameShareInfo = this.gameShareElement.getChildByID('gameShareInfo') as HTMLParagraphElement;
gameShareInfo.innerText = 'Link copied, you can share it now!';
gameShareInfo.style.display = 'block';
}
private saveSetting(valueGame: number, valueVideo: number){