Backup page

.editorconfig

@@ -1,7 +1,7 @@
 root = true
 
 [*]
-indent_style = space
+indent_style = tab
 indent_size = 2
 end_of_line = lf
 charset = utf-8

client/components/header/index.vue

@@ -15,8 +15,8 @@
       v-if="isProfilePage"
       @click='backAction')
       icon-component(name="trusty_options")
-        
-    .header_title(v-if="!isProfilePage") {{ getTitle }}
+
+    .header_title(v-if="!isProfilePage") {{ appHeaderTitle }}
 
 
 </div>
@@ -27,6 +27,7 @@
 
 <script>
 import iconComponent from '@/components/icon';
+import { mapGetters, mapActions } from 'vuex';
 
 export default {
   components: {
@@ -39,21 +40,33 @@ export default {
         login: 'login',
         deposit: 'deposit details',
         withdraw: 'withdraw',
-        manage: 'manage fund'
+        manage: 'manage fund',
+        backup: 'compulsory backup',
+        'backup-phrase': 'backup phrase',
+        'backup-verify': 'verify backup',
+        'backup-done': 'almost done! let\'s review'
       }
     };
   },
+  mounted() {
+    this.setHeaderTitle(this.titles[this.$route.name]);
+  },
   methods: {
+    ...mapActions('app', ['setHeaderTitle']),
     backAction() {
       this.$router.push({ name: 'home' });
     },
   },
+
+  watch: {
+    $route(val) {
+      this.setHeaderTitle(this.titles[val.name]);
+    }
+  },
   computed: {
+    ...mapGetters('app', ['appHeaderTitle']),
     isProfilePage() {
       return this.$route.path.indexOf('home') !== -1 || this.$route.name === 'home';
-    },
-    getTitle() {
-      return this.titles[this.$route.name];
     }
   }
 };

client/components/icon.vue

@@ -1,7 +1,7 @@
-<template lang="pug"> 
+<template lang="pug">
 
 span.trusty_icon(v-html="icons[name]", :class="classes")
-  
+
 </template>
 
 
@@ -23,6 +23,9 @@ const names = [
   'full_plus',
   'full_minus',
   'trusty_fund_logo',
+  'nophoto_backup',
+  'save_backup',
+  'tick_backup'
 ];
 
 const icons = {};
@@ -63,10 +66,10 @@ export default {
 
 .trusty_icon {
   display: inline-block;
-  
+
   svg {
     width: 100% !important;
     height: auto;
   }
 }
-</style>
+</style>

client/root.js

@@ -10,7 +10,7 @@ export default {
   },
   render() {
     // eslint-disable-next-line
-    let app = (this.connected) ? (<router-view></router-view>) : (<h4>Connecting</h4>);
+    let app = (this.connected) || true ? (<router-view></router-view>) : (<h4>Connecting</h4>);
     return (
       <div id="app">
         <Header />

client/router/index.js

@@ -6,7 +6,7 @@ import User from '@/views/User/User.vue';
 import Signup from '@/views/Auth/signup.vue';
 import Auth from '@/views/Auth/Auth.vue';
 import ManagePortfolio from '@/views/Portfolio/ManagePortfolio.vue';
-
+import Backup from '@/views/Backup';
 
 Vue.use(Router);
 
@@ -52,6 +52,27 @@ export default new Router({
       name: 'manage',
       path: '/manage',
       component: ManagePortfolio
+    },
+    {
+      name: 'backup',
+      path: '/backup',
+      component: Backup
+    },
+    {
+      name: 'backup-phrase',
+      path: '/backup/phrase',
+      component: Backup
+    },
+
+    {
+      name: 'backup-verify',
+      path: '/backup/verify',
+      component: Backup
+    },
+    {
+      name: 'backup-done',
+      path: '/backup/done',
+      component: Backup
     }
   ]
 });

client/store/app.js

@@ -0,0 +1,39 @@
+const APP_SET_HEADER_TITLE = 'APP_SET_HEADER_TITLE';
+const APP_SET_MODAL = 'APP_SET_MODAL';
+
+const actions = {
+  setModal({ commit }, val) {
+    commit(APP_SET_MODAL, val);
+  },
+  setHeaderTitle({ commit }, val) {
+    commit(APP_SET_HEADER_TITLE, val);
+  }
+};
+
+const getters = {
+  appModal: state => state.modalName,
+  appHeaderTitle: state => state.headerTitle,
+};
+
+const mutations = {
+  [APP_SET_MODAL](state, val) {
+    state.modalName = val;
+  },
+  [APP_SET_HEADER_TITLE](state, val) {
+    state.headerTitle = val;
+  }
+};
+
+
+const state = {
+  modalName: '',
+  headerTitle: ''
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

client/store/index.js

@@ -3,12 +3,14 @@ import Vuex from 'vuex';
 // eslint-disable-next-line
 import vuexBitshares from 'lib/src';
 import transfer from './transfer';
+import app from './app';
 
 Vue.use(Vuex);
 
 const store = new Vuex.Store({
   modules: {
-    transfer
+    transfer,
+    app
   }
 });
 vuexBitshares(store);

client/style/framework.scss

@@ -12,7 +12,6 @@
   @include trusty_main_padding;
 }
 
-
 .main_centered_container {
   @media screen and (min-width: 769px){
     margin: 0 auto;
@@ -21,8 +20,23 @@
 }
 
 
+
+p.trusty_big_font {
+	text-align: center;
+  margin: .2vw;
+  font-family: Gotham_Pro;
+  font-size: 7vw;
+}
+
+._bottom_fixed {
+  position: fixed;
+  bottom:0;
+  left: 0;
+  right: 0;
+}
+
 .trusty_buttons {
-  
+
   text-align: center;
 
   button {
@@ -104,7 +118,7 @@ br.desk {
 
 @media screen and (min-width: 769px) {
 	br.mob {
-		display: none;		
+		display: none;
 	}
 	br.desk {
 		display: inline-block;

client/style/index.scss

@@ -5,7 +5,7 @@
 
 
 
-* {  
+* {
 	-webkit-backface-visibility:  hidden;
   -webkit-tap-highlight-color:  transparent;
 }
@@ -27,7 +27,7 @@ body {
 	background: #1e2225;
 }
 
-body, .app {
+html, body, #app {
 	height: 100%;
 }
 
@@ -72,7 +72,7 @@ iframe {
 	margin: 0 auto;
 	top: 50%;
 	left: 50%;
-	transform: translate(-50%, -50%); 
+	transform: translate(-50%, -50%);
 	overflow: scroll !important;
 }
 
@@ -87,7 +87,7 @@ iframe {
 }
 
 .trusty_owl_loader {
-	width: 60vw;  
+	width: 60vw;
 	opacity: .6;
 	margin: 0 auto;
 	position: fixed;

client/style/pixel-glass.scss

@@ -10,7 +10,20 @@ HTML {
 /* Планшет */
 @media ( max-width: 768px ) {
   HTML {
-    background-image: url("./screens/manage_portfolio_manual.png");
+
+    background-image: url("./screens/account_backup_6_popup.png");
+    //background-image: url("./screens/account_backup_5.png");
+
+    //background-image: url("./screens/account_backup_5_popup.png");
+
+    //background-image: url("./screens/account_backup_4.png");
+
+    //background-image: url("./screens/account_backup_3.png");
+    //background-image: url("./screens/account_backup_1_popup.png");
+
+    //background-image: url("./screens/account_backup_1_popup.png");
+    //background-image: url("./screens/account_backup_1.png");
+    //background-image: url("./screens/manage_portfolio_manual.png");
     //background-image: url("./screens/payment_method_user_profile_perfect.png");
     //background-image: url("./screens/login.png")
     //background-image: url("./screens/signup.png")

client/views/Backup/done.vue

@@ -0,0 +1,61 @@
+<template lang="pug">
+
+#done
+	.tick_container(v-for="text in infos")
+		._tick: icon(name="tick_backup")
+		._info
+			p.trusty_help_text(v-html="text")
+
+	.trusty_inline_buttons._one_button
+		button copy password
+
+	._bottom_fixed.main_padding
+		.tick_container
+			._tick: icon(name="tick_backup")
+			._info
+				p.trusty_help_text
+					| I have read, understood, and#[br]gree
+					span._yellow  The terms of use
+
+		.trusty_inline_buttons._one_button
+			button finish backup
+
+</template>
+
+<script>
+
+import icon from '@/components/icon';
+/*eslint-disable*/
+const infos = [
+  `
+		I understand that my funds are<br/>
+		help securely on this device, not<br/>
+		by a compony, and nobody can<br/>
+		recover my backup phrase and password
+	`,
+  `
+		I understand that if I open Trusty,<br/>
+		on a new device or clear browser<br/>
+		cash, my funds can only be<br/>
+		accessed with the backed pharse
+
+	`,
+  `
+		I undersatand that I need to<br/>
+		confirm every transaction with<br/>
+		the password
+	`
+];
+
+/*eslint-disable*/
+
+export default {
+	components: {icon},
+  data() {
+    return {
+      infos
+    };
+  }
+};
+
+</script>