stash
This commit is contained in:
parent
448c166507
commit
17bfb84a94
62 changed files with 62258 additions and 107 deletions
382
frontend/src/views/Settings.vue
Normal file
382
frontend/src/views/Settings.vue
Normal file
|
|
@ -0,0 +1,382 @@
|
|||
<template>
|
||||
<BaseLayout>
|
||||
<main class="content">
|
||||
<div class="container-fluid p-0">
|
||||
|
||||
<h1 class="h3 mb-3">Settings</h1>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-xl-2">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Profile Settings</h5>
|
||||
</div>
|
||||
|
||||
<div class="list-group list-group-flush" role="tablist">
|
||||
<a class="list-group-item list-group-item-action" @click="active_tab = 'account'"
|
||||
:class="{ active: active_tab === 'account' }" href="#" role="tab">
|
||||
Account
|
||||
</a>
|
||||
<a class="list-group-item list-group-item-action" @click="active_tab = 'password'"
|
||||
:class="{ active: active_tab === 'password' }" href="#"
|
||||
role="tab">
|
||||
Password
|
||||
</a>
|
||||
<a class="list-group-item list-group-item-action" @click="active_tab = 'privacy'"
|
||||
:class="{ active: active_tab === 'privacy' }" href="#" role="tab">
|
||||
Privacy and safety
|
||||
</a>
|
||||
<a class="list-group-item list-group-item-action" @click="active_tab = 'email'"
|
||||
:class="{ active: active_tab === 'email' }" href="#" role="tab">
|
||||
Email notifications
|
||||
</a>
|
||||
<a class="list-group-item list-group-item-action" @click="active_tab = 'notifications'"
|
||||
:class="{ active: active_tab === 'notifications' }" href="#">
|
||||
Web notifications
|
||||
</a>
|
||||
<a class="list-group-item list-group-item-action" @click="active_tab = 'data'"
|
||||
:class="{ active: active_tab === 'data' }" href="#">
|
||||
Your data
|
||||
</a>
|
||||
<a class="list-group-item list-group-item-action delete" @click="deleteAccount"
|
||||
href="#">
|
||||
Delete account
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9 col-xl-10">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade" :class="{ 'show active': active_tab === 'account' }" id="account"
|
||||
role="tabpanel">
|
||||
|
||||
<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>
|
||||
<div class="tab-pane fade" :class="{ 'show active': active_tab === 'password' }"
|
||||
id="password" role="tabpanel">
|
||||
<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>
|
||||
<div class="tab-pane fade" :class="{ 'show active': active_tab === 'privacy' }" id="privacy"
|
||||
role="tabpanel">
|
||||
<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>
|
||||
<div class="tab-pane fade" :class="{ 'show active': active_tab === 'email' }" id="email"
|
||||
role="tabpanel">
|
||||
<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>
|
||||
<div class="tab-pane fade" :class="{ 'show active': active_tab === 'notifications' }"
|
||||
id="notifications" role="tabpanel">
|
||||
<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>
|
||||
<div class="tab-pane fade" :class="{ 'show active': active_tab === 'data' }" id="data"
|
||||
role="tabpanel">
|
||||
<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">Download</button>
|
||||
<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">Delete</button>
|
||||
<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>
|
||||
<button type="button" class="btn btn-primary">Import</button>
|
||||
<small>Import data from backup or other instances</small>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</BaseLayout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseLayout from "@/components/BaseLayout.vue";
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
components: {BaseLayout},
|
||||
data: () => ({
|
||||
active_tab: "account"
|
||||
}),
|
||||
methods: {
|
||||
deleteAccount() {
|
||||
if (confirm('Are you sure you want to delete your account?')) {
|
||||
alert('Account deleted');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.delete {
|
||||
color: var(--bs-danger);
|
||||
}
|
||||
|
||||
.delete:hover {
|
||||
color: var(--bs-light);
|
||||
background-color: var(--bs-danger);
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue