Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some settings v2 ui fixes #4956

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

Some settings v2 ui fixes #4956

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
419de74
Reflect changes in border radius immediately
tung2744 Dec 19, 2024
a3ed9b1
Fix hiding authgear logo is not working correctly
tung2744 Dec 19, 2024
8c05c9b
Remove horizontal padding in portal layout
tung2744 Dec 20, 2024
b21e3aa
Fix styles of settings session status
tung2744 Dec 20, 2024
fd98c56
Remove unused translation
tung2744 Dec 20, 2024
1fa927a
Generate translations
tung2744 Dec 20, 2024
787231f
Remove extra error alerts in settings
tung2744 Dec 20, 2024
5433f5e
Remove more extra error alerts
tung2744 Dec 20, 2024
b0a5b17
Fix newline is missing in recovery codes
tung2744 Dec 20, 2024
9f1b807
Remove all remaining alert messages
tung2744 Dec 20, 2024
17aa213
Reorder translations
tung2744 Dec 23, 2024
a44aee1
Remove unecessary dark selector
tung2744 Dec 23, 2024
858a932
Update .make-lint-translation-keys-expect
tung2744 Dec 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions authui/src/authflowv2/components/settings-action-item.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@
border-color: var(--settings-item__border-color);
border-bottom-width: 1px;
border-style: solid;
padding-left: var(--widget-content__px);
padding-right: var(--widget-content__px);

--icon-placeholder-display: none;
--icon-size: 1.5rem;
Expand Down
3 changes: 3 additions & 0 deletions authui/src/authflowv2/components/settings-content.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
}

.settings-content {
padding-left: var(--widget-content__px);
padding-right: var(--widget-content__px);

@media (min-width: theme("screens.tablet")) {
margin: 0 auto;
width: var(--settings-content__width);
Expand Down
9 changes: 2 additions & 7 deletions authui/src/authflowv2/components/settings-description.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
--typography-title-medium__font-weight
);
--settings-description__text-color: var(--color-neutral-400);

--settings-description__text-color--primary: var(--color-link);
}
:root.dark {
--settings-description__text-color: var(--color-neutral-200);
Expand All @@ -28,10 +26,7 @@
letter-spacing: var(--settings-description__letter-spacing);
font-weight: var(--settings-description__font-weight);
color: var(--settings-description__text-color);
}

.settings-description--primary-color {
@apply settings-description;
color: var(--settings-description__text-color--primary);
padding-left: var(--widget-content__px);
padding-right: var(--widget-content__px);
}
}
35 changes: 34 additions & 1 deletion authui/src/authflowv2/components/settings-item.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,24 @@
--settings-item__forward-arrow-color: var(--color-neutral-200);

--settings-item__border-color: var(--color-neutral-100);

--settings-item-content__font-family: var(
--typography-title-medium__font-family
);
--settings-item-content__font-size: var(
--typography-body-medium__font-size
);
--settings-item-content__line-height: var(
--typography-label-medium__line-height
);
--settings-item-content__letter-spacing: var(
--typography-title-medium__letter-spacing
);
--settings-item-content__font-weight: var(
--typography-title-medium__font-weight
);
--settings-item-content__text-color: var(--color-neutral-400);
--settings-item-content__text-color--highligh: var(--color-link);
}

:root.dark {
Expand All @@ -55,14 +73,19 @@
--settings-item__forward-arrow-color: var(--color-neutral-200);

--settings-item__border-color: var(--color-neutral-400);

:root.dark {
--settings-item-content__text-color: var(--color-neutral-200);
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is already inside a :root.dark block. Do we really need a nested :root.dark?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right it is redundant, removed in latest commit

}

.settings-item {
@apply grid gap-x-2 gap-y-1;
@apply items-center text-start;

background-color: var(--settings-item__bg-color);
padding: var(--settings-item__py) var(--settings-item__px);
padding: var(--settings-item__py)
calc(var(--settings-item__px) + var(--widget-content__px));
color: var(--settings-item__text-color);
border-color: var(--settings-item__border-color);
border-bottom-width: 1px;
Expand Down Expand Up @@ -125,6 +148,16 @@
}
.settings-item__content {
grid-area: content;

font-family: var(--settings-item-content__font-family);
font-size: var(--settings-item-content__font-size);
line-height: var(--settings-item-content__line-height);
letter-spacing: var(--settings-item-content__letter-spacing);
font-weight: var(--settings-item-content__font-weight);
color: var(--settings-item-content__text-color);
}
.settings-item__content--highlight {
color: var(--settings-item-content__text-color--highligh);
}
.settings-item__forward_arrow {
grid-area: arrow;
Expand Down
2 changes: 2 additions & 0 deletions authui/src/authflowv2/components/settings-title.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,7 @@
letter-spacing: var(--settings-title__letter-spacing);
font-weight: var(--settings-title__font-weight);
color: var(--settings-title__text-color);
padding-left: var(--widget-content__px);
padding-right: var(--widget-content__px);
}
}
10 changes: 6 additions & 4 deletions authui/src/authflowv2/components/watermark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
@layer components {
:root {
--watermark-display: inline-block;
--watermark-display: block;
}

html[data-watermark-enabled="false"] {
--watermark-display: hidden;
--watermark-display: none;
}

.watermark {
Expand All @@ -15,12 +15,14 @@
}

.watermark__container {
@apply mt-8 flex justify-center;
/* Use gap to implement the top padding, so that when watermark is not displayed,
the margin is also hidden */
@apply gap-y-8 flex flex-col items-center;
}

@media (min-width: theme("screens.tablet")) {
.watermark__container {
@apply mt-16;
@apply gap-y-16;
}
}
}
16 changes: 14 additions & 2 deletions authui/src/authflowv2/components/widget.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,10 @@
}

.widget-content.widget-content--settings {
@apply px-6 py-6;
@apply px-0 py-6;
@apply gap-y-5 tablet:gap-y-8;
max-width: var(--widget__max-width--settings);
--widget-content__px: 1.5rem;
}

/* In __html_head.html, there is a <noscript> element to revert this visibility. */
Expand All @@ -73,7 +74,18 @@
}

.widget-content.widget-content--settings {
@apply px-8 py-8;
@apply px-0 py-8;
--widget-content__px: 2rem;
}
}

.widget-content__item--settings {
padding-left: var(--widget-content__px);
padding-right: var(--widget-content__px);
}

.widget-content__alert--settings {
margin-left: var(--widget-content__px);
margin-right: var(--widget-content__px);
}
}
21 changes: 15 additions & 6 deletions portal/src/components/design/BorderRadius.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,21 @@ const BorderRadius: React.VFC<BorderRadiusProps> = function BorderRadius(
[radiusValue, onChange]
);

const onBorderRadiusChange = useCallback((_: any, value?: string) => {
if (value == null) {
return;
}
setRadiusValue(value);
}, []);
const onBorderRadiusChange = useCallback(
(_: any, value?: string) => {
if (value == null) {
return;
}
setRadiusValue(value);
if (value !== "") {
onChange({
type: "rounded",
radius: value,
});
}
},
[onChange]
);

const onBorderRadiusBlur = useCallback(
(ev: React.FocusEvent<HTMLInputElement>) => {
Expand Down
4 changes: 2 additions & 2 deletions portal/src/model/themeAuthFlowV2.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,8 +124,8 @@ export interface LogoStyle {
height: string;
}

export const WatermarkEnabledDisplay = "inline-block";
export const WatermarkDisabledDisplay = "hidden";
export const WatermarkEnabledDisplay = "block";
export const WatermarkDisabledDisplay = "none";

export interface CustomisableTheme {
page: PageStyle;
Expand Down
3 changes: 2 additions & 1 deletion resources/authgear/templates/de/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1319,7 +1319,8 @@
"v2.page.settings-sessions.default.all-sessions-dialog-description": "Dies wird den Zugriff auf Ihr Konto von allen anderen Geräten entfernen",
"v2.page.settings-sessions.default.all-sessions-dialog-title": "Alle anderen Sitzungen beenden",
"v2.page.settings-sessions.default.country-ip-item-description": "{countryName} ({countryCode}) - {ip}",
"v2.page.settings-sessions.default.device-item-description": "{isCurrent, select, true {{desc} · <span class=\"settings-description--primary-color\">Jetzt aktiv</span>} other {{desc} · <span data-date=\"{rfc3339}\">{time, datetime, short} UTC</span>}}",
"v2.page.settings-sessions.default.device-item-activity--current": "Derzeit aktiv",
"v2.page.settings-sessions.default.device-item-activity--last": "<span data-date=\"{rfc3339}\">{time, datetime, short} UTC</span>",
"v2.page.settings-sessions.default.revoke-all-label": "Alle anderen Sitzungen beenden",
"v2.page.settings-sessions.default.terminate-session-dialog-description": "Dies wird den Zugriff auf Ihr Konto auf diesem Gerät entfernen",
"v2.page.settings-sessions.default.terminate-session-dialog-title": "Sitzung beenden",
Expand Down
3 changes: 2 additions & 1 deletion resources/authgear/templates/el/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1319,7 +1319,8 @@
"v2.page.settings-sessions.default.all-sessions-dialog-description": "Αυτό θα αφαιρέσει την πρόσβαση στον λογαριασμό σας από όλες τις άλλες συσκευές",
"v2.page.settings-sessions.default.all-sessions-dialog-title": "Τερματισμός όλων των άλλων συνεδριών",
"v2.page.settings-sessions.default.country-ip-item-description": "{countryName} ({countryCode}) - {ip}",
"v2.page.settings-sessions.default.device-item-description": "{isCurrent, select, true {{desc} · <span class=\"settings-description--primary-color\">Ενεργό Τώρα</span>} other {{desc} · <span data-date=\"{rfc3339}\">{time, datetime, short} UTC</span>}}",
"v2.page.settings-sessions.default.device-item-activity--current": "Ενεργό Τώρα",
"v2.page.settings-sessions.default.device-item-activity--last": "<span data-date=\"{rfc3339}\">{time, datetime, short} UTC</span>",
"v2.page.settings-sessions.default.revoke-all-label": "Τερματισμός όλων των άλλων συνεδριών",
"v2.page.settings-sessions.default.terminate-session-dialog-description": "Αυτό θα αφαιρέσει την πρόσβαση στον λογαριασμό σας σε αυτή τη συσκευή",
"v2.page.settings-sessions.default.terminate-session-dialog-title": "Τερματισμός συνεδρίας",
Expand Down
3 changes: 2 additions & 1 deletion resources/authgear/templates/en/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1319,7 +1319,8 @@
"v2.page.settings-sessions.default.all-sessions-dialog-description": "This will remove access to your account from all other devices",
"v2.page.settings-sessions.default.all-sessions-dialog-title": "Terminate all other sessions",
"v2.page.settings-sessions.default.country-ip-item-description": "{countryName} ({countryCode}) - {ip}",
"v2.page.settings-sessions.default.device-item-description": "{isCurrent, select, true {{desc} · <span class=\"settings-description--primary-color\">Active Now</span>} other {{desc} · <span data-date=\"{rfc3339}\">{time, datetime, short} UTC</span>}}",
"v2.page.settings-sessions.default.device-item-activity--current": "Active Now",
"v2.page.settings-sessions.default.device-item-activity--last": "<span data-date=\"{rfc3339}\">{time, datetime, short} UTC</span>",
"v2.page.settings-sessions.default.revoke-all-label": "Terminate all other sessions",
"v2.page.settings-sessions.default.terminate-session-dialog-description": "This will remove access to your account on this device",
"v2.page.settings-sessions.default.terminate-session-dialog-title": "Terminate session",
Expand Down
4 changes: 2 additions & 2 deletions resources/authgear/templates/en/web/authflowv2/__settings_item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,15 @@
{{/* If there is content */}}
{{ if $.Children }}
{{ $length := len $.Children }}
<p class="settings-item__content settings-description block tablet:hidden">
<p class="settings-item__content block tablet:hidden">
{{ $item := index $.Children 0}}
{{ if gt $length 1 }}
<span> {{ include "v2.page.settings.default.and-more-button-label" (dict "item" $item ) }} </span>
{{ else }}
{{ $item }}
{{ end }}
</p>
<ul class="settings-item__content settings-description hidden tablet:block break-all">
<ul class="settings-item__content hidden tablet:block break-all">
{{ range $i, $child := $.Children }}
<li>
{{ $child }}
Expand Down
6 changes: 4 additions & 2 deletions resources/authgear/templates/en/web/authflowv2/__settings_page_frame.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,14 @@
{{ define "widget" }}
<div class="widget widget--settings">
<div class="widget-content widget-content--settings">
{{ block "page-navbar" . }}
{{ end }}
<div class="widget-content__item--settings">
{{ block "page-navbar" . }}{{ end }}
</div>
{{ template "authflowv2/__alert_message.html"
(dict
"Type" "error"
"Message" (include "authflowv2/__error.html" .)
"Classname" "widget-content__alert--settings"
)
}}
{{ template "page-content" . }}
Expand Down
6 changes: 4 additions & 2 deletions resources/authgear/templates/en/web/authflowv2/__watermark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
{{ define "authflowv2/__watermark.html" }}
<div class="watermark__container">
<!-- This element is for implementing the top margin of the watermark -->
<div></div>
{{ if $.IsNativePlatform }}
<div>
<span class="watermark"></span>
</div>
{{ else }}
<a href="https://www.authgear.com/?utm_campaign=uibrand" target="_blank">
<a class="contents" href="https://www.authgear.com/?utm_campaign=uibrand" target="_blank">
<span class="watermark"></span>
</a>
{{ end }}
</div>
</div>
{{ end }}
12 changes: 0 additions & 12 deletions resources/authgear/templates/en/web/authflowv2/settings_change_password.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,19 +53,7 @@
{{ $confirm_pw_error_message = (include "authflowv2/__error.html" (merge (dict "Error" $confirm_pw_err) $)) }}
{{ end }}

{{ $unknown_error_message := "" }}
{{ if $has_unknown_err }}
{{ $unknown_error_message = (include "authflowv2/__error.html" (merge (dict "Error" $unknown_err) $)) }}
{{ end }}

<div class="flex flex-col settings-content">
{{ template "authflowv2/__alert_message.html"
(dict
"Type" "error"
"Classname" "mb-4"
"Message" $unknown_error_message
)
}}
<form
method="post"
novalidate
Expand Down
12 changes: 0 additions & 12 deletions resources/authgear/templates/en/web/authflowv2/settings_identity_add_email.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,25 +28,13 @@
{{ $email_error_message = include "authflowv2/__error.html" (merge (dict "Error" $email_err) $) }}
{{ end }}

{{ $unknown_error_message := "" }}
{{ if $has_unknown_err }}
{{ $unknown_error_message = (include "authflowv2/__error.html" (merge (dict "Error" $unknown_err) $)) }}
{{ end }}

<form
class="settings-content flex flex-col gap-y-4 py-5 tablet:py-0"
method="post"
novalidate
data-controller="turbo-form"
data-action="submit->turbo-form#submitForm">

{{ template "authflowv2/__alert_message.html"
(dict
"Type" "error"
"Message" $unknown_error_message
)
}}

{{ $.CSRFField }}

<input
Expand Down
14 changes: 1 addition & 13 deletions resources/authgear/templates/en/web/authflowv2/settings_identity_add_phone.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,25 +28,13 @@
{{ $otp_error_message = include "authflowv2/__error.html" (merge (dict "Error" $otp_err) $) }}
{{ end }}

{{ $unknown_error_message := "" }}
{{ if $has_unknown_err }}
{{ $unknown_error_message = (include "authflowv2/__error.html" (merge (dict "Error" $unknown_err) $)) }}
{{ end }}

<form
class="settings-content flex flex-col gap-y-4 py-5 tablet:py-0"
class="settings-content flex flex-col gap-y-4 pb-5 tablet:pb-0"
method="post"
novalidate
data-controller="turbo-form"
data-action="submit->turbo-form#submitForm">

{{ template "authflowv2/__alert_message.html"
(dict
"Type" "error"
"Message" $unknown_error_message
)
}}

{{ $.CSRFField }}

<input type="hidden" name="x_channel" value="{{ $.Channel }}">
Expand Down
14 changes: 1 addition & 13 deletions resources/authgear/templates/en/web/authflowv2/settings_identity_edit_email.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,25 +28,13 @@
{{ $email_error_message = include "authflowv2/__error.html" (merge (dict "Error" $email_err) $) }}
{{ end }}

{{ $unknown_error_message := "" }}
{{ if $has_unknown_err }}
{{ $unknown_error_message = (include "authflowv2/__error.html" (merge (dict "Error" $unknown_err) $)) }}
{{ end }}

<form
class="settings-content flex flex-col gap-y-4 py-5 tablet:py-0"
class="settings-content flex flex-col gap-y-4 pb-5 tablet:pb-0"
method="post"
novalidate
data-controller="turbo-form"
data-action="submit->turbo-form#submitForm">

{{ template "authflowv2/__alert_message.html"
(dict
"Type" "error"
"Message" $unknown_error_message
)
}}

{{ $.CSRFField }}

<span class="screen-description">
Expand Down
Loading
Loading