feat(status.account): load user account info

modules/core/client/app/trans-string-en.js

@@ -306,11 +306,31 @@
     RESET_PASSKEY_SUCCESSFULLY: 'Passkey reset successfully',
     RESET_PASSKEY_ERROR: 'Passkey reset failed',
 
-    //user account status
+    //user status
     STATUS_ACCOUNT: 'Account Status',
     STATUS_UPLOADED: 'Uploaded torrents',
     STATUS_SEEDING: 'Seeding torrents',
     STATUS_DOWNLOADING: 'Downloading torrents',
+    STATUS_FIELD: {
+      PICTURE: 'Profile picture',
+      USERNAME: 'Username',
+      FIRST_NAME: 'First name',
+      LAST_NAME: 'Last name',
+      DISPLAY_NAME: 'Display name',
+      EMAIL: 'Email',
+      PASSKEY: 'Passkey',
+      VIP_START_AT: 'Vip start at',
+      VIP_END_AT: 'Vip end at',
+      UPLOADED: 'Total uploaded',
+      DOWNLOADED: 'Total downloaded',
+      RATIO: 'Total ratio',
+      SCORE: 'Total score',
+      SEEDED: 'Seeded',
+      LEECHED: 'Leeched',
+      FINISHED: 'Finished',
+      DETAIL: 'Detail'
+    },
+    //user message box
     MESSAGES_INBOX: 'Messages Inbox',
 
     //chat view

modules/core/client/app/trans-string-zh.js

@@ -306,11 +306,32 @@
     RESET_PASSKEY_SUCCESSFULLY: 'Passkey 重置成功',
     RESET_PASSKEY_ERROR: 'Passkey 重置失败',
 
-    //user account status
+    //user status
     STATUS_ACCOUNT: '帐户状态',
     STATUS_UPLOADED: '我上传的种子',
     STATUS_SEEDING: '正在做种的种子',
     STATUS_DOWNLOADING: '正在下载的种子',
+    STATUS_FIELD: {
+      PICTURE: '头像',
+      USERNAME: '用户名',
+      FIRST_NAME: '姓',
+      LAST_NAME: '名',
+      DISPLAY_NAME: '显示昵称',
+      EMAIL: '邮箱',
+      PASSKEY: 'Passkey',
+      VIP_START_AT: 'Vip 资格开始于',
+      VIP_END_AT: 'Vip 资格结束于',
+      UPLOADED: '总上传量',
+      DOWNLOADED: '总下载量',
+      RATIO: '总分享率',
+      SCORE: '总积分',
+      SEEDED: '正在做种',
+      LEECHED: '正在下载',
+      FINISHED: '下载完成',
+      DETAIL: '详情'
+    },
+
+    //user message box
     MESSAGES_INBOX: '消息收件箱',
 
     //chat view

modules/core/client/less/mt.less

@@ -223,6 +223,16 @@ body {
     }
 }
 
+.torrent-up {
+    color: #33CC00;
+}
+.torrent-down {
+    color: #FF3300;
+}
+.torrent-finished {
+    color: #0366d6;
+}
+
 .hide-on-sm {
     @media (max-width: @screen-md-min) {
         display: none;
@@ -631,6 +641,7 @@ body {
 .tab-status {
     .nav-tabs {
         > li {
+            cursor: pointer;
             > a {
                 margin-right: 5px;
                 padding: 10px 30px;
@@ -797,3 +808,24 @@ body {
     color: #888;
     font-size: 12px;
 }
+
+.status-avatar {
+    border-radius: 3px;
+    height: 44px;
+    width: 44px;
+}
+
+.status-divider {
+    height: 1px;
+    overflow: hidden;
+    background-color: #e5e5e5;
+    margin: 8px 0;
+}
+
+.ratio-normal {
+    color: #0000cc;
+}
+
+.ratio-warning {
+    color: #FF0000;
+}

modules/users/client/controllers/status/status.client.controller.js

@@ -0,0 +1,24 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('users')
+    .controller('StatusController', StatusController);
+
+  StatusController.$inject = ['$scope', '$state', '$translate', '$timeout', 'Authentication', 'Notification', 'TorrentsService',
+    'MeanTorrentConfig', '$window'];
+
+  function StatusController($scope, $state, $translate, $timeout, Authentication, Notification, TorrentsService, MeanTorrentConfig,
+                              $window) {
+    var vm = this;
+    vm.user = Authentication.user;
+
+    /**
+     * If user is not signed in then redirect back home
+     */
+    if (!Authentication.user) {
+      $state.go('authentication.signin');
+    }
+
+  }
+}());

modules/users/client/views/status/account.client.view.html

@@ -1,7 +1,79 @@
-<section>
-    <div class="row">
+<section ng-controller="StatusController as vm">
+    <div class="row margin-top-30 margin-bottom-30">
         <div class="col-md-10 col-md-offset-1">
+            <dl class="dl-horizontal">
+                <dt class="h-line">{{ 'STATUS_FIELD.PICTURE' | translate}}：</dt>
+                <dd class="h-line">
+                    <img class="status-avatar" ng-src="/{{vm.user.profileImageURL}}">
+                </dd>
 
+                <dt class="h-line">{{ 'STATUS_FIELD.USERNAME' | translate}}：</dt>
+                <dd class="h-line">{{ vm.user.username }}</dd>
+
+                <!--<dt class="h-line">{{ 'STATUS_FIELD.FIRST_NAME' | translate}}：</dt>-->
+                <!--<dd class="h-line">{{ vm.user.firstName }}</dd>-->
+
+                <!--<dt class="h-line">{{ 'STATUS_FIELD.LAST_NAME' | translate}}：</dt>-->
+                <!--<dd class="h-line">{{ vm.user.lastName }}</dd>-->
+
+                <dt class="h-line">{{ 'STATUS_FIELD.DISPLAY_NAME' | translate}}：</dt>
+                <dd class="h-line">{{ vm.user.displayName }}</dd>
+
+                <dt class="h-line">{{ 'STATUS_FIELD.EMAIL' | translate}}：</dt>
+                <dd class="h-line">{{ vm.user.email }}</dd>
+
+                <dt class="h-line">{{ 'STATUS_FIELD.PASSKEY' | translate}}：</dt>
+                <dd class="h-line"><mark>{{ vm.user.passkey }}</mark></dd>
+
+                <dt class="h-line"></dt>
+                <dd class="h-line">
+                    <a ui-sref="settings.profile">{{ 'EDIT_PROFILE' | translate }}</a> |
+                    <a ui-sref="vip">{{ 'BUTTON_DNATE' | translate }}</a>
+                </dd>
+
+                <li class="status-divider"></li>
+
+                <div ng-show="vm.user.isVip">
+                    <dt class="h-line">{{ 'STATUS_FIELD.VIP_START_AT' | translate}}：</dt>
+                    <dd class="h-line">{{ vm.user.vip_start_at | date: 'yyyy-MM-dd HH:mm:ss' }}</dd>
+
+                    <dt class="h-line">{{ 'STATUS_FIELD.VIP_END_AT' | translate}}：</dt>
+                    <dd class="h-line">{{ vm.user.vip_end_at | date: 'yyyy-MM-dd HH:mm:ss' }}</dd>
+
+                    <li class="status-divider"></li>
+                </div>
+
+                <dt class="h-line">{{ 'STATUS_FIELD.UPLOADED' | translate}}：</dt>
+                <dd class="h-line">
+                    <span class="glyphicon glyphicon-arrow-up torrent-up"></span>
+                    {{ vm.user.uploaded | bytes:2 }}
+                </dd>
+
+                <dt class="h-line">{{ 'STATUS_FIELD.DOWNLOADED' | translate}}：</dt>
+                <dd class="h-line">
+                    <span class="glyphicon glyphicon-arrow-down torrent-down"></span>
+                    {{ vm.user.downloaded | bytes:2 }}
+                </dd>
+
+                <dt class="h-line">{{ 'STATUS_FIELD.RATIO' | translate}}：</dt>
+                <dd class="h-line"><span ng-class="vm.user.ratio > 1 ? 'ratio-normal' : 'ratio-warning' ">{{ vm.user.ratio }}</span></dd>
+
+                <dt class="h-line">{{ 'STATUS_FIELD.SCORE' | translate}}：</dt>
+                <dd class="h-line">{{ vm.user.score }}</dd>
+
+                <li class="status-divider"></li>
+
+                <dt class="h-line">{{ 'STATUS_FIELD.SEEDED' | translate}}：</dt>
+                <dd class="h-line">{{ vm.user.seeded }} <a ui-sref="status.seeding">{{ 'STATUS_FIELD.DETAIL' | translate }}</a></dd>
+
+                <dt class="h-line">{{ 'STATUS_FIELD.LEECHED' | translate}}：</dt>
+                <dd class="h-line">{{ vm.user.leeched }}  <a ui-sref="status.downloading">{{ 'STATUS_FIELD.DETAIL' | translate }}</a></dd>
+
+                <dt class="h-line">{{ 'STATUS_FIELD.FINISHED' | translate}}：</dt>
+                <dd class="h-line">{{ vm.user.finished }}</span></dd>
+
+                <li class="status-divider"></li>
+            </dl>
         </div>
     </div>
 </section>

modules/users/client/views/status/downloading.client.view.html

@@ -1,4 +1,4 @@
-<section>
+<section ng-controller="StatusController as vm">
     <div class="row">
         <div class="col-md-10 col-md-offset-1">
 

modules/users/client/views/status/seeding.client.view.html

@@ -1,4 +1,4 @@
-<section>
+<section ng-controller="StatusController as vm">
     <div class="row">
         <div class="col-md-10 col-md-offset-1">
 

modules/users/client/views/status/status.client.view.html

@@ -1,11 +1,23 @@
-<section class="container">
+<section class="container" ng-controller="StatusController as vm" ng-init="vm.initIsActive = false;">
     <div class="tab-status margin-top-40">
-        <uib-tabset>
-            <uib-tab index="0" ui-sref="status.account" heading="{{'STATUS_ACCOUNT' | translate}}"></uib-tab>
-            <uib-tab index="1" ui-sref="status.uploaded" heading="{{'STATUS_UPLOADED' | translate}}"></uib-tab>
-            <uib-tab index="2" ui-sref="status.seeding" heading="{{'STATUS_SEEDING' | translate}}"></uib-tab>
-            <uib-tab index="3" ui-sref="status.downloading" heading="{{'STATUS_DOWNLOADING' | translate}}"></uib-tab>
-        </uib-tabset>
+        <!--<uib-tabset>-->
+        <!--<uib-tab index="0" ui-sref-active="active" active="vm.initIsActive" ui-sref="status.account"-->
+        <!--heading="{{'STATUS_ACCOUNT' | translate}}"></uib-tab>-->
+        <!--<uib-tab index="1" ui-sref-active="active" active="vm.initIsActive" ui-sref="status.uploaded"-->
+        <!--heading="{{'STATUS_UPLOADED' | translate}}"></uib-tab>-->
+        <!--<uib-tab index="2" ui-sref-active="active" active="vm.initIsActive" ui-sref="status.seeding"-->
+        <!--heading="{{'STATUS_SEEDING' | translate}}"></uib-tab>-->
+        <!--<uib-tab index="3" ui-sref-active="active" active="vm.initIsActive" ui-sref="status.downloading"-->
+        <!--heading="{{'STATUS_DOWNLOADING' | translate}}"></uib-tab>-->
+        <!--</uib-tabset>-->
+
+        <ul class="nav nav-tabs">
+            <li ui-sref="status.account" ui-sref-active="active"><a>{{'STATUS_ACCOUNT' | translate}}</a></li>
+            <li ui-sref="status.uploaded" ui-sref-active="active"><a>{{'STATUS_UPLOADED' | translate}}</a></li>
+            <li ui-sref="status.seeding" ui-sref-active="active"><a>{{'STATUS_SEEDING' | translate}}</a></li>
+            <li ui-sref="status.downloading" ui-sref-active="active"><a>{{'STATUS_DOWNLOADING' | translate}}</a></li>
+        </ul>
+
     </div>
     <div ui-view></div>
 </section>

modules/users/client/views/status/uploaded.client.view.html

@@ -1,4 +1,4 @@
-<section>
+<section ng-controller="StatusController as vm">
     <div class="row">
         <div class="col-md-10 col-md-offset-1">