stash
This commit is contained in:
parent
17bfb84a94
commit
2fe8d14c2c
35 changed files with 1976 additions and 2134 deletions
111
frontend/src/views/settings/Account.vue
Normal file
111
frontend/src/views/settings/Account.vue
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Public info</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="mb-3">
|
||||
<label class="form-label"
|
||||
for="inputUsername">Username</label>
|
||||
<input type="text" class="form-control" id="inputUsername"
|
||||
placeholder="Username">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label"
|
||||
for="inputUsername">Biography</label>
|
||||
<textarea rows="2" class="form-control" id="inputBio"
|
||||
placeholder="Tell something about yourself"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="text-center">
|
||||
<img alt="Charles Hall"
|
||||
src="/assets/img/avatars/avatar.png"
|
||||
class="rounded-circle img-responsive mt-2" width="128"
|
||||
height="128"/>
|
||||
<div class="mt-2">
|
||||
<span class="btn btn-primary"><i
|
||||
class="fas fa-upload"></i> Upload</span>
|
||||
</div>
|
||||
<small>For best results, use an image at least 128px by
|
||||
128px in .jpg format</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Private info</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="mb-3 col-md-6">
|
||||
<label class="form-label" for="inputFirstName">First
|
||||
name</label>
|
||||
<input type="text" class="form-control" id="inputFirstName"
|
||||
placeholder="First name">
|
||||
</div>
|
||||
<div class="mb-3 col-md-6">
|
||||
<label class="form-label" for="inputLastName">Last name</label>
|
||||
<input type="text" class="form-control" id="inputLastName"
|
||||
placeholder="Last name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="inputEmail4">Email</label>
|
||||
<input type="email" class="form-control" id="inputEmail4"
|
||||
placeholder="Email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="inputAddress">Address</label>
|
||||
<input type="text" class="form-control" id="inputAddress"
|
||||
placeholder="1234 Main St">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="inputAddress2">Address 2</label>
|
||||
<input type="text" class="form-control" id="inputAddress2"
|
||||
placeholder="Apartment, studio, or floor">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3 col-md-6">
|
||||
<label class="form-label" for="inputCity">City</label>
|
||||
<input type="text" class="form-control" id="inputCity">
|
||||
</div>
|
||||
<div class="mb-3 col-md-4">
|
||||
<label class="form-label" for="inputState">State</label>
|
||||
<select id="inputState" class="form-control">
|
||||
<option selected>Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3 col-md-2">
|
||||
<label class="form-label" for="inputZip">Zip</label>
|
||||
<input type="text" class="form-control" id="inputZip">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Account',
|
||||
components: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
147
frontend/src/views/settings/Data.vue
Normal file
147
frontend/src/views/settings/Data.vue
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-0">Backup Account Key</h5>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label d-block">Backup your account key</label>
|
||||
<button type="button" class="btn btn-primary" @click="exportKey">
|
||||
Backup
|
||||
</button>
|
||||
<br>
|
||||
<small>Backup your account key to restore your account in case
|
||||
of loss</small>
|
||||
<br>
|
||||
<p>{{ localUserIdentityRecord }}</p>
|
||||
|
||||
<vue-qrcode :value="'foo'" tag="svg" :size="200" :options="{errorCorrectionLevel: 'H'}"></vue-qrcode>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-0">Export</h5>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label
|
||||
d-block">Download your data</label>
|
||||
<button type="button" class="btn btn-primary" @click="exportData">
|
||||
Download
|
||||
</button>
|
||||
<br>
|
||||
<small>Download all your data including photos, videos,
|
||||
comments, profile information and more</small>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label
|
||||
d-block">Delete your data</label>
|
||||
<button type="button" class="btn btn-danger" @click="deleteData">
|
||||
Delete
|
||||
</button>
|
||||
<br>
|
||||
<small>Delete all your data including photos, videos,
|
||||
comments, profile information and more</small>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-0">Import</h5>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label
|
||||
d-block">Import data</label>
|
||||
<div class="btn-group">
|
||||
<input type="file" class="form-control" id="inputFile"
|
||||
accept=".zip" @change="chooseFile">
|
||||
<button type="button" class="btn btn-primary" @click="importData"
|
||||
:disabled="!selectedFile">
|
||||
Import
|
||||
</button>
|
||||
</div>
|
||||
<br>
|
||||
<small>Import data from backup or other instances</small>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions, mapGetters, mapMutations} from 'vuex';
|
||||
import router from "@/router";
|
||||
|
||||
//import VueQrcode from '@chenfengyuan/vue-qrcode';
|
||||
|
||||
export default {
|
||||
name: 'Data',
|
||||
components: {},
|
||||
data: () => ({
|
||||
selectedFile: null,
|
||||
localUserIdentityRecord: null
|
||||
}),
|
||||
computed: {
|
||||
...mapGetters(['signAuth'])
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getHomeServers', 'userIdentityRecord']),
|
||||
chooseFile(event) {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
this.selectedFile = file;
|
||||
}
|
||||
},
|
||||
deleteData() {
|
||||
if (confirm('Are you sure you want to delete your data?')) {
|
||||
alert('Data deleted');
|
||||
}
|
||||
},
|
||||
exportKey() {
|
||||
const key = this.userIdentityRecord;
|
||||
},
|
||||
async importData() {
|
||||
if (!this.selectedFile) {
|
||||
alert('Please select a file to import');
|
||||
return;
|
||||
}
|
||||
alert('Data import not implemented');
|
||||
return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', this.selectedFile);
|
||||
console.log(formData);
|
||||
const servers = await this.getHomeServers();
|
||||
const data = await servers.postRaw(this.signHashedAuth, '/api/import/', formData);
|
||||
console.log(data);
|
||||
},
|
||||
async exportData() {
|
||||
const servers = await this.getHomeServers();
|
||||
const data = await servers.getRaw(this.signAuth, '/api/export/');
|
||||
const blob = new Blob([await data.blob()], {type: 'application/zip'});
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
const date_str = new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '').replace(/:/g, '-');
|
||||
a.download = 'toolshed_data_' + date_str + '.zip';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.userIdentityRecord({}).then((data) => {
|
||||
this.localUserIdentityRecord = data;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
41
frontend/src/views/settings/Email.vue
Normal file
41
frontend/src/views/settings/Email.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-0">Email notifications</h5>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label d-block">Email notifications</label>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check input-switch" type="checkbox"
|
||||
id="flexSwitchCheckDefault">
|
||||
<label class="form-check label-switch" for="flexSwitchCheckDefault">Receive
|
||||
email notifications</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label d-block">Send email notifications to</label>
|
||||
<input type="email" class="form-control"
|
||||
id="inputEmail">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Save
|
||||
changes
|
||||
</button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Email',
|
||||
components: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
42
frontend/src/views/settings/Notifications.vue
Normal file
42
frontend/src/views/settings/Notifications.vue
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-0">Web notifications</h5>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label d-block">Web notifications</label>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check input-switch" type="checkbox"
|
||||
id="flexSwitchCheckDefault">
|
||||
<label class="form-check label-switch" for="flexSwitchCheckDefault">Receive
|
||||
web notifications</label>
|
||||
<small>These notifications can be sent to your email or
|
||||
phone</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label d-block">Send web notifications to</label>
|
||||
<input type="email" class="form-control"
|
||||
id="inputEmail">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Notifications',
|
||||
components: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
41
frontend/src/views/settings/Password.vue
Normal file
41
frontend/src/views/settings/Password.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Password</h5>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="inputPasswordCurrent">Current
|
||||
password</label>
|
||||
<input type="password" class="form-control"
|
||||
id="inputPasswordCurrent">
|
||||
<small><a href="#">Forgot your password?</a></small>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="inputPasswordNew">New
|
||||
password</label>
|
||||
<input type="password" class="form-control" id="inputPasswordNew">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="inputPasswordNew2">Verify
|
||||
password</label>
|
||||
<input type="password" class="form-control" id="inputPasswordNew2">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Password',
|
||||
components: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
68
frontend/src/views/settings/Privacy.vue
Normal file
68
frontend/src/views/settings/Privacy.vue
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Privacy and safety</h5>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label d-block">Profile visibility</label>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check input-switch" type="checkbox"
|
||||
id="flexSwitchCheckDefault">
|
||||
<label class="form-check
|
||||
label-switch" for="flexSwitchCheckDefault">Visible to
|
||||
everyone</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label
|
||||
d-block">Photo visibility</label>
|
||||
<div class="form-check
|
||||
form-switch">
|
||||
<input class="form-check
|
||||
input-switch" type="checkbox"
|
||||
id="flexSwitchCheckDefault">
|
||||
<label class="form-check
|
||||
label-switch" for="flexSwitchCheckDefault">Visible to
|
||||
everyone</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label
|
||||
d-block">Last seen</label>
|
||||
<div class="form-check
|
||||
form-switch">
|
||||
<input class="form-check
|
||||
input-switch" type="checkbox"
|
||||
id="flexSwitchCheckDefault">
|
||||
<label class="form-check
|
||||
label-switch" for="flexSwitchCheckDefault">Visible to
|
||||
everyone</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Save
|
||||
changes
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small>Changes will be reflected to all your devices</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapActions, mapGetters, mapMutations} from 'vuex';
|
||||
import router from "@/router";
|
||||
|
||||
export default {
|
||||
name: 'Privacy',
|
||||
components: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue