forked from jsnbuchanan/crowd-funder-for-time-pwa
3dbb836ae5
Changes: - Move v-model directives before other attributes - Move v-bind directives before event handlers - Reorder attributes for better readability - Fix template attribute ordering across components - Improve eslint rules - add default vite config for testing (handles nostr error too) This follows Vue.js style guide recommendations for attribute ordering and improves template consistency.
109 lines
2.8 KiB
Vue
109 lines
2.8 KiB
Vue
<!-- similar to ContactNameDialog -->
|
|
<template>
|
|
<div v-if="visible" class="dialog-overlay">
|
|
<div class="dialog">
|
|
<h1 class="text-xl font-bold text-center mb-4">Set Your Name</h1>
|
|
|
|
{{ sharingExplanation }}
|
|
<input
|
|
v-model="givenName"
|
|
type="text"
|
|
placeholder="Name"
|
|
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
|
|
/>
|
|
|
|
<div class="mt-8">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
|
<button
|
|
type="button"
|
|
class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
|
|
@click="onClickSaveChanges()"
|
|
>
|
|
Save
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
|
|
@click="onClickCancel()"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Component, Prop } from "vue-facing-decorator";
|
|
|
|
import { NotificationIface } from "../constants/app";
|
|
import { db, retrieveSettingsForActiveAccount } from "../db/index";
|
|
import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
|
|
|
|
@Component
|
|
export default class UserNameDialog extends Vue {
|
|
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
|
|
|
@Prop({
|
|
default:
|
|
"This is not sent to servers. It is only shared with people when you send it to them.",
|
|
})
|
|
sharingExplanation!: string;
|
|
@Prop({ default: false }) callbackOnCancel!: boolean;
|
|
|
|
callback: (name?: string) => void = () => {};
|
|
givenName = "";
|
|
visible = false;
|
|
|
|
/**
|
|
* @param aCallback - callback function for name, which may be ""
|
|
*/
|
|
async open(aCallback?: (name?: string) => void) {
|
|
this.callback = aCallback || this.callback;
|
|
const settings = await retrieveSettingsForActiveAccount();
|
|
this.givenName = settings.firstName || "";
|
|
this.visible = true;
|
|
}
|
|
|
|
async onClickSaveChanges() {
|
|
await db.settings.update(MASTER_SETTINGS_KEY, {
|
|
firstName: this.givenName,
|
|
});
|
|
this.visible = false;
|
|
this.callback(this.givenName);
|
|
}
|
|
|
|
onClickCancel() {
|
|
this.visible = false;
|
|
if (this.callbackOnCancel) {
|
|
this.callback();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.dialog-overlay {
|
|
z-index: 50;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.dialog {
|
|
background-color: white;
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
}
|
|
</style>
|