Skip to content

Commit aad2146

Browse files
PavelLaptevestib-vega
PavelLaptev
authored and
estib-vega
committed
Refactor auth pages to use AuthUtilityLayout
Renamed PasswordPageLayout to AuthUtilityLayout and updated confirm-password, forgot-password, and resend-confirmation pages to use the new layout. Simplified and unified the resend-confirmation page UI, replacing custom markup with shared components (EmailTextbox, InfoMessage). Also removed the default placeholder from EmailTextbox.
1 parent 0209cef commit aad2146

File tree

5 files changed

+58
-148
lines changed

5 files changed

+58
-148
lines changed

‎apps/web/src/lib/components/auth/PasswordPageLayout.svelte‎ renamed to ‎apps/web/src/lib/components/auth/AuthUtilityLayout.svelte‎

File renamed without changes.

‎apps/web/src/routes/(app)/login/confirm-password/+page.svelte‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
import { page } from '$app/state';
33
import RedirectIfLoggedIn from '$lib/auth/RedirectIfLoggedIn.svelte';
44
import { AUTH_SERVICE } from '$lib/auth/authService.svelte';
5+
import AuthUtilityLayout from '$lib/components/auth/AuthUtilityLayout.svelte';
56
import PasswordConfirmation from '$lib/components/auth/PasswordConfirmation.svelte';
6-
import PasswordPageLayout from '$lib/components/auth/PasswordPageLayout.svelte';
77
import { inject } from '@gitbutler/core/context';
88
import { LOGIN_SERVICE } from '@gitbutler/shared/login/loginService';
99
import { Button, InfoMessage } from '@gitbutler/ui';
@@ -58,7 +58,7 @@
5858

5959
<RedirectIfLoggedIn />
6060

61-
<PasswordPageLayout title="Confirm new password">
61+
<AuthUtilityLayout title="Confirm new password">
6262
<div class="form-content">
6363
<PasswordConfirmation
6464
bind:this={passwordComponent}
@@ -67,25 +67,25 @@
6767
showValidation={true}
6868
/>
6969

70-
<Button type="submit" style="pop" onclick={handleSubmit}>Confirm Password</Button>
71-
7270
{#if error}
73-
<InfoMessage filled outlined={false} style="error" class="m-top-16">
71+
<InfoMessage filled outlined={false} style="error">
7472
{#snippet content()}
7573
{error}
7674
{/snippet}
7775
</InfoMessage>
7876
{/if}
7977

8078
{#if message}
81-
<InfoMessage filled outlined={false} style="success" class="m-top-16">
79+
<InfoMessage filled outlined={false} style="success">
8280
{#snippet content()}
8381
{message}
8482
{/snippet}
8583
</InfoMessage>
8684
{/if}
85+
86+
<Button type="submit" style="pop" onclick={handleSubmit}>Confirm Password</Button>
8787
</div>
88-
</PasswordPageLayout>
88+
</AuthUtilityLayout>
8989

9090
<style lang="postcss">
9191
.form-content {

‎apps/web/src/routes/(app)/login/forgot-password/+page.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import RedirectIfLoggedIn from '$lib/auth/RedirectIfLoggedIn.svelte';
3-
import PasswordPageLayout from '$lib/components/auth/PasswordPageLayout.svelte';
3+
import AuthUtilityLayout from '$lib/components/auth/AuthUtilityLayout.svelte';
44
import { inject } from '@gitbutler/core/context';
55
import { LOGIN_SERVICE } from '@gitbutler/shared/login/loginService';
66
import { Button, EmailTextbox, InfoMessage } from '@gitbutler/ui';
@@ -36,7 +36,7 @@
3636

3737
<RedirectIfLoggedIn />
3838

39-
<PasswordPageLayout title={isLinkSent ? 'Link sent!' : 'Forgot password?'}>
39+
<AuthUtilityLayout title={isLinkSent ? 'Link sent!' : 'Forgot password?'}>
4040
{#if isLinkSent}
4141
<p class="text-13 text-body">
4242
We've sent a password reset link to: <i class="clr-text-2">{sentToEmail}</i>
@@ -57,7 +57,7 @@
5757
</InfoMessage>
5858
{/if}
5959
{/if}
60-
</PasswordPageLayout>
60+
</AuthUtilityLayout>
6161

6262
<style lang="postcss">
6363
.service-form__inputs {

‎apps/web/src/routes/(app)/signup/resend-confirmation/+page.svelte‎

Lines changed: 48 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<script lang="ts">
22
import { page } from '$app/state';
3+
import AuthUtilityLayout from '$lib/components/auth/AuthUtilityLayout.svelte';
34
import { inject } from '@gitbutler/core/context';
45
import { LOGIN_SERVICE } from '@gitbutler/shared/login/loginService';
5-
import { Button, SectionCard } from '@gitbutler/ui';
6+
import { Button, InfoMessage, EmailTextbox } from '@gitbutler/ui';
67
78
let error = $state<string>();
8-
let notice = $state<string>();
9+
let message = $state<string>();
910
1011
const loginService = inject(LOGIN_SERVICE);
1112
@@ -31,145 +32,55 @@
3132
error = response.errorMessage;
3233
console.error('Failed to resend confirmation email:', response.raw ?? response.errorMessage);
3334
} else {
34-
notice = 'Confirmation email resent. Please check your inbox.';
35+
message = 'Confirmation email resent. Please check your inbox.';
3536
}
3637
}
3738
</script>
3839

3940
<svelte:head>
40-
<title>GitButler | Sign Up</title>
41+
<title>GitButler | Resend Confirmation</title>
4142
</svelte:head>
4243

43-
{#if banner}
44-
<div class="banner">
45-
<span>{banner}</span>
46-
</div>
47-
{/if}
48-
49-
<div class="resend-confirmation-email">
50-
<SectionCard>
51-
<h1 class="title">Resend Confirmation Email</h1>
52-
{#if email}
53-
<p>
54-
We will send a confirmation email to <strong>{email}</strong>.
55-
</p>
56-
{:else}
57-
<p>Please provide your email address to resend the confirmation email.</p>
58-
59-
<div class="field">
60-
<label for="email">Email</label>
61-
<input id="email" type="email" bind:value={inputEmail} required />
62-
</div>
63-
{/if}
64-
65-
<Button style="pop" disabled={!emailToSendTo} onclick={resendConfirmationEmail}
66-
>Resend Confirmation Email</Button
67-
>
68-
69-
{#if error}
70-
<div class="error-message">
71-
<span>
72-
{error}
73-
</span>
74-
</div>
75-
{/if}
76-
77-
{#if notice}
78-
<div class="notice-message">
79-
<span>
80-
{notice}
81-
</span>
82-
</div>
83-
{/if}
84-
</SectionCard>
85-
</div>
86-
87-
<style lang="postcss">
88-
.banner {
89-
display: flex;
90-
align-items: center;
91-
justify-content: center;
92-
max-width: 400px;
93-
margin: 0 auto;
94-
margin-bottom: 16px;
95-
padding: 16px;
96-
border: var(--clr-scale-err-60) 1px solid;
97-
border-radius: var(--radius-m);
98-
background-color: var(--clr-theme-err-bg-muted);
99-
color: var(--clr-scale-err-10);
100-
font-size: 14px;
101-
}
102-
103-
.resend-confirmation-email {
104-
display: flex;
105-
flex-direction: column;
106-
max-width: 400px;
107-
margin: 0 auto;
108-
gap: 16px;
109-
}
110-
111-
.title {
112-
align-self: flex-start;
113-
color: var(--clr-scale-ntrl-0);
114-
font-weight: 600;
115-
font-size: 24px;
116-
}
117-
118-
.field {
119-
display: flex;
120-
flex-direction: column;
121-
gap: 4px;
122-
123-
label {
124-
color: var(--clr-scale-ntrl-30);
125-
font-size: 14px;
126-
}
127-
128-
input {
129-
padding: 8px 12px;
130-
border: 1px solid var(--clr-border-2);
131-
border-radius: var(--radius-m);
132-
background-color: var(--clr-bg-1);
133-
color: var(--clr-scale-ntrl-0);
134-
font-size: 14px;
135-
136-
&:read-only {
137-
cursor: not-allowed;
138-
opacity: 0.7;
139-
}
140-
141-
&:not(:read-only) {
142-
&:focus {
143-
border-color: var(--clr-scale-pop-70);
144-
outline: none;
145-
}
146-
}
147-
}
148-
}
149-
150-
.error-message {
151-
display: flex;
152-
flex-direction: column;
153-
padding: 8px;
154-
gap: 8px;
155-
border: 1px solid var(--clr-scale-err-60);
156-
border-radius: var(--radius-m);
157-
158-
background-color: var(--clr-theme-err-bg-muted);
159-
color: var(--clr-scale-err-10);
160-
font-size: 14px;
161-
}
162-
163-
.notice-message {
164-
display: flex;
165-
flex-direction: column;
166-
padding: 8px;
167-
gap: 8px;
168-
border: 1px solid var(--clr-scale-succ-60);
169-
border-radius: var(--radius-m);
170-
171-
background-color: var(--clr-theme-succ-bg-muted);
172-
color: var(--clr-scale-succ-10);
173-
font-size: 14px;
174-
}
175-
</style>
44+
<AuthUtilityLayout title="Resend Confirmation">
45+
{#if email}
46+
<p class="text-13 text-body">
47+
We send a confirmation email to <i class="clr-text-2">{email}</i>.
48+
</p>
49+
{:else}
50+
<div class="stack-v gap-16">
51+
<EmailTextbox
52+
bind:value={inputEmail}
53+
label="Email"
54+
helperText="Your email to resend confirmation"
55+
/>
56+
57+
{#if error}
58+
<InfoMessage filled outlined={false} style="error">
59+
{#snippet content()}
60+
{error}
61+
{/snippet}
62+
</InfoMessage>
63+
{/if}
64+
65+
{#if message}
66+
<InfoMessage filled outlined={false} style="success">
67+
{#snippet content()}
68+
{message}
69+
{/snippet}
70+
</InfoMessage>
71+
{/if}
72+
73+
{#if banner}
74+
<InfoMessage filled outlined={false} style="warning">
75+
{#snippet content()}
76+
{banner}
77+
{/snippet}
78+
</InfoMessage>
79+
{/if}
80+
81+
<Button style="pop" disabled={!emailToSendTo} onclick={resendConfirmationEmail}
82+
>Resend Confirmation Email</Button
83+
>
84+
</div>
85+
{/if}
86+
</AuthUtilityLayout>

‎packages/ui/src/lib/components/EmailTextbox.svelte‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@
7171
type="text"
7272
bind:value
7373
error={emailError}
74-
placeholder={restProps.placeholder || 'Enter email address'}
7574
oninput={handleInput}
7675
onchange={handleChange}
7776
/>

0 commit comments

Comments
 (0)