Account.vue 2.25 KiB
<template>
<div
class="account-information"
style="width: 700px; max-width: 90vw;"
>
<!-- content -->
<q-card class="q-mb-md">
<q-card-section>
<q-avatar size="128px">
<img src="https://i.pravatar.cc/128" />
</q-avatar>
</q-card-section>
<q-card-section>
<div class="text-body1 text-weight-bold text-primary">Ricky Martin</div>
<div class="text-caption">ricky@martin.com</div>
<div class="text-caption">Member since: 2019/01/01</div>
</q-card-section>
</q-card>
<div class="text-h6 title-has-border">Sign in method</div>
<q-card flat>
<q-card-section class="row">
<div class="col">
<div class="text-caption">Current method:</div>
<div class="text-weight-bold">Email: ricky@martin.com</div>
</div>
<div class="col">
<q-btn
flat
color="red-9"
class="q-mr-sm"
>Sign in with Google</q-btn>
<q-btn
flat
color="blue-7"
class="q-mr-sm"
>Sign in with Fablabs.io</q-btn>
</div>
</q-card-section>
</q-card>
<div class="text-h6 title-has-border">Email address</div>
<div class="q-py-md">
<q-btn>Change email address</q-btn>
</div>
<div class="text-h6 title-has-border">Password</div>
<div class="q-py-md">
<q-form>
<p class="text-body2">
Choose a new password
</p>
<q-input
outlined=""
label="Password"
type="password"
></q-input>
<br />
<q-input
outlined=""
label="Confirm"
type="password"
/>
<q-btn
class="q-my-md"
type="submit"
>Save</q-btn>
</q-form>
</div>
<div class="text-h6 title-has-border">Disable account</div>
<div class="q-py-md">
<div class="text-body1 q-pb-md">
This will un-publish all your job postings and profile and disable your account.
</div>
<q-btn
color="red-7"
icon="delete_forever"
>Disable this account</q-btn>
</div>
</div>
</div>
</template>
<script>
export default {
// name: 'PageName',
}
</script>
<style>
</style>