209 lines
No EOL
12 KiB
Vue
209 lines
No EOL
12 KiB
Vue
<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 active" data-toggle="list"
|
|
href="#account" role="tab">
|
|
Account
|
|
</a>
|
|
<a class="list-group-item list-group-item-action" data-toggle="list"
|
|
href="#password" role="tab">
|
|
Password
|
|
</a>
|
|
<a class="list-group-item list-group-item-action" data-toggle="list" href="#"
|
|
role="tab">
|
|
Privacy and safety
|
|
</a>
|
|
<a class="list-group-item list-group-item-action" data-toggle="list" href="#"
|
|
role="tab">
|
|
Email notifications
|
|
</a>
|
|
<a class="list-group-item list-group-item-action" data-toggle="list" href="#"
|
|
role="tab">
|
|
Web notifications
|
|
</a>
|
|
<a class="list-group-item list-group-item-action" data-toggle="list" href="#"
|
|
role="tab">
|
|
Widgets
|
|
</a>
|
|
<a class="list-group-item list-group-item-action" data-toggle="list" href="#"
|
|
role="tab">
|
|
Your data
|
|
</a>
|
|
<a class="list-group-item list-group-item-action" data-toggle="list" href="#"
|
|
role="tab">
|
|
Delete account
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-9 col-xl-10">
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade show active" 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="/static/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" 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>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
</BaseLayout>
|
|
</template>
|
|
|
|
<script>
|
|
import BaseLayout from "@/components/BaseLayout.vue";
|
|
|
|
export default {
|
|
name: 'Settings',
|
|
components: {BaseLayout},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |