Feature/user-auth-and-media

.gitignore

@@ -3,3 +3,4 @@
 src/settings.js
 build/settings.js
 node_modules
+src/contents/bower_components

build/Dockerfile

@@ -1,4 +1,4 @@
-FROM nginx:1.17.1-alpine
+FROM nginx:1.25-alpine
 
 WORKDIR /usr/share/nginx/html
 

build/contents/locales/locale-en.json

@@ -1,21 +1,21 @@
 {
     "LANGUAGE": "en",
-    "APP_NAME": "CodyColor Multiplayer",
+    "APP_NAME": "Multiplayer CodyColor",
     "APP_NAME_SHORT": "CodyColor",
-    "APP_SUBTITLE": "A multiplayer mini game.",
+    "APP_SUBTITLE": "A multiplayer coding game.",
     "PRESS_TO_CONTINUE": "Press to continue",
     "SPLASH_FOOTER": "Developed by <a href=\"https://www.riccardomaldini.it/\">Riccardo Maldini</a><br>Music by <a href=\"https://www.instagram.com/el.favelas\">ElFavelas</a><br>© Digit S.r.l. 2019 for <a href=\"https://codemooc.net\">CodeMOOC.net</a>",
     "HOW_TO_PLAY": "How to play",
     "RANDOM_MATCH": "Random match",
     "CUSTOM_MATCH": "Custom match",
     "AGA_MATCH": "Battle Royale",
-    "BOOT_CAMP": "Boot camp",
+    "BOOT_CAMP": "Bootccamp",
     "RANKINGS": "Rankings",
     "LOGIN": "Login",
     "PROFILE": "Profile",
     "OTHERWISE": "- otherwise -",
-    "NOT_LOGGED": "Not logged",
-    "LANG_DESC": "Choose the language you wish to use for CodyColor",
+    "NOT_LOGGED": "Not logged-in",
+    "LANG_DESC": "Choose the language you wish to use",
     "LANG_ITALIAN": "Italian",
     "LANG_ENGLISH": "English",
     "LANG_HUNGARIAN": "Hungarian",
@@ -25,9 +25,9 @@
     "NO_CONNECT_DESC": "You have to connect to the server to use online features. Check your Internet connection.",
     "OUTDATED_VERSION_DESC": "You have to update CodyColor to use online features. Quit your browser, re-open it and refresh the page to update.",
     "OK": "Ok",
-    "SEARCH_MATCH_INFO": "Searching match info…",
+    "SEARCH_MATCH_INFO": "Looking for match info…",
     "CODE_NOT_VALID": "The code is not valid anymore.",
-    "NOTIF_OFFLINE": "You are offline. Trying to connect to the server...",
+    "NOTIF_OFFLINE": "You are offline. Trying to connect to the server…",
     "NOTIF_GENERAL": "{{totalMatches}} matches played, {{connectedPlayers}} players connected now",
     "404": "404",
     "PAGE_NOT_FOUND": "Page not found",
@@ -45,10 +45,10 @@
     "PLAYERS_40": "40 players",
     "PLAYERS_60": "60 players",
     "PLAYERS_100": "100 players",
-    "MAX_PLAYERS": "Maximum players number",
-    "WINNER": "{{winner}} wins the {{matchCount}}° match!",
+    "MAX_PLAYERS": "Maximum player number",
+    "WINNER": "{{winner}} wins match number {{matchCount}}!",
     "ENEMY_REQUEST_NM": "Your opponent wants to play again!",
-    "ENEMY_WAIT": "Wait for the opponent to confirm his participation…",
+    "ENEMY_WAIT": "Wait for the opponent to confirm their participation…",
     "STATS_MOVES": "Moves: ",
     "STATS_TIME": "Time to choose: ",
     "STATS_POINTS": "Points: ",
@@ -62,7 +62,7 @@
     "MODAL_EXIT_DESC": "Are you sure you want to leave the match?",
     "PLAY_AGAIN": "Play again",
     "SKIP": "Skip",
-    "BOOTCAMPMAKING_DESC": "In this game mode you have the possibility to train in single player. You can choose the duration of each game, and possibly, whether to use a bot as an opponent.",
+    "BOOTCAMPMAKING_DESC": "In this game mode you will train in a single-player match. You can choose the length of each match and whether to use a bot as an opponent.",
     "MATCH_TIME": "Match duration",
     "CREATE_MATCH": "Create match",
     "CUSTOM_MATCH_DESC": "This mode allows you to create custom private matches: you can choose the various game options, and invite who you want through the code generated by the program!",
@@ -74,12 +74,12 @@
     "NEW_CUSTOM_EXT": "New custom match",
     "JOIN_BATTLE": "Join Battle",
     "AGA_FOUND": "Battle found! Choose a nickname to join.",
-    "BATTLE_WELCOME": "Welcome to the Battle \"{{ gameName }}\"! Every match will last {{ battleTime }}; it can host a maximum of {{ maxPlayers }} players. Remember: in INSTANT games, the organizer cannot leave the game during the matchmaking phase. Otherwise, the game will be canceled.",
+    "BATTLE_WELCOME": "Welcome to the Battle “{{ gameName }}”! Every match will last {{ battleTime }}; it can host a maximum of {{ maxPlayers }} players. Remember: in INSTANT games, the organizer cannot leave the game during the matchmaking phase. Otherwise, the game will be canceled.",
     "WHEN_START": "When will the match start?",
     "WHEN_TIMER": "All users connected at the end of the countdown will fight:",
     "WHEN_INSTANT": "The match will start when the organiser will click the start button.",
     "INVITE_YOUR_FRIENDS": "Invite your friends",
-    "INVITE_DESC": "You can invite other opponents by sending them the code below, to be inserted in the \"Battle Royale\" screen of the game, or directly via the link. Press one of the two items to copy them to the clipboard.",
+    "INVITE_DESC": "You can invite other opponents by sending them the code below, to be inserted in the “Battle Royale” screen of the game, or directly via the link. Press one of the two items to copy them to the clipboard.",
     "ABORT_MATCH": "Abort battle",
     "CONNECTED_PLAYERS": "Connected players",
     "NEW_ROYALE_DESC": "From this screen you can customise the various aspects of the battle you are creating. You can also decide whether to start the tournament on a certain date-time, or start it manually when you wish.",
@@ -95,7 +95,7 @@
     "POSITIONED_COMPOSITE": "Positioned: {{numPositioned}}",
     "TIME_OUT": "Time out! You didn't place Roby before the deadline!",
     "TIME_PLAYER": "Roby placed in time {{time}}!",
-    "DRAW": "It's a draw!",
+    "DRAW": "It’s a draw!",
     "NUM_PLAYERS_AFTERMATCH": "{{numPlayers}} players already in this game",
     "NUM_READY_AFTERMATCH": "{{numReady}} players want to play another match!",
     "SHARE": "Share your score!",
@@ -110,7 +110,7 @@
     "RANDOM_MMAKING_DESC": "Choose the nickname with which to appear in the next game; CodyColor will find a random opponent among those waiting to play.",
     "FIND_ENEMY": "Find an<br>opponent",
     "ENEMIES_WAITING": "{{randomWaitingPlayers}} players are waiting for an opponent now",
-    "WAITING_NEW_PLAYERS": "Waiting an enemy…",
+    "WAITING_NEW_PLAYERS": "Waiting for an opponent…",
     "NEW_CUSTOM_MATCH": "New custom<br>match",
     "CODE": "Match code",
     "CODE_EXAMPLE": "ex. 1234",
@@ -121,7 +121,8 @@
     "LOGIN_SETNICK": "Almost done!",
     "LOGIN_SETNICK_DESC": "Enter a nickname to display to your opponents to complete the registration.",
     "LOGIN_SETNICK_CONFIRM": "Complete registration",
-    "WELCOME_USER": "Welcome, {{ user }}!",
+    "WELCOME_USER": "Nickname: ",
+    "EMAIL_USER":"The email associated with this account is: ",
     "USER_STATS": "User stats",
     "TOTAL_POINTS": "Total points: ",
     "TOTAL_WINS": "Total wins: ",
@@ -161,17 +162,17 @@
     "HI": "Hi",
     "WELCOME": "Welcome!",
     "I_FEEL_STRONG_TODAY": "I feel strong today",
-    "I_M_READY": "I'm ready to start",
-    "HAPPY_TO_PLAY_WITH_YOU": "I'm happy to play with you",
+    "I_M_READY": "I’m ready to start",
+    "HAPPY_TO_PLAY_WITH_YOU": "I’m happy to play with you",
     "ARE_YOU_READY": "Are you ready?",
-    "PLAYING_WITH_FRIENDS": "I'm playing with many friends",
-    "FROM_NORTH": "I'm from North",
-    "FROM_SOUTH": "I'm from South",
-    "FROM_WEST": "I'm from West",
-    "FROM_EAST": "I'm from East",
+    "PLAYING_WITH_FRIENDS": "I’m playing with many friends",
+    "FROM_NORTH": "I’m from the North",
+    "FROM_SOUTH": "I’m from the South",
+    "FROM_WEST": "I’m from the West",
+    "FROM_EAST": "I’m from the East",
     "WELLDONE": "Well done!",
     "YOU_MADE_A_GREAT_SCORE": "Wow, you made a great score!",
-    "IT_WAS_FUN": "It was fun!",
+    "IT_WAS_FUN": "That was fun!",
     "DO_BETTER_NEXT_TIME": "I'll do better next time…",
     "THANKS": "Thanks!",
     "LET_S_PLAY_AGAIN": "Let's play again!",

build/contents/locales/locale-hu.json

@@ -122,7 +122,8 @@
     "LOGIN_SETNICK": "Majdnem kész!",
     "LOGIN_SETNICK_DESC": "Add meg a játékban használt beceneved a regisztráció befejezéséhez!",
     "LOGIN_SETNICK_CONFIRM": "Regisztráció befejezése",
-    "WELCOME_USER": "Légy üdvözölve, {{ user }}!",
+    "WELCOME_USER": "Becenév: ",
+    "EMAIL_USER":"A fiókhoz tartozó e-mail cím: ",
     "USER_STATS": "Játékos statisztika",
     "TOTAL_POINTS": "Összes pontszám: ",
     "TOTAL_WINS": "Összes győzelem: ",

build/contents/locales/locale-it.json

@@ -123,7 +123,8 @@
     "LOGIN_SETNICK": "Ci siamo quasi!",
     "LOGIN_SETNICK_DESC": "Inserisci un nickname con il quale venire visualizzato ai tuoi avversari per completare la registrazione.",
     "LOGIN_SETNICK_CONFIRM": "Completa registrazione",
-    "WELCOME_USER": "Welcome, {{ user }}!",
+    "WELCOME_USER": "Nickname: ",
+    "EMAIL_USER":"L'email associata a questo account è: ",
     "USER_STATS": "Statistiche utente",
     "TOTAL_POINTS": "Punti totali: ",
     "TOTAL_WINS": "Vittorie totali: ",

build/contents/pages/bootmp-mmaking.html

@@ -14,8 +14,11 @@
                     <li class="list--spaced-element">
                         <input type="text" name="nickname" ng-maxlength="22" ng-model="nickname" id="nickname"
                                placeholder="{{'NICKNAME_EXAMPLE' | translate}}" class="standard-input"
-                               ng-disabled="userLogged" required autofocus/>
+                                required autofocus/>
+
                     </li>
+
+
                     <li class="list--simple-element">
                         {{ 'ENEMY' | translate }}
                     </li>

build/contents/pages/custom-new-match.html

@@ -17,7 +17,7 @@ <h2>{{ 'NEW_CUSTOM_EXT' | translate }}</h2>
                     <li class="list--spaced-element">
                         <input type="text" name="nickname" ng-maxlength="22" ng-model="nickname" id="nickname"
                                placeholder="{{'NICKNAME_EXAMPLE' | translate}}" class="standard-input"
-                               ng-disabled="userLogged" required autofocus/>
+                               ng-disabled="false" required autofocus/>
                     </li>
                     <li class="list--simple-element">
                         {{ 'MATCH_TIME' | translate }}

build/contents/pages/login.html

@@ -2,16 +2,62 @@
     <div class="page--wrapper">
         <div class="page--body">
             <!-- Schermata iniziale, opzioni ins. code e newMatch -->
-            <div ng-show="loginState === screens.login" class="page--component">
-                <ul class="list" ng-hide="pendingRedirect">
-                    <li class="list--spaced-element">
-                       {{'LOGIN_DESC' | translate}}
-                    </li>
+            <div ng-show="loginState === screens.login" >
+                <ul class="auth-desc">
+                  <li>
+                    {{'LOGIN_DESC' | translate}}
+                  </li>
                 </ul>
+              <div class="auth-container">
+
+
+                <h2 class="auth-title">Sign in or Create Account</h2>
+                <!-- Step Email -->
+                <form ng-if="step === 'email'" ng-submit="checkEmail(email)" class="auth-form">
+                    <label for="login-email" class="auth-label">Email</label>
+                    <input id="login-email" type="email" ng-model="email" placeholder="Enter your email" required />
+                    <button type="submit" class="btn-primary">Next</button>
+                </form>
+
+                <!-- Step Password -->
+                <form ng-if="step === 'password'" ng-submit="loginWithPassword(email, password)" class="auth-form">
+                    <label for="login-password" class="auth-label">Password</label>
+                    <input id="login-password" type="password" ng-model="password" placeholder="Enter your password" required />
+                    <button type="submit" class="btn-primary">Login</button> 
+                </form>
+
+                <!-- Step Social -->
+                <div ng-if="step === 'social'" class="auth-message">
+                  <p>The email <b>{{email}}</b> is registered with {{provider}}.</p>
+                  <button ng-click="resetPassword(email)" class="btn-secondary">
+                    Convert with password reset
+                  </button>
+                </div> 
 
-                <div id="firebaseui-auth-container"></div>
-            </div>
 
+                <!-- Step Register -->
+                <div ng-if="step === 'register'" class="auth-message" style="color: #d93025;">
+                  <p>No account found for <b>{{email}}</b>. Create a new one.</p>
+                  <label for="register-password" class="auth-label">Choose a password</label>
+                  <input id="register-password" 
+                         type="password" 
+                         ng-model="registerPassword" 
+                         placeholder="Enter a password" 
+                         required />
+
+                  <button type="button" class="btn-primary" 
+                          ng-click="signUpFirebase(email, registerPassword)">
+                    Register
+                  </button>
+                </div>
+
+                <!-- Messages -->
+                <p ng-if="errorMessage" class="auth-error">{{errorMessage}}</p>
+                <p ng-if="infoMessage" class="auth-info">{{infoMessage}}</p>
+              </div>
+            </div>
+
+
             <!-- Inserimento nickname -->
             <div ng-show="loginState === screens.nicknameSelection" class="page--component">
                 <form name="nickForm">
@@ -41,17 +87,53 @@
                 </form>
             </div>
 
-
             <div ng-show="loginState === screens.profile" class="page--component">
                 <ul class="list">
                     <li class="list--simple-element">
                         <img class="profile--image" src="{{(firebaseUserData.photoURL !== undefined
                         && firebaseUserData.photoURL !== '' && firebaseUserData.photoURL !== null) ?
                             firebaseUserData.photoURL : 'img/user-avatar.png'}}" alt="User Avatar">
                     </li>
-                    <li class="list--spaced-element">
-                        <h2>{{'WELCOME_USER' | translate : { 'user': serverUserData.nickname } }}</h2>
+                    <li class="list--spaced-element user-details">
+                        <div class="profile-row">
+                            <h2 class="profile-text">{{ 'WELCOME_USER' | translate }} <span ng-if="!editMode" style="color: #fff">{{serverUserData.nickname }}</span></h2>
+                            <!-- Normal view -->
+                            <div ng-if="!editMode">
+                              <i class="fas fa-pen navigation--icon-in-text"
+                                 title="Edit nickname"
+                                 ng-click="enterEditMode()"></i>
+                            </div>
+
+                            <!-- Edit mode -->
+                            <div ng-if="editMode" class="nickname-edit-row">
+                                <input type="text"
+                                name="nickname"
+                                ng-model="user.nickname"
+                                ng-model-options="{ updateOn: 'blur keyup', debounce: 0 }"
+                                ng-maxlength="22"
+                                placeholder="{{ 'NICKNAME_EXAMPLE' | translate }}"
+                                class="standard-input"
+                                required
+                                autofocus />
+
+
+                              <!-- Confirm -->
+                              <i class="fas fa-check icon-confirm"
+                                 title="Save nickname"
+                                 ng-click="saveNickname()"></i>
+                              <!-- Cancel -->
+                              <i class="fas fa-times icon-cancel"
+                                 title="Cancel"
+                                 ng-click="cancelEdit()"></i>
+                            </div>
+                        </div>
+                        <!-- Email always visible -->
+                         <div class="profile-row">
+                            <p class="profile-text">{{ 'EMAIL_USER' | translate  }}<span style="color: #fff;">{{ firebaseUserData.email }}</span></p>
+                        </div>
                     </li>
+
+
                     <li class="list--spaced-element">
                         <div class="stats">
                             <span class>{{ 'USER_STATS' | translate }}</span>
@@ -117,7 +199,7 @@ <h2>{{'WELCOME_USER' | translate : { 'user': serverUserData.nickname } }}</h2>
         </span>
         </button>
     </div>
-</div>
+    </div>
 
     <!-- SingleOption modal -->
     <div class="modal" ng-show="singleOptionModal">

build/contents/pages/random-mmaking.html

@@ -12,10 +12,11 @@
                         <li class="list--simple-element">
                             <label for="nickname">{{ 'NICKNAME' | translate }}</label>
                         </li>
+
                         <li class="list--spaced-element">
                             <input type="text" name="nickname" ng-maxlength="22" ng-model="nickname" id="nickname"
                                    placeholder="{{'NICKNAME_EXAMPLE' | translate}}" class="standard-input"
-                                   ng-disabled="userLogged"
+                                   ng-disabled="false"
                                    required autofocus/>
                         </li>
                         <li class="list--spaced-element">

build/contents/pages/royale-mmaking.html

@@ -59,7 +59,7 @@
                         <li class="list--spaced-element">
                             <input type="text" name="nickname" ng-maxlength="22" ng-model="nickname" id="nickname"
                                    placeholder="{{'NICKNAME_EXAMPLE' | translate}}" class="standard-input"
-                                   ng-disabled="userLogged" required autofocus/>
+                                   ng-disabled="false" required autofocus/>
                         </li>
                         <li class="list--spaced-element">
                             <button class="navigation--button flashing-animation"

build/contents/pages/royale-new-match.html

@@ -25,7 +25,7 @@ <h2>{{ 'NEW_AGA_EXT' | translate }}</h2>
                     <li class="list--spaced-element">
                         <input type="text" name="nickname" ng-maxlength="22" ng-model="nickname" id="nickname"
                                placeholder="{{'NICKNAME_EXAMPLE' | translate}}" class="standard-input"
-                               ng-disabled="userLogged" required />
+                               ng-disabled="false" required />
                     </li>
                     <li class="list--simple-element">
                         {{ 'MATCH_TIME' | translate }}