Improve welcome page, add confirms

app/css/app.css

@@ -642,32 +642,85 @@ a.tg_radio_on:hover i.icon-radio {
 
 
 /* Welcome */
-
+.welcome_form {
+  background: #FFF;
+  padding: 45px 0 63px;
+  border-bottom: 1px solid #e9e9e9;
+}
 .welcome_logo {
-  background: url(../img/logo_dogogram.png) 0 0 no-repeat;
+  background: url(../img/decentralization.png) 0 0 no-repeat;
-  background-size: 111px 112px;
+  background-size: 160px 160px;
   display: block;
-  width: 112px;
+  width: 160px;
-  height: 112px;
+  height: 160px;
   margin: 0 auto;
 }
-.welcome_box_wrap {
+.welcome_header {
-  max-width: 310px;
+  text-align: center;
-  padding: 25px;
+  font-size: 24px;
-  background: #FFF;
+  font-weight: normal;
-  margin: 30px auto 0;
+  margin: 20px 0 25px;
-  border-radius: 1px;
-  overflow: hidden;
-
-  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
-  -moz-box-shadow:    0px 1px 2px rgba(0, 0, 0, 0.1);
-  box-shadow:         0px 1px 2px rgba(0, 0, 0, 0.1);
 }
 .welcome_text {
-  color: #999;
   text-align: center;
-  margin-bottom: 25px;
+  margin-bottom: 30px;
   font-size: 13px;
+  line-height: 16px;
+}
+.welcome_btn_wrap {
+  max-width: 206px;
+  margin: 0 auto;
+}
+
+.welcome_footer {
+  background: #f8f8f8;
+  padding: 20px 0 65px;
+}
+.welcome_cards_wrap {
+  max-width: 870px;
+  margin: 0 auto;
+}
+
+.welcome_footer_card_wrap {
+  width: 260px;
+  margin: 45px auto 0;
+  text-align: center;
+}
+.welcome_footer_card {
+  background: url(../img/WebIntro2_1x.png) 0 0 no-repeat;
+  background-size: 217px 178px;
+  width: 219px;
+  height: 180px;
+  border: 1px solid #e0e4e9;
+  margin: 0 auto 24px;
+}
+
+.welcome_footer_card_messaging {
+  background-image: url(../img/WebIntro1.png);
+}
+.is_1x .welcome_footer_card_messaging {
+  background-image: url(../img/WebIntro1_1x.png);
+}
+
+.welcome_footer_card_filesharing {
+  background-image: url(../img/WebIntro2.png);
+}
+.is_1x .welcome_footer_card_filesharing {
+  background-image: url(../img/WebIntro2_1x.png);
+}
+
+.welcome_footer_card_powerful {
+  background-image: url(../img/WebIntro3.png);
+}
+.is_1x .welcome_footer_card_powerful {
+  background-image: url(../img/WebIntro3_1x.png);
+}
+
+.welcome_footer_card_wrap h4 {
+  font-size: 16px;
+}
+.welcome_footer_card_wrap .welcome_footer_card_lead {
+
 }
 
 
@@ -2345,6 +2398,11 @@ img.chat_modal_participant_photo {
   padding: 15px 10px 0;
   text-align: center;
 }
+.confirm_peer {
+  font-weight: bold;
+  padding: 15px 10px 0;
+  text-align: center;
+}
 
 
 

app/js/controllers.js

@@ -679,7 +679,7 @@ angular.module('myApp.controllers', [])
           selectedMessageIDs.push(messageID);
         });
 
-        PeersSelectService.selectPeer().then(function (peerString) {
+        PeersSelectService.selectPeer({confirm_type: 'FORWARD_PEER'}).then(function (peerString) {
           var peerID = AppPeersManager.getPeerID(peerString);
           AppMessagesManager.forwardMessages(peerID, selectedMessageIDs).then(function () {
             selectedCancel();
@@ -1009,7 +1009,7 @@ angular.module('myApp.controllers', [])
 
     $scope.forward = function () {
       var messageID = $scope.messageID;
-      PeersSelectService.selectPeer().then(function (peerString) {
+      PeersSelectService.selectPeer({confirm_type: 'PHOTO_SHARE_PEER'}).then(function (peerString) {
         var peerID = AppPeersManager.getPeerID(peerString);
         AppMessagesManager.forwardMessages(peerID, [messageID]).then(function () {
           $rootScope.$broadcast('history_focus', {peerString: peerString});
@@ -1058,7 +1058,7 @@ angular.module('myApp.controllers', [])
 
     $scope.forward = function () {
       var messageID = $scope.messageID;
-      PeersSelectService.selectPeer().then(function (peerString) {
+      PeersSelectService.selectPeer({confirm_type: 'VIDEO_SHARE_PEER'}).then(function (peerString) {
         var peerID = AppPeersManager.getPeerID(peerString);
         AppMessagesManager.forwardMessages(peerID, [messageID]).then(function () {
           $rootScope.$broadcast('history_focus', {peerString: peerString});
@@ -1149,7 +1149,7 @@ angular.module('myApp.controllers', [])
     };
 
     $scope.shareContact = function () {
-      PeersSelectService.selectPeer().then(function (peerString) {
+      PeersSelectService.selectPeer({confirm_type: 'SHARE_CONTACT_PEER'}).then(function (peerString) {
         var peerID = AppPeersManager.getPeerID(peerString);
 
         AppMessagesManager.sendOther(peerID, {
@@ -1576,12 +1576,25 @@ angular.module('myApp.controllers', [])
 
   })
 
-  .controller('PeerSelectController', function ($scope, $modalInstance) {
+  .controller('PeerSelectController', function ($scope, $modalInstance, $q, AppPeersManager, ErrorService) {
 
     $scope.dialogSelect = function (peerString) {
-      $modalInstance.close(peerString);
+      var promise;
+      if ($scope.confirm_type) {
+        var peerID = AppPeersManager.getPeerID(peerString),
+            peerData = AppPeersManager.getPeer(peerID);
+        promise = ErrorService.confirm({
+          type: $scope.confirm_type,
+          peer_id: peerID,
+          peer_data: peerData
+        });
+      } else {
+        promise = $q.when();
+      }
+      promise.then(function () {
+        $modalInstance.close(peerString);
+      });
     };
-
   })
 
   .controller('ChatCreateModalController', function ($scope, $modalInstance, $rootScope, MtpApiManager, AppUsersManager, AppChatsManager, ApiUpdatesManager) {

app/js/services.js

@@ -3270,9 +3270,11 @@ angular.module('myApp.services', [])
 
 .service('PeersSelectService', function ($rootScope, $modal) {
 
-  function selectPeer () {
+  function selectPeer (options) {
     var scope = $rootScope.$new();
-    // angular.extend(scope, params);
+    if (options) {
+      angular.extend(scope, options);
+    }
 
     return $modal.open({
       templateUrl: 'partials/peer_select.html',

app/partials/confirm_modal.html

@@ -20,6 +20,22 @@
         Is this phone number correct?
         <div class="confirm_phone_number"> <span ng-bind="country_code"></span> <span ng-bind="phone_number"></span> </div>
       </div>
+      <span ng-switch-when="FORWARD_PEER">Are you sure to forward message(s) to <span ng-switch="peer_id > 0">
+        <span ng-switch-when="true">user <div class="confirm_peer" ng-bind-html="peer_data.rFullName"></div></span>
+        <span ng-switch-default>group <div class="confirm_peer" ng-bind-html="peer_data.rTitle"></div></span>
+      </span></span>
+      <span ng-switch-when="PHOTO_SHARE_PEER">Are you sure to forward photo to <span ng-switch="peer_id > 0">
+        <span ng-switch-when="true">user <div class="confirm_peer" ng-bind-html="peer_data.rFullName"></div></span>
+        <span ng-switch-default>group <div class="confirm_peer" ng-bind-html="peer_data.rTitle"></div></span>
+      </span></span>
+      <span ng-switch-when="VIDEO_SHARE_PEER">Are you sure to forward video to <span ng-switch="peer_id > 0">
+        <span ng-switch-when="true">user <div class="confirm_peer" ng-bind-html="peer_data.rFullName"></div></span>
+        <span ng-switch-default>group <div class="confirm_peer" ng-bind-html="peer_data.rTitle"></div></span>
+      </span></span>
+      <span ng-switch-when="SHARE_CONTACT_PEER">Are you sure to send contact to <span ng-switch="peer_id > 0">
+        <span ng-switch-when="true">user <div class="confirm_peer" ng-bind-html="peer_data.rFullName"></div></span>
+        <span ng-switch-default>group <div class="confirm_peer" ng-bind-html="peer_data.rTitle"></div></span>
+      </span></span>
       <span ng-switch-default ng-bind="message || 'Are you sure?'"></span>
     </div>
 
@@ -35,7 +51,10 @@
       <span ng-switch-when="FILES_CLIPBOARD_PASTE">Send</span>
       <span ng-switch-when="FILE_CLIPBOARD_PASTE">Send</span>
       <span ng-switch-when="MESSAGE_DELETE">Delete</span>
-      <span ng-switch-when="LOGIN_PHONE_CORRECT">Yes</span>
+      <span ng-switch-when="FORWARD_PEER">Forward message</span>
+      <span ng-switch-when="PHOTO_SHARE_PEER">Forward photo</span>
+      <span ng-switch-when="VIDEO_SHARE_PEER">Forward video</span>
+      <span ng-switch-when="SHARE_CONTACT_PEER">Send contact</span>
       <span ng-switch-default>OK</span>
     </button>
   </div>

app/partials/head.html

@@ -25,6 +25,7 @@
           <li ng-if="isLoggedIn"><a href="" ng-click="openContacts()">Contacts</a></li>
           <li ng-if="isLoggedIn"><a href="" ng-click="openSettings()">Settings</a></li>
           <li ng-if="isLoggedIn"><a href="" ng-click="logOut()">Log Out</a></li>
+          <li ng-if="!isLoggedIn"><a href="https://github.com/zhukov/webogram" target="_blank">About</a></li>
         </ul>
 
       </div>

app/partials/login.html

@@ -24,7 +24,7 @@
   </form>
 
   <form name="myLoginForm" ng-if="credentials.phone_code_hash" ng-submit="logIn()">
-    <h3 class="login_form_head">{{ credentials.phone_number | phoneNumber }} <small>(<a ng-click="credentials.phone_code_hash = ''">edit</a>)</small></h3>
+    <h3 class="login_form_head"><span ng-bind="credentials.phone_country"></span> <span ng-bind="credentials.phone_number"></span> <small>(<a ng-click="credentials.phone_code_hash = ''">edit</a>)</small></h3>
     <p class="login_form_lead">We have sent you a code via SMS.<br/>Please enter it below.</p>
 
     <p class="login_form_lead">

app/partials/welcome.html

@@ -3,17 +3,55 @@
 
 <div ng-if="showWelcome">
 
-  <div my-vertical-position="0.4">
+  <div class="welcome_form">
     <div class="welcome_logo"></div>
 
-    <div class="welcome_box_wrap">
+    <h3 class="welcome_header"><strong>Telegram</strong> Web</h3>
-      <div class="welcome_text">
+
-        <p>Welcome to an unofficial web-client of mobile <strong>Telegram</strong> messenger.</p>
+    <div class="welcome_text">
-        <p>It is an alpha, which means it is still not 200% secure and functional.</p>
+      <p>Welcome to an unofficial web-prototype of <strong>Telegram</strong>.</p>
-        <p>Visit <a target="_blank" href="https://telegram.org/">telegram.org</a> to learn more.</p>
+      <p>It is an <strong>alpha</strong>, so it still may not be 200% reliable.</p>
+    </div>
+    <div class="welcome_btn_wrap">
+      <a href="#/login" class="btn btn-primary btn-block">Start Messaging</a>
+    </div>
+  </div>
+
+  <div class="welcome_footer">
+    <div class="welcome_cards_wrap clearfix">
+
+      <div class="container-fluid">
+        <div class="row">
+          <div class="col-md-4">
+            <div class="welcome_footer_card_wrap row">
+              <div class="welcome_footer_card welcome_footer_card_messaging"></div>
+              <h4>Fast messaging</h4>
+              <div class="welcome_footer_card_lead">Send messages with rich emoji support to your contacts</div>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="welcome_footer_card_wrap">
+              <div class="welcome_footer_card welcome_footer_card_filesharing"></div>
+              <h4>Easy file sharing</h4>
+              <div class="welcome_footer_card_lead">Share and forward any files you want by using attach icon or drag-and-drop</div>
+            </div>
+          </div>
+
+          <div class="col-md-4">
+            <div class="welcome_footer_card_wrap">
+              <div class="welcome_footer_card welcome_footer_card_powerful"></div>
+              <h4>Powerful tools</h4>
+              <div class="welcome_footer_card_lead">Browse photos in chats, use edit mode and set custom notifications</div>
+            </div>
+          </div>
+
+        </div>
       </div>
-      <a href="#/login" class="btn btn-success btn-block">Start Messaging</a>
     </div>
+
   </div>
 
+
+
 </div>