WIP(party-page): Revised invite modals

common/locales/en/groups.json

@@ -106,11 +106,15 @@
     "leaderOnlyChallenges": "Only group leader can create challenges",
     "sendGift": "Send Gift",
     "inviteFriends": "Invite Friends",
-    "inviteAlertInfo": "Invite friends by <a href='http://habitrpg.wikia.com/wiki/API_Options' target='_blank'>User ID</a> here.",
-    "inviteExistUser": "Invite Existing User",
-    "inviteByEmail": "Invite friends by email. If they join via your email, they'll automatically be invited to this group.",
+    "inviteByEmail": "Invite by Email",
+    "inviteByEmailExplanation": "If a friend joins Habitica via your email, they'll automatically be invited to your party!",
+    "inviteFriendsNow": "Invite Friends Now",
+    "inviteFriendsLater": "Invite Friends Later",
+    "inviteAlertInfo": "If you have friends already using Habitica, invite them by <a href='http://habitrpg.wikia.com/wiki/API_Options' target='_blank'>User ID</a> here.",
+    "inviteExistUser": "Invite Existing Users",
     "byColon": "By:",
-    "inviteNewUsers": "Invite New User(s)",
+    "inviteNewUsers": "Invite New Users",
+    "sendInvitations": "Send Invitations",
     "inviteAlertInfo2": "Or share this link (copy/paste):",
     "sendGiftHeading": "Send Gift to <%= name %>",
     "sendGiftGemsBalance": "From <%= number %> Gems",
@@ -123,5 +127,10 @@
     "startPartyWithFriends": "Start a Party with your friends!",
     "startAParty": "Start a Party",
     "addToParty": "Add someone to your party",
-    "likePost": "Click if you like this post!"
+    "likePost": "Click if you like this post!",
+    "partyExplanation1": "Play Habitica with friends to stay accountable!",
+    "partyExplanation2": "Battle monsters and create Challenges!",
+    "partyExplanation3": "Invite friends now to earn a Quest Scroll!",
+    "wantToStartParty": "Do you want to start a party?",
+    "exclusiveQuestScroll": "Inviting a friend to your party will grant you an exclusive Quest Scroll to battle the Basi-List together!"
 }

website/public/css/shared.styl

@@ -66,4 +66,7 @@ ul
   flex-direction: column
 
 .margin-auto
-  margin: auto auto 1em auto;
+  margin: auto auto 1em auto
+
+.width-50
+  width: 50%

website/public/js/controllers/groupsCtrl.js

@@ -139,6 +139,7 @@ habitrpg.controller("GroupsCtrl", ['$scope', '$rootScope', 'Shared', 'Groups', '
 
     $scope.inviter = User.user.profile.name;
     $scope.emails = [{name:"",email:""},{name:"",email:""}];
+    $scope.invitees = [{invitee:""},{invitee:""}];
 
     $scope.inviteEmails = function(){
       Groups.Group.invite({gid: $scope.group._id}, {inviter: $scope.inviter, emails: $scope.emails}, function(){

website/public/js/services/groupServices.js

@@ -88,7 +88,7 @@ function($rootScope, ApiUrl, $resource, $q, $http, User, Challenges, Analytics,
     },
 
     inviteOrStartParty: function(group) {
-      if (group.type === "party") {
+      if (group.type === "party" || $location.$$path === "/options/groups/party") {
         $rootScope.openModal('invite-friends', {
           controller:'InviteToGroupCtrl',
           resolve: {

website/views/options/social/party.jade

@@ -10,11 +10,21 @@ script(type='text/ng-template', id='partials/options.social.party.html')
       a.btn.btn-danger(ng-click='reject()')=env.t('reject')
 
     div(ng-hide='user.invitations.party.id').container-fluid
-      .row.margin-auto
-        a.btn.btn-primary.btn-lg.flex-column(ng-click="inviteOrStartParty(group)")=env.t("startPartyWithFriends")
+      .row.margin-auto.text-center
+        a.btn.btn-primary.btn-lg.width-50(ng-click="inviteOrStartParty(group)")=env.t("startPartyWithFriends")
       .row.margin-auto.text-center(ng-controller='UserCtrl')
         .margin-auto
           span.inline-block.quest_vice3
           span.figure.herobox.inline-block
             .character-sprites
               +generatedAvatar
+      .row.margin-auto.text-center
+        ul
+          li=env.t('partyExplanation1')
+          li=env.t('partyExplanation2')
+          li=env.t('partyExplanation3')
+      .row.margin-auto.text-center
+        h4=env.t('wantToStartParty')
+      .row.margin-auto.text-center
+        span.btn.btn-primary(ng-click="inviteOrStartParty(group)")=env.t('inviteFriendsNow')
+        span.btn.btn-default=env.t('inviteFriendsLater')

website/views/shared/modals/invite-friends.jade

@@ -1,48 +1,53 @@
 script(type='text/ng-template', id='modals/invite-friends.html')
-  .modal-header
-    h4=env.t('inviteFriends')
   .modal-body
-    p.alert.alert-info!=env.t('inviteAlertInfo')
-
-    form.form-inline(ng-submit='invite()')
-      //-.alert.alert-danger(ng-show='_groupError') {{_groupError}}
-      .form-group
-        input.form-control(type='text', placeholder=env.t('userId'), ng-model='invitee')
-        | 
-        button.btn.btn-primary(type='submit')=env.t('inviteExistUser')
-
-    hr
-
-    p.alert.alert-info=env.t('inviteByEmail')
-
-    form.form-horizontal(ng-submit='inviteEmails()')
-      table.table.table-striped
-        thead
-          tr
-            th=env.t('name')
-            th=env.t('email')
-        tbody
-          tr(ng-repeat='email in emails')
-            td
-              input.form-control(type='text', ng-model='email.name')
-            td
-              input.form-control(type='email', ng-model='email.email')
-          tr
-            td(colspan=2)
-              a.btn.btn-xs.pull-right(ng-click='emails = emails.concat([{name:"",email:""}])')
-                i.glyphicon.glyphicon-plus
-          tr
-            td.form-group(colspan=2)
-              label.col-sm-1.control-label=env.t('byColon')
-              .col-sm-7
-                input.form-control(type='text', ng-model='inviter')
-              .col-sm-4
-                button.btn.btn-primary.btn-wrap(type='submit')=env.t('inviteNewUsers')
-    //-
-      hr
-      p.alert.alert-info=env.t('inviteAlertInfo2')
-      input.form-control(type='text', ng-value='inviteLink({id: party._id, inviter: user._id, name: party.name})')
-
-  .modal-footer
-    button.btn.btn-default(ng-click='$close()')=env.t('close')
-
+    tabset
+      tab(heading=env.t('inviteByEmail'))
+        p.alert.alert-info=env.t('inviteByEmailExplanation')
+        form.form-horizontal(ng-submit='inviteEmails()')
+          table.table.table-striped
+            thead
+              tr
+                th=env.t('name')
+                th=env.t('email')
+            tbody
+              tr(ng-repeat='email in emails')
+                td
+                  input.form-control(type='text', ng-model='email.name')
+                td
+                  input.form-control(type='email', ng-model='email.email')
+              tr
+                td(colspan=2)
+                  a.btn.btn-xs.pull-right(ng-click='emails = emails.concat([{name:"",email:""}])')
+                    i.glyphicon.glyphicon-plus
+              tr
+                td.form-group(colspan=2)
+                  label.col-sm-1.control-label=env.t('byColon')
+                  .col-sm-7
+                    input.form-control(type='text', ng-model='inviter')
+                  .col-sm-4
+                    button.btn.btn-primary(type='submit')=env.t('sendInvitations')
+      tab(heading=env.t('inviteExistUser'))
+        p.alert.alert-info!=env.t('inviteAlertInfo')
+        form.form-horizontal(ng-submit='invite()')
+          table.table.table-striped
+            thead
+              tr
+                th=env.t('userId')
+            tbody
+              tr(ng-repeat='invitee in invitees')
+                td
+                  input.form-control(type='text', ng-model='invitee.invitee')
+              tr
+                td(colspan=2)
+                  a.btn.btn-xs.pull-right(ng-click='invitees = invitees.concat([{invitee:""}])')
+                    i.glyphicon.glyphicon-plus
+              tr
+                td
+                  .col-sm-1
+                  .col-sm-7
+                  .col-sm-4
+                    button.btn.btn-primary(type='submit')=env.t('sendInvitations')
+    .row
+      .quest_basilist.pull-left
+      p(style='margin:2em')=env.t('exclusiveQuestScroll')
+      button.btn.btn-default.pull-right(style='margin:auto 1em', ng-click='$close()')=env.t('close')