1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<template>
<div>
<button v-if="!enabled"
id="generate-backup-codes"
@click="generateBackupCodes">
{{ t('twofactor_backupcodes', 'Generate backup codes') }}
</button>
<template v-else>
<p>
<template v-if="!haveCodes">
{{ t('twofactor_backupcodes', 'Backup codes have been generated. {used} of {total} codes have been used.', {used, total}) }}
</template>
<template v-else>
{{ t('twofactor_backupcodes', 'These are your backup codes. Please save and/or print them as you will not be able to read the codes again later') }}
<ul>
<li v-for="code in codes" :key="code" class="backup-code">
{{ code }}
</li>
</ul>
<a :href="downloadUrl"
class="button primary"
:download="downloadFilename">{{ t('twofactor_backupcodes', 'Save backup codes') }}</a>
<button class="button"
@click="printCodes">
{{ t('twofactor_backupcodes', 'Print backup codes') }}
</button>
</template>
</p>
<p>
<button id="generate-backup-codes"
:class="{'icon-loading-small': generatingCodes}"
@click="generateBackupCodes">
{{ t('twofactor_backupcodes', 'Regenerate backup codes') }}
</button>
</p>
<p>
<em>
{{ t('twofactor_backupcodes', 'If you regenerate backup codes, you automatically invalidate old codes.') }}
</em>
</p>
</template>
</div>
</template>
<script>
import confirmPassword from 'nextcloud-password-confirmation'
import { print } from '../service/PrintService'
export default {
name: 'PersonalSettings',
data() {
return {
generatingCodes: false
}
},
computed: {
downloadUrl: function() {
if (!this.codes) {
return ''
}
return 'data:text/plain,' + encodeURIComponent(this.codes.reduce((prev, code) => {
return prev + code + '\r\n'
}, ''))
},
downloadFilename: function() {
const name = OC.theme.name || 'Nextcloud'
return name + '-backup-codes.txt'
},
enabled: function() {
return this.$store.state.enabled
},
total: function() {
return this.$store.state.total
},
used: function() {
return this.$store.state.used
},
codes: function() {
return this.$store.state.codes
},
name: function() {
return OC.theme.name || 'Nextcloud'
},
haveCodes() {
return this.codes && this.codes.length > 0
}
},
methods: {
generateBackupCodes: function() {
confirmPassword().then(() => {
// Hide old codes
this.generatingCodes = true
this.$store.dispatch('generate').then(data => {
this.generatingCodes = false
}).catch(err => {
OC.Notification.showTemporary(t('twofactor_backupcodes', 'An error occurred while generating your backup codes'))
this.generatingCodes = false
throw err
})
}).catch(console.error.bind(this))
},
getPrintData: function(codes) {
if (!codes) {
return ''
}
return codes.reduce((prev, code) => {
return prev + code + '<br>'
}, '')
},
printCodes: function() {
print(this.getPrintData(this.codes))
}
}
}
</script>
<style scoped>
.backup-code {
font-family: monospace;
letter-spacing: 0.02em;
font-size: 1.2em;
}
.button {
display: inline-block;
}
</style>
|
