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/Backup/Backup.vue

@@ -0,0 +1,233 @@
+<template lang="pug">
+
+#trusty_backup.main_padding
+
+	router-view
+
+	.modal_alert.main_padding(@click="setModal(null)", v-if="getModalName==='backup_try_again'")
+		.modal_content: p.trusty_big_font TRY AGAIN
+
+	.modal_alert.main_padding(@click="setModal(null)", v-if="getModalName==='backup_copied_password'")
+		.modal_content: p.trusty_big_font Password copied#[br] to clipboard
+
+
+</template>
+
+<script>
+
+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+  computed: {
+    ...mapGetters('app', ['getModalName']),
+  },
+  methods: {
+    ...mapActions('app', ['setModal'])
+  },
+  mounted() {
+    // this.setModal('backup_try_again');
+    // this.setModal('backup_copied_password');
+    // this.setModal('backup-screenshots');
+  }
+};
+</script>
+
+<style lang="scss">
+$dark_grey: #1f2325;
+$light_grey: #6d6e70;
+
+.modal_wrap {
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom:0;
+	right: 0;
+	z-index: 999;
+	background: rgba(0,0,0,0.74);
+
+	.modal_content {
+		position: relative;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+	}
+}
+
+
+.modal_alert {
+
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom:0;
+	right: 0;
+	z-index: 99;
+
+	.modal_content {
+		background: black !important;
+		color: white;
+		position: relative;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		padding-top: 12vw !important;
+		padding-bottom: 12vw;
+
+	}
+
+}
+
+
+#trusty_backup {
+
+	position: relative;
+	height: inherit;
+
+	#done {
+		.tick_container {
+			display: flex;
+			._tick {
+				width: 10%;
+				padding-top: 2vw;
+				svg, g, polygon{
+					fill: #FFEB3B;
+				}
+
+			}
+			._info {
+				width: 90%;
+			}
+		}
+
+		p.trusty_help_text {
+			text-align: left;
+			margin-top: 1vw;
+			margin-left: 4vw;
+			margin-bottom: 4vw;
+		}
+
+	}
+
+	#phrase {
+		> p:first-child {
+			margin: 42vw 0 7.5vw 0;
+		}
+		.trusty_big_font span {
+			display: inline-block;
+		}
+	}
+
+	#verify {
+
+		> p:first-child {
+			margin: .95vw 0 6vw 0;
+		}
+
+		> p  {
+			margin: 1vw 0 1vw 0;
+		}
+	}
+
+
+
+	.trusty_inline_buttons {
+		margin-bottom: 0;
+	}
+	.modal_content {
+		background: $dark_grey;
+		padding-top: 4vw;
+	}
+
+	._wrap_p {
+		padding-bottom: 2vw;
+		background: $light_grey;
+
+		& + .trusty_inline_buttons {
+			background: white;
+			button { color: black; }
+		}
+	}
+
+
+	p._title {
+
+		line-height: 11.2vw;
+		font-size: 4.8vw;
+		text-transform: uppercase;
+		text-align: center;
+		font-family: Gotham_Pro_Medium;
+		margin: 0;
+		color: black;
+	}
+
+	._camera_icon {
+		text-align: center;
+		margin-bottom: 4vw;
+
+		span {
+			width: 21vw;
+		}
+	}
+
+
+	._warnings p {
+		line-height: 8.6vw;
+		letter-spacing: .05vw;
+	}
+
+	p._second{
+		margin-bottom: 2.2vw;
+	}
+
+
+	._wrap_icon {
+		text-align: center;
+		span {
+			width:41.9vw;
+
+			margin: 19.2vw 0 5vw 0;
+		}
+	}
+
+	._bottom_fixed {
+		._one_button { margin-bottom: 4vw;}
+	}
+
+	.verify_area {
+		overflow: scroll;
+		span {
+			display: inline-block;
+			margin: 1.4vw;
+			border: 1px dashed white;
+			padding: 1.5vw 3vw;
+		}
+	}
+
+	.random_area {
+
+		.trusty_help_text {
+			margin: auto;
+		}
+
+
+		span {
+			display: inline-block;
+			margin: 1.4vw;
+			border: 1px solid white;
+			padding: 1.5vw 3vw;
+		}
+	}
+
+	.verify_area {
+		height: 28.6vh;
+		margin-bottom: 5.3vw;
+		border-top: 1px dashed white;
+		border-bottom: 1px dashed white;
+		//overflow: scroll;
+
+	}
+
+}
+
+
+</style>

client/components/Backup/BackupDone.vue

@@ -0,0 +1,74 @@
+<template lang="pug">
+
+#done
+	.tick_container(v-for="text in infos")
+		._tick: icon(name="tick_backup", :initialSvgColors="true")
+		._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", :initialSvgColors="true")
+			._info
+				p.trusty_help_text
+					| I have read, understood, and#[br]gree&nbsp
+					span._yellow The terms of use
+
+		.trusty_inline_buttons._one_button
+			button finish backup
+
+</template>
+
+<script>
+
+import icon from '@/components/UI/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>
+
+<style lang="scss">
+
+#done {
+	span._yellow {
+		display: inline-block;
+		border-bottom: 1px solid #fdf101;
+	}
+}
+
+
+
+</style>

client/components/Backup/BackupFirst.vue

@@ -0,0 +1,56 @@
+<template lang="pug">
+#first
+	p.trusty_help_text You need to backup account#[br] before using it
+	._wrap_icon
+		icon(name="account_backup_ico_safe", :initialSvgColors="true")
+	._warnings
+		p.trusty_big_font Are you being watched?
+		p.trusty_big_font Near by windows?
+		p.trusty_big_font Hidden cameras?
+		p.trusty_big_font Shoulder-spies?
+
+	._bottom_fixed.main_padding
+		p.trusty_help_text._second Anyone with your backup phrase can#[br] access or spend your funds
+
+		.trusty_inline_buttons._one_button
+			button(@click="$store.dispatch('app/setModal','backup-screenshots')") Continue to backup
+
+
+	.backup_modal(v-if="appModal==='backup-screenshots'")
+		.modal_wrap.main_padding
+			.modal_content
+				._camera_icon
+					icon(name="account_backup_ico_photo", :initialSvgColors="true")
+				._wrap_p
+					p._title screenshots are not secure
+
+					p.trusty_help_text
+						| Never make a digital copy of your#[br]
+						| backup phrase and never upload it#[br]
+						| online. You can make a save backup#[br]
+						| only with physical paper and pen
+				.trusty_inline_buttons._one_button
+					button(@click="next") I understand
+
+</template>
+
+<script>
+import icon from '@/components/UI/icon';
+import { mapGetters } from 'vuex';
+
+export default {
+  components: { icon },
+  methods: {
+    next() {
+      this.$store.dispatch('app/setModal', null);
+      this.$router.push({ name: 'backup-phrase' });
+    },
+  },
+  computed: {
+    ...mapGetters('app', ['appModal'])
+  }
+};
+</script>
+
+<style lang="scss">
+</style>