bbell / src / components / Modals / Auth / CreateAccount.vue

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'

import { useAuthStore } from '@/stores/auth'
import { getProviderList, type HydratedProvider } from '@/utils/pds'

import Button from '../../UI/BaseButton.vue'
import Toggle from '../../UI/BaseCheckbox.vue'
import Modal from '../../UI/BaseModal.vue'
import PdsList from '../../PdsSelector.vue'

const auth = useAuthStore()

const providers = ref<HydratedProvider[]>([])
const selectedProvider = ref<HydratedProvider>()

const selectedHasHandlePolicy = computed(() => !!selectedProvider.value?.handlePolicy)
const hasAgreedToHandlePolicy = ref(false)

const canProgress = computed(() => {
	const selected = selectedProvider.value
	if (!selected) return false
	if (selectedHasHandlePolicy.value && hasAgreedToHandlePolicy.value) return true
	return !selected.handlePolicy
})

const pdsError = ref('')
const pdsInput = ref('')

async function submitPds() {
	const val =
		pdsInput.value.trim() === '' ? selectedProvider.value?.url.toString() : pdsInput.value.trim()
	if (!val) {
		pdsError.value = 'Enter a PDS URL or handle'
		return
	}
	await auth.login(val)
}

onMounted(async () => {
	providers.value = await getProviderList()
	if (providers.value.length) {
		selectedProvider.value = providers.value[0]
	} else {
		pdsError.value = 'No providers available'
	}
})

function selectProvider(provider: HydratedProvider) {
	hasAgreedToHandlePolicy.value = false
	selectedProvider.value = provider
}
</script>

<template>
	<Modal title="Create an account" width="600px">
		<div class="modal-body">
			<p>
				Choose a provider to host your account. You can migrate to a different provider later if
				needed.
			</p>

			<PdsList @select="selectProvider" />

			<div v-if="selectedProvider" class="provider-profile">
				<div class="profile-main">
					<div class="pds-info">
						<p class="pds-name">{{ selectedProvider.name }}</p>
						<p class="pds-location">{{ selectedProvider.location }}</p>
					</div>
				</div>

				<div
					class="policy-transition-wrapper"
					:class="{ open: selectedHasHandlePolicy }"
					:inert="!selectedHasHandlePolicy"
				>
					<div class="policy-inner">
						<div class="policy-section">
							<div class="policy-notice">
								<p>
									This provider has restrictions on who can use what handles.
									<a :href="selectedProvider.handlePolicy?.toString() || '#'" class="policy-link">
										View terms here
									</a>
								</p>
							</div>
							<label class="policy-checkbox" :class="{ checked: hasAgreedToHandlePolicy }">
								<Toggle v-model="hasAgreedToHandlePolicy" id="policy-agree" />
								<span>I've read and accept these terms</span>
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>

		<template #footer>
			<Button variant="ghost" type="button" @click="$emit('close')">Cancel</Button>
			<Button
				variant="primary"
				:loading="auth.isLoading"
				@click="submitPds"
				type="button"
				:disabled="!canProgress"
			>
				Create account
			</Button>
		</template>
	</Modal>
</template>

<style lang="scss" scoped>
.modal-body {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.provider-list {
	margin-top: -0.75rem;
}

.provider-profile {
	background: hsla(var(--surface0) / 0.4);
	margin-left: -0.75rem;
	width: calc(100% + 1.5rem);
	border-radius: 1rem;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0;

	.profile-main {
		display: flex;
		align-items: center;
		gap: 1rem;

		.pds-info {
			display: flex;
			flex-direction: row;
			align-items: baseline;
			gap: 0.5rem;

			.pds-name {
				font-weight: 600;
				font-size: 1rem;
				color: hsla(var(--text));
				display: block;
			}

			.pds-location {
				font-size: 0.8rem;
				color: hsla(var(--text) / 0.6);
				display: block;
			}
		}
	}

	.policy-transition-wrapper {
		display: grid;
		grid-template-rows: 0fr;
		opacity: 0;

		&.open {
			grid-template-rows: 1fr;
			opacity: 1;
		}
	}

	.policy-inner {
		overflow: hidden;
		min-height: 0;
	}

	.policy-section {
		border-top: 1px dashed hsla(var(--accent) / 0.5);
		margin-top: 0.5rem;
		padding-top: 0.5rem;

		display: flex;
		flex-direction: column;
		gap: 0.25rem;

		.policy-notice {
			font-size: 0.85rem;
			color: hsl(var(--subtext1));

			.policy-link {
				color: hsla(var(--accent));
				text-decoration: none;
				font-weight: 700;

				&:hover {
					text-decoration: underline;
				}
			}
		}

		.policy-checkbox {
			display: flex;
			align-items: center;
			gap: 0.75rem;

			span {
				font-size: 0.85rem;
				user-select: none;
			}
		}
	}
}

.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}
</style>