new component PassphraseBox

gitbutler-ui/src/lib/components/CommitListFooter.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import PassphraseBox from './PassphraseBox.svelte';
 	import PushButton, { BranchAction } from './PushButton.svelte';
 	import { BranchService } from '$lib/branches/service';
 	import Button from '$lib/components/Button.svelte';
@@ -59,11 +60,29 @@
 			isPushing = false;
 		}
 	}
+
+	let isPassphraseBoxVisible = false;
+	let passphraseInputValue = 'sdf';
+	let isSubmitting = false;
 </script>
 
 {#if !isUnapplied && type != 'integrated'}
 	<div class="actions" class:hasCommits>
-		{#if githubService.isEnabled && (type == 'local' || type == 'remote')}
+		{#if isPassphraseBoxVisible}
+			<PassphraseBox
+				bind:value={passphraseInputValue}
+				{isSubmitting}
+				on:submit={() => {
+					isSubmitting = true;
+					setTimeout(() => {
+						isSubmitting = false;
+					}, 2000);
+				}}
+				on:cancel={() => {
+					isPassphraseBoxVisible = false;
+				}}
+			/>
+		{:else if githubService.isEnabled && (type == 'local' || type == 'remote')}
 			<PushButton
 				wide
 				isLoading={isPushing || $githubServiceState$?.busy}
@@ -133,6 +152,9 @@
 		padding-left: var(--size-16);
 	}
 	.actions {
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-8);
 		&:empty {
 			display: none;
 		}

gitbutler-ui/src/lib/components/PassphraseBox.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+	import TextBox from './TextBox.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	export let prompt: string = 'passphrase';
+	export let value: string = '';
+	export let submitLabel: string = 'Submit';
+	export let submitDisabled: boolean = false;
+	export let isSubmitting: boolean = true;
+	export let loadingLabel: string = 'Pushing';
+
+	const dispatch = createEventDispatcher<{
+		change: string;
+		input: string;
+		submit: void;
+		cancel: void;
+	}>();
+</script>
+
+<div class="passbox">
+	<span class="text-base-body-11 passbox__helper-text"
+		>To push your changes, please provide your {prompt}</span
+	>
+	<TextBox
+		type="password"
+		bind:value
+		on:change={(e) => dispatch('change', e.detail)}
+		on:input={(e) => dispatch('input', e.detail)}
+		on:keydown={(e) => {
+			if (e.detail.key === 'Enter') {
+				dispatch('submit');
+			}
+		}}
+	/>
+	<div class="passbox__actions">
+		<Button
+			color="neutral"
+			disabled={isSubmitting}
+			kind="outlined"
+			on:click={() => dispatch('cancel')}>Cancel</Button
+		>
+		<Button
+			on:click={() => dispatch('submit')}
+			disabled={submitDisabled || isSubmitting}
+			grow
+			icon={isSubmitting ? 'spinner' : undefined}
+			>{!isSubmitting ? submitLabel : loadingLabel}</Button
+		>
+	</div>
+</div>
+
+<style>
+	.passbox {
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-8);
+		padding: var(--size-14);
+		border-radius: var(--radius-m);
+		background-color: var(--clr-theme-container-pale);
+	}
+
+	.passbox__helper-text {
+		color: var(--clr-theme-scale-ntrl-50);
+	}
+
+	.passbox__actions {
+		display: flex;
+		gap: var(--size-6);
+	}
+</style>

gitbutler-ui/src/lib/components/TextBox.svelte

@@ -20,7 +20,11 @@
 
 	export let type: 'text' | 'password' | 'select' = 'text';
 
-	const dispatch = createEventDispatcher<{ input: string; change: string }>();
+	const dispatch = createEventDispatcher<{
+		input: string;
+		change: string;
+		keydown: KeyboardEvent;
+	}>();
 
 	let showPassword = false;
 </script>
@@ -60,6 +64,7 @@
 			on:mousedown
 			on:input={(e) => dispatch('input', e.currentTarget.value)}
 			on:change={(e) => dispatch('change', e.currentTarget.value)}
+			on:keydown={(e) => dispatch('keydown', e)}
 		/>
 
 		{#if type == 'password'}