stash
This commit is contained in:
parent
c02b1588f2
commit
a83083d0eb
22 changed files with 1835 additions and 0 deletions
209
frontend/src/views/Settings.vue
Normal file
209
frontend/src/views/Settings.vue
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue