From 6caf78618c7edc5f175d8051828b995dc7e1de90 Mon Sep 17 00:00:00 2001 From: Daramola Ajiboye Date: Tue, 19 Jun 2018 10:15:47 +0100 Subject: [PATCH] Integrate Authentication and gaming screen --- app/controllers/users.js | 2 +- public/css/style.css | 73 +++++++++++++++++++++++++++--- public/js/controllers/game.js | 7 ++- public/js/controllers/index.js | 12 +++-- public/views/activateComplete.html | 10 +++- public/views/answers.html | 2 +- public/views/app.html | 35 ++++++++++---- public/views/index.html | 69 ++++++++++++++++++++++++---- public/views/signin.html | 4 +- public/views/signup.html | 30 +++++++++++- 10 files changed, 208 insertions(+), 36 deletions(-) diff --git a/app/controllers/users.js b/app/controllers/users.js index 24a5d1c..d50cdea 100755 --- a/app/controllers/users.js +++ b/app/controllers/users.js @@ -61,7 +61,7 @@ exports.signup = (req, res) => { */ exports.signout = (req, res) => { req.logout(); - res.send('loggedOut'); + res.redirect('/'); }; /** diff --git a/public/css/style.css b/public/css/style.css index e13bad6..223ded0 100755 --- a/public/css/style.css +++ b/public/css/style.css @@ -26,8 +26,10 @@ body{ } .abandon-game { - color: #f42020 !important; + color: #fff !important; margin-right: 20px; + border-radius: 15px; + font-size: 13px; } .main-screen { @@ -399,7 +401,7 @@ carousel-indicators .active { -webkit-box-shadow: 0 1px 0 0 #fd9267; box-shadow: 0 1px 0 0 #fd9267; } -.form-gradient input[type=text]:focus:not([readonly]) + label { +.form-gradient input[type=text]:focus:not([readonly]) label { color: #4f4f4f; } .form-gradient input[type=password]:focus:not([readonly]) { @@ -407,7 +409,7 @@ carousel-indicators .active { -webkit-box-shadow: 0 1px 0 0 #fd9267; box-shadow: 0 1px 0 0 #fd9267; } -.form-gradient input[type=password]:focus:not([readonly]) + label { +.form-gradient input[type=password]:focus:not([readonly]) label { color: #4f4f4f; } .peach-gradient { @@ -451,7 +453,8 @@ carousel-indicators .active { .parent-form { overflow: hidden; background-color: rgba(0,0,0,0.2); - height: 100vh + height: 100%; + min-height: 100vh } .authenticate-card { width: 100%; @@ -463,7 +466,7 @@ carousel-indicators .active { .authenticate-signup-card { width: 100%; max-width: 28rem; - margin: 2% auto 0; + margin: 0 auto 0; box-shadow: 3px 4px 10px rgb(51, 30, 5); } @@ -490,7 +493,7 @@ carousel-indicators .active { min-height: 100vh; width: 100%; height: 100%; - font-family: 'cursive'; + font-family: -apple-system, BlinkMacSystemFont; background: linear-gradient(217deg, rgba(31, 16, 16, 0.95), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(70, 38, 16, 0.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(25, 8, 6, 0.8), rgba(45, 13, 3, 0.42)70.71%); } @@ -619,6 +622,7 @@ li { font-size: 25px; font-weight: bolder } + #notifications { padding-top: 10px; font-weight: bold @@ -871,4 +875,61 @@ li { text-transform: none !important; } .gradientButton .donateNow { border-top: 0px solid black !important; } + + .auth { + display: flex; + } + + .playGame { + color: white !important; + text-decoration: none !important; + } + + .playGame:hover { + color: white; + text-decoration: none !important; + } + +/* Image Styling */ + + .image-preview { + height: 170px; + width: 170px; + border-radius: 50%; + border: 5px solid white; + margin-bottom: 2px; + background-color: #999; + } + + #profile-pic { + display: flex; + margin: 0 0; + padding-top: 5px !important; + justify-content: center; + width: 319px; + object-fit: contain + } + + #profile-pic::after { + color: white; + } + + .choose-image { + display: flex; + justify-content: center; + padding: 2px 0 + } +/* Activate Account Completion */ + .verify-image{ + background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("/img/landing/scattered-cards.png"); + height: 100%; + width: 100%; + position: absolute; + border: 2px solid gray; + } + + .white-text a{ + vertical-align: 350px; + /* margin: auto auto; */ + } \ No newline at end of file diff --git a/public/js/controllers/game.js b/public/js/controllers/game.js index fa2f6db..370b355 100644 --- a/public/js/controllers/game.js +++ b/public/js/controllers/game.js @@ -48,7 +48,10 @@ angular.module('mean.system') return false; } }; - + $scope.closeModal = () => { + $('#gameModal').remove(); + $('.modal-backdrop').hide(); + } $scope.cardIsSecondSelected = function(card) { if (game.curQuestion.numAnswers > 1) { return card === $scope.pickedCards[1]; @@ -185,7 +188,7 @@ angular.module('mean.system') setTimeout(function(){ var link = document.URL; var txt = 'Give the following link to your friends so they can join your game: '; - $('#lobby-how-to-play').text(txt); + $('#lobby-how-to-play').css({'text-align': 'center', 'font-size':'22px', 'font-weight':'bold', 'background': 'white', 'color': 'black'}).text(txt); $('#oh-el').css({'text-align': 'center', 'font-size':'22px', 'background': 'white', 'color': 'black'}).text(link); }, 200); $scope.modalShown = true; diff --git a/public/js/controllers/index.js b/public/js/controllers/index.js index 162d570..f179fcc 100644 --- a/public/js/controllers/index.js +++ b/public/js/controllers/index.js @@ -57,7 +57,8 @@ angular.module('mean.system').controller('IndexController', [ $scope.user.profileImage = res.secure_url; $http.post('/api/auth/signup', $scope.user) .then(() => { - $location.path('/confirmaccount'); + $('#signUpModal').modal('show'); + // $location.path('/confirmaccount'); }, (error) => { if (error.data.errors) { $scope.hasSignupError = true; @@ -70,12 +71,17 @@ angular.module('mean.system').controller('IndexController', [ $http.post('/api/auth/signup', $scope.user) .then( () => { - $location.path('/confirmaccount'); + // $location.path('/confirmaccount'); + $('#signUpModal').modal('show'); }, (error) => { if (error.data.errors) { $scope.hasSignupError = true; - $scope.signupError = error.data.errors[0].msg || error.data.msg; + $scope.signupError = error.data.errors[0].msg || error.data.message; + } + if (error.data.message) { + $scope.hasSignupError = true; + $scope.signupError = error.data.message; } } ); diff --git a/public/views/activateComplete.html b/public/views/activateComplete.html index ea21832..efa4ba9 100644 --- a/public/views/activateComplete.html +++ b/public/views/activateComplete.html @@ -1,3 +1,9 @@ -
-

Welcome, You have successfully verified your account. Click Here to login

+
+
Welcome, You have successfully verified your account. Click Here to login
+ + +

\ No newline at end of file diff --git a/public/views/answers.html b/public/views/answers.html index 468c0d7..01972c5 100644 --- a/public/views/answers.html +++ b/public/views/answers.html @@ -25,7 +25,7 @@
-
How To Play
+
How To Play
  1. Each player begins with, and will always have, 10 white answer cards.
  2. For each round, one player is randomly chosen as the Card Czar.
    3. diff --git a/public/views/app.html b/public/views/app.html index ca40e28..e56f192 100644 --- a/public/views/app.html +++ b/public/views/app.html @@ -1,5 +1,5 @@
    -
    -

    Would you like to Take a Tour on How To Play Before the Game begins?

    +

    Would you like to Take a Tour on How To Play Before the Game begins?

    - - Take Tour + + Take Tour
diff --git a/public/views/index.html b/public/views/index.html index fa80dca..72f5245 100644 --- a/public/views/index.html +++ b/public/views/index.html @@ -18,23 +18,28 @@ @@ -58,18 +63,62 @@

Cards for Humanity is a fast-paced online version of the popular card game, -
Cards Against Humanity, that gives you the opportunity to donate to children in need - +
Cards Against Humanity, that gives you the opportunity to donate to children in need
all while remaining as despicable and awkward as you naturally are.

-
+
+
+ + PLAY GAME WITH FRIENDS +
- -
+ + + + + + +

HOW TO PLAY

-
+

CHARITY

diff --git a/public/views/signin.html b/public/views/signin.html index 465346b..923abc6 100644 --- a/public/views/signin.html +++ b/public/views/signin.html @@ -27,8 +27,8 @@

Log in

-
- Please check your username/password and try again. +
+ {{loginError}}
diff --git a/public/views/signup.html b/public/views/signup.html index 46f9bae..242b46e 100644 --- a/public/views/signup.html +++ b/public/views/signup.html @@ -25,7 +25,7 @@

Sign Up

-
+
{{signupError}}
@@ -42,6 +42,14 @@

Sign Up

+
+
+ + + +
+
+
+ + +