Skip to content

Commit 942d0fe

Browse files
felixeversfelixevers
committed
update alertbox styles
1 parent ddd0828 commit 942d0fe

11 files changed

Lines changed: 90 additions & 18 deletions

File tree

‎locales/de-DE.arb‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,14 @@
148148
"@passwordSectionTitle": {
149149
"description": "Passwort-Abschnittsüberschrift"
150150
},
151+
"securitySectionTitle": "Sicherheit",
152+
"@securitySectionTitle": {
153+
"description": "Sicherheits-Abschnittsüberschrift"
154+
},
155+
"dangerZoneTitle": "Gefahrenzone",
156+
"@dangerZoneTitle": {
157+
"description": "Gefahrenzone-Abschnittsüberschrift"
158+
},
151159
"doCancel": "Abbrechen",
152160
"@doCancel": {
153161
"description": "Abbrechen Button Text"
@@ -180,6 +188,10 @@
180188
"@doRestart": {
181189
"description": "Neu starten Button Text"
182190
},
191+
"sessionExpired": "Die für die Verbindung vorgesehene Zeit ist abgelaufen.\nDer Anmeldevorgang wird von vorne begonnen.",
192+
"@sessionExpired": {
193+
"description": "Sitzung/Timeout abgelaufen Nachricht"
194+
},
183195
"deleteAccountConfirm": "Möchten Sie Ihr Konto wirklich löschen?",
184196
"@deleteAccountConfirm": {
185197
"description": "Konto-Löschungsbestätigungsnachricht"

‎locales/en-US.arb‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,14 @@
148148
"@passwordSectionTitle": {
149149
"description": "Password section title"
150150
},
151+
"securitySectionTitle": "Security",
152+
"@securitySectionTitle": {
153+
"description": "Security section title"
154+
},
155+
"dangerZoneTitle": "Danger zone",
156+
"@dangerZoneTitle": {
157+
"description": "Danger zone section title"
158+
},
151159
"doCancel": "Cancel",
152160
"@doCancel": {
153161
"description": "Cancel button text"
@@ -180,6 +188,10 @@
180188
"@doRestart": {
181189
"description": "Restart button text"
182190
},
191+
"sessionExpired": "The time allotted for the connection has elapsed.\nThe login process will restart from the beginning.",
192+
"@sessionExpired": {
193+
"description": "Session/timeout expired message"
194+
},
183195
"deleteAccountConfirm": "Are you sure you want to delete your account?",
184196
"@deleteAccountConfirm": {
185197
"description": "Delete account confirmation message"

‎src/account/components/AccountPageLayout.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useEffect } from 'react'
22
import type { ReactNode } from 'react'
33
import type { KcContext } from '../KcContext'
44
import { Branding } from '../../login/components/Branding'
5+
import { RealmChip } from '../../login/components/RealmChip'
56
import { ThemeSwitcher } from '../../login/components/ThemeSwitcher'
67
import { LanguageSwitcher } from '../../login/components/LanguageSwitcher'
78
import { Footer } from '../../login/components/Footer'
@@ -45,6 +46,9 @@ export function AccountPageLayout({ kcContext, children }: AccountPageLayoutProp
4546

4647
<div className="flex flex-col items-center justify-center flex-1 w-[360px] max-w-[360px] mx-auto py-8 px-4 md:w-full md:max-w-[360px] md:py-6 md:px-4 sm:w-full sm:max-w-full sm:py-4 sm:px-2">
4748
<Branding animate="none" />
49+
<div className="mb-6">
50+
<RealmChip kcContext={kcContext} />
51+
</div>
4852

4953
<div className="w-full max-w-full box-border [&_form]:w-full [&_form]:max-w-full [&_form]:box-border [&_>*]:w-full [&_>*]:max-w-full [&_>*]:box-border [&_input]:w-full [&_input]:max-w-full [&_input]:box-border [&_button]:w-full [&_button]:max-w-full [&_button]:box-border">
5054
{children}

‎src/account/pages/AccountSettings.tsx‎

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState } from 'react'
2-
import { Key, Save } from 'lucide-react'
3-
import { Avatar, Button, Chip, Input, FormFieldLayout } from '@helpwave/hightide'
2+
import { Key, Save, Trash2 } from 'lucide-react'
3+
import { Avatar, Button, Chip, ConfirmDialog, DialogRoot, Input, FormFieldLayout } from '@helpwave/hightide'
44
import type { KcContext } from '../KcContext'
55
import { useTranslation } from '../../i18n/useTranslation'
66
import { useTranslatedFieldError } from '../../login/utils/translateFieldError'
@@ -26,6 +26,7 @@ export default function AccountSettings({ kcContext }: AccountSettingsProps) {
2626
const [email, setEmail] = useState(account.email ?? '')
2727
const [firstName, setFirstName] = useState(account.firstName ?? '')
2828
const [lastName, setLastName] = useState(account.lastName ?? '')
29+
const [deleteAccountDialogOpen, setDeleteAccountDialogOpen] = useState(false)
2930

3031
const displayName = getDisplayName(kcContext)
3132
const avatarImage = undefined
@@ -167,9 +168,9 @@ export default function AccountSettings({ kcContext }: AccountSettingsProps) {
167168

168169
<hr className="border-[var(--color-border)]" />
169170

170-
<section className="flex flex-col gap-3">
171+
<section className="flex flex-col gap-4">
171172
<h2 className="text-lg font-bold text-[var(--color-label)]">
172-
{t('passwordSectionTitle')}
173+
{t('securitySectionTitle')}
173174
</h2>
174175
<Button
175176
type="button"
@@ -182,6 +183,38 @@ export default function AccountSettings({ kcContext }: AccountSettingsProps) {
182183
<Key className="w-4 h-4" />
183184
{t('updatePassword')}
184185
</Button>
186+
<div>
187+
<DialogRoot
188+
isOpen={deleteAccountDialogOpen}
189+
onIsOpenChange={setDeleteAccountDialogOpen}
190+
isModal
191+
>
192+
<ConfirmDialog
193+
titleElement={t('doDeleteAccount')}
194+
description={t('deleteAccountConfirm')}
195+
confirmType="negative"
196+
onCancel={() => setDeleteAccountDialogOpen(false)}
197+
onConfirm={() => {
198+
setDeleteAccountDialogOpen(false)
199+
window.location.href = url.accountUrl.replace(/\/$/, '') + '/delete-account'
200+
}}
201+
buttonOverwrites={[
202+
{ text: t('doCancel') },
203+
undefined,
204+
{ text: t('doDeleteAccount') }
205+
]}
206+
/>
207+
</DialogRoot>
208+
<Button
209+
type="button"
210+
color="negative"
211+
coloringStyle="outline"
212+
onClick={() => setDeleteAccountDialogOpen(true)}
213+
>
214+
<Trash2 className="w-4 h-4" />
215+
{t('doDeleteAccount')}
216+
</Button>
217+
</div>
185218
</section>
186219

187220
<hr className="border-[var(--color-border)]" />

‎src/i18n/translations.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export type HelpwaveIdTranslationEntries = {
1616
'backToAccount': string,
1717
'backToApplication': string,
1818
'backToLogin': string,
19+
'dangerZoneTitle': string,
1920
'deleteAccountConfirm': string,
2021
'deleteCredentialConfirm': string,
2122
'doAccept': string,
@@ -144,8 +145,10 @@ export type HelpwaveIdTranslationEntries = {
144145
'rememberMe': string,
145146
'resetOtpMessage': string,
146147
'samlPostFormMessage': string,
148+
'securitySectionTitle': string,
147149
'selectAuthenticatorTitle': string,
148150
'selectOrganizationTitle': string,
151+
'sessionExpired': string,
149152
'successAccountUpdated': string,
150153
'successEmailSent': string,
151154
'successMobileAuthenticatorConfigured': string,
@@ -171,6 +174,7 @@ export const helpwaveIdTranslation: Translation<HelpwaveIdTranslationLocales, Pa
171174
'backToAccount': `Zurück zum Konto`,
172175
'backToApplication': `Zurück zur Anwendung`,
173176
'backToLogin': `Zurück zur Anmeldung`,
177+
'dangerZoneTitle': `Gefahrenzone`,
174178
'deleteAccountConfirm': `Möchten Sie Ihr Konto wirklich löschen?`,
175179
'deleteCredentialConfirm': `Möchten Sie diese Anmeldedaten wirklich löschen?`,
176180
'doAccept': `Akzeptieren`,
@@ -304,8 +308,11 @@ export const helpwaveIdTranslation: Translation<HelpwaveIdTranslationLocales, Pa
304308
'rememberMe': `Angemeldet bleiben`,
305309
'resetOtpMessage': `Ihr OTP wurde zurückgesetzt. Bitte konfigurieren Sie ein neues.`,
306310
'samlPostFormMessage': `Weiterleitung zum Identitätsanbieter...`,
311+
'securitySectionTitle': `Sicherheit`,
307312
'selectAuthenticatorTitle': `Authentifikator auswählen`,
308313
'selectOrganizationTitle': `Organisation auswählen`,
314+
'sessionExpired': `Die für die Verbindung vorgesehene Zeit ist abgelaufen.
315+
Der Anmeldevorgang wird von vorne begonnen.`,
309316
'successAccountUpdated': `Ihr Konto wurde aktualisiert`,
310317
'successEmailSent': `Sie sollten in Kürze eine E-Mail mit weiteren Anweisungen erhalten.`,
311318
'successMobileAuthenticatorConfigured': `Mobiler Authentifikator konfiguriert`,
@@ -329,6 +336,7 @@ export const helpwaveIdTranslation: Translation<HelpwaveIdTranslationLocales, Pa
329336
'backToAccount': `Back to Account`,
330337
'backToApplication': `Back to Application`,
331338
'backToLogin': `Back to Login`,
339+
'dangerZoneTitle': `Danger zone`,
332340
'deleteAccountConfirm': `Are you sure you want to delete your account?`,
333341
'deleteCredentialConfirm': `Are you sure you want to delete this credential?`,
334342
'doAccept': `Accept`,
@@ -462,8 +470,11 @@ export const helpwaveIdTranslation: Translation<HelpwaveIdTranslationLocales, Pa
462470
'rememberMe': `Remember me`,
463471
'resetOtpMessage': `Your OTP has been reset. Please configure a new one.`,
464472
'samlPostFormMessage': `Redirecting to identity provider...`,
473+
'securitySectionTitle': `Security`,
465474
'selectAuthenticatorTitle': `Select Authenticator`,
466475
'selectOrganizationTitle': `Select Organization`,
476+
'sessionExpired': `The time allotted for the connection has elapsed.
477+
The login process will restart from the beginning.`,
467478
'successAccountUpdated': `Your account has been updated`,
468479
'successEmailSent': `You should receive an email shortly with further instructions.`,
469480
'successMobileAuthenticatorConfigured': `Mobile authenticator configured`,

‎src/login/components/AlertBox.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,19 @@ type AlertBoxProps = {
1414

1515
const borderColorBySentiment: Record<MessageSentiment, string> = {
1616
negative: 'var(--color-negative-hover)',
17-
neutral: 'var(--color-warning)',
17+
neutral: 'var(--color-border)',
1818
positive: 'var(--color-positive-hover)'
1919
}
2020

2121
const bgColorBySentiment: Record<MessageSentiment, string> = {
2222
negative: 'var(--color-negative)',
23-
neutral: 'var(--color-surface-warning)',
23+
neutral: 'var(--color-surface)',
2424
positive: 'var(--color-green-100)'
2525
}
2626

2727
const textColorBySentiment: Record<MessageSentiment, string> = {
2828
negative: 'var(--color-on-negative)',
29-
neutral: 'var(--color-orange-900)',
29+
neutral: 'var(--color-label)',
3030
positive: 'var(--color-green-900)'
3131
}
3232

@@ -53,7 +53,7 @@ export function AlertBox({ message, className = '', sentiment: sentimentProp }:
5353
color: textColor
5454
}}
5555
>
56-
<p className="m-0 block w-full break-words">{translatedSummary}</p>
56+
<p className="m-0 block w-full break-words whitespace-pre-line">{translatedSummary}</p>
5757
</div>
5858
)
5959
}

‎src/login/components/Branding.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ type BrandingProps = {
66

77
export function Branding({ animate = 'loading' }: BrandingProps) {
88
return (
9-
<div className="flex flex-col items-center mb-4">
9+
<div className="flex flex-col items-center">
1010
<HelpwaveLogo animate={animate} height={96} width={96} animationDuration={5} />
1111
<div className="font-space text-4xl -translate-y-8 font-[900]">
1212
helpwave id

‎src/login/components/Footer.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,13 @@ export function Footer() {
44
const t = useTranslation()
55

66
return (
7-
<div
8-
className="text-center text-sm pt-4"
9-
>
7+
<div className="text-center text-sm pt-4">
108
<div className="mb-2">
119
<a
1210
href="https://cdn.helpwave.de/imprint.html"
1311
target="_blank"
1412
rel="noopener noreferrer"
1513
className="mx-2 sm:mx-1"
16-
style={{ color: 'var(--color-text-secondary)' }}
1714
>
1815
{t('imprint')}
1916
</a>
@@ -23,7 +20,6 @@ export function Footer() {
2320
target="_blank"
2421
rel="noopener noreferrer"
2522
className="mx-2 sm:mx-1"
26-
style={{ color: 'var(--color-text-secondary)' }}
2723
>
2824
{t('privacy')}
2925
</a>

‎src/login/components/PageLayout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@ export function PageLayout({ kcContext, children }: PageLayoutProps) {
2626

2727
<div className="flex flex-col items-center justify-center flex-1 w-[360px] max-w-[360px] mx-auto py-8 px-4 md:w-full md:max-w-[360px] md:py-6 md:px-4 sm:w-full sm:max-w-full sm:py-4 sm:px-2">
2828
<Branding />
29-
<RealmChip kcContext={kcContext} />
29+
<div className="mb-6">
30+
<RealmChip kcContext={kcContext} />
31+
</div>
3032

3133
<div className="w-full max-w-full box-border [&_form]:w-full [&_form]:max-w-full [&_form]:box-border [&_>*]:w-full [&_>*]:max-w-full [&_>*]:box-border [&_input]:w-full [&_input]:max-w-full [&_input]:box-border [&_button]:w-full [&_button]:max-w-full [&_button]:box-border">
3234
{children}

‎src/login/components/RealmChip.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { Chip } from '@helpwave/hightide'
2-
import type { KcContext } from '../KcContext'
32
import { getRealmColor } from '../utils/realmColor'
43

54
type RealmChipProps = {
6-
kcContext: KcContext,
5+
kcContext: { realm: { name?: string, realm?: string } },
76
};
87

98
export function RealmChip({ kcContext }: RealmChipProps) {

0 commit comments

Comments
 (0)