Skip to content

Commit b417428

Browse files
MTRNordMTRNord
committed
Align the Base UI and the Button UI of Account-linking with the Design
Signed-off-by: MTRNord <[email protected]>
1 parent 1897270 commit b417428

File tree

14 files changed

+268
-30
lines changed

14 files changed

+268
-30
lines changed

‎crates/handlers/src/graphql/model/upstream_oauth.rs‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,22 @@ impl UpstreamOAuth2Provider {
5555
self.provider.human_name.as_deref()
5656
}
5757

58+
/// The brand name of the provider.
59+
///
60+
/// Values supported by the default template are:
61+
///
62+
/// - `apple`
63+
/// - `google`
64+
/// - `facebook`
65+
/// - `github`
66+
/// - `gitlab`
67+
/// - `twitter`
68+
///
69+
/// Note that this is a free-form field and can be any string value.
70+
pub async fn brand_name(&self) -> Option<&str> {
71+
self.provider.brand_name.as_deref()
72+
}
73+
5874
/// UpstreamOAuth2Links associated with this provider for the current user.
5975
pub async fn upstream_oauth2_links_for_user(
6076
&self,

‎frontend/locales/en.json‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,16 @@
3535
"title": "Edit profile",
3636
"username_label": "Username"
3737
},
38-
"linked_upstreams": "Linked Upstream Providers",
38+
"linked_upstreams": {
39+
"description": "Sign in with another account provider that supports Single Sign On (SSO).",
40+
"heading": "Linked accounts"
41+
},
3942
"password": {
4043
"change": "Change password",
4144
"change_disabled": "Password changes are disabled by the administrator.",
4245
"label": "Password"
4346
},
44-
"title": "Your account",
45-
"available_upstreams": "Available Upstream Providers"
47+
"title": "Your account"
4648
},
4749
"add_email_form": {
4850
"email_denied_error": "The entered email is not allowed by the server policy",
@@ -94,7 +96,7 @@
9496
"inactive_90_days": "Inactive for 90+ days"
9597
},
9698
"link_upstream_button": {
97-
"text": "Link {{provider}}"
99+
"text": "Link to {{provider}}"
98100
},
99101
"nav": {
100102
"devices": "Devices",
@@ -298,4 +300,4 @@
298300
"view_profile": "See your profile info and contact details"
299301
}
300302
}
301-
}
303+
}

‎frontend/schema.graphql‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1651,6 +1651,21 @@ type UpstreamOAuth2Provider implements Node & CreationEvent {
16511651
"""
16521652
humanName: String
16531653
"""
1654+
The brand name of the provider.
1655+
1656+
Values supported by the default template are:
1657+
1658+
- `apple`
1659+
- `google`
1660+
- `facebook`
1661+
- `github`
1662+
- `gitlab`
1663+
- `twitter`
1664+
1665+
Note that this is a free-form field and can be any string value.
1666+
"""
1667+
brandName: String
1668+
"""
16541669
UpstreamOAuth2Links associated with this provider for the current user.
16551670
"""
16561671
upstreamOauth2LinksForUser: [UpstreamOAuth2Link!]!

‎frontend/src/components/UpstreamProvider/LinkUpstreamProvider.tsx‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ import IconUserAdd from "@vector-im/compound-design-tokens/assets/web/icons/user
77
import { Button } from "@vector-im/compound-web";
88
import { useState } from "react";
99
import { useTranslation } from "react-i18next";
10+
import GoogleLogo from "./logos/google";
11+
import GithubLogo from "./logos/github";
12+
import GitlabLogo from "./logos/gitlab";
13+
import TwitterLogo from "./logos/twitter";
14+
import FacebookLogo from "./logos/facebook";
15+
import AppleLogo from "./logos/apple";
1016

1117
import { FragmentType, graphql, useFragment } from "../../gql";
1218
import LoadingSpinner from "../LoadingSpinner";
@@ -15,6 +21,7 @@ const FRAGMENT = graphql(/* GraphQL */ `
1521
fragment LinkUpstreamProvider_provider on UpstreamOAuth2Provider {
1622
id
1723
humanName
24+
brandName
1825
}
1926
`);
2027

@@ -37,14 +44,42 @@ const LinkUpstreamProvider: React.FC<{
3744
setInProgress(false);
3845
};
3946

47+
// Pick the right svg from the brand name
48+
//
49+
// Supported upstream providers:
50+
// - Google
51+
// - GitHub
52+
// - GitLab
53+
// - Twitter
54+
// - Facebook
55+
// - Apple
56+
const logo = (function (brandName?: string | null) {
57+
if (!brandName) {
58+
return null;
59+
}
60+
if (brandName.toLowerCase() === "google") {
61+
return GoogleLogo;
62+
} else if (brandName.toLowerCase() === "github") {
63+
return GithubLogo;
64+
} else if (brandName.toLowerCase() === "gitlab") {
65+
return GitlabLogo;
66+
} else if (brandName.toLowerCase() === "twitter") {
67+
return TwitterLogo;
68+
} else if (brandName.toLowerCase() === "facebook") {
69+
return FacebookLogo;
70+
} else if (brandName.toLowerCase() === "apple") {
71+
return AppleLogo;
72+
}
73+
})(data.brandName);
74+
4075
return (
4176
<>
4277
<Button
4378
type="button"
4479
kind="primary"
4580
onClick={onConfirm}
4681
disabled={disabled ?? inProgress}
47-
Icon={(disabled ?? inProgress) ? undefined : IconUserAdd}
82+
Icon={(disabled ?? inProgress) ? undefined : (logo ?? IconUserAdd)}
4883
>
4984
{inProgress && <LoadingSpinner inline />}
5085
{t("frontend.link_upstream_button.text", {

‎frontend/src/components/UpstreamProvider/logos/apple.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export default function AppleLogo() {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
width="25"
6+
height="24"
7+
viewBox="0 0 25 24"
8+
fill="none"
9+
>
10+
<path
11+
fill-rule="evenodd"
12+
clip-rule="evenodd"
13+
d="M16.9803 1.2796C17.0771 2.54383 16.6773 3.79601 15.8657 4.77022C15.0784 5.74949 13.8854 6.31354 12.629 6.3006C12.5491 5.07276 12.9605 3.86352 13.7727 2.93921C14.5952 2.00238 15.7404 1.40982 16.9803 1.2796ZM20.9539 8.70795C19.5086 9.59652 18.6192 11.1635 18.5974 12.86C18.5994 14.7794 19.7489 16.5115 21.5166 17.2592C21.1766 18.3636 20.6642 19.4073 19.9982 20.3517C19.1038 21.6896 18.1661 22.9967 16.6777 23.0208C15.9698 23.0372 15.492 22.8336 14.9941 22.6215C14.4747 22.4003 13.9335 22.1697 13.0867 22.1697C12.1885 22.1697 11.6231 22.4077 11.0778 22.6372C10.6065 22.8355 10.1503 23.0275 9.50727 23.0542C8.08982 23.1067 7.00654 21.6263 6.07964 20.3009C4.22703 17.5943 2.78444 12.6733 4.71844 9.32483C5.62662 7.69286 7.32468 6.65727 9.19136 6.59696C9.99528 6.58042 10.7667 6.89028 11.443 7.16193C11.9602 7.36969 12.4219 7.5551 12.7999 7.5551C13.1321 7.5551 13.5809 7.37701 14.1038 7.16946C14.9276 6.84251 15.9356 6.44246 16.9628 6.55027C18.5589 6.60021 20.038 7.39984 20.9539 8.70795Z"
14+
fill="currentColor"
15+
/>
16+
</svg>
17+
);
18+
}

‎frontend/src/components/UpstreamProvider/logos/facebook.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
export default function FacebookLogo() {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
width="25"
6+
height="24"
7+
viewBox="0 0 25 24"
8+
fill="none"
9+
>
10+
<path
11+
fill-rule="evenodd"
12+
clip-rule="evenodd"
13+
d="M23.1 11.999C23.1 6.20003 18.399 1.49902 12.6 1.49902C6.801 1.49902 2.1 6.20003 2.1 11.999C2.1 17.2399 5.9397 21.5838 10.9594 22.3715V15.0342H8.29336V11.999H10.9594V9.68574C10.9594 7.05418 12.5269 5.60059 14.9254 5.60059C16.0742 5.60059 17.2758 5.80566 17.2758 5.80566V8.38965H15.9518C14.6474 8.38965 14.2406 9.19903 14.2406 10.0294V11.999H17.1527L16.6872 15.0342H14.2406V22.3715C19.2603 21.5838 23.1 17.2399 23.1 11.999Z"
14+
fill="#1877F2"
15+
/>
16+
<path
17+
fill-rule="evenodd"
18+
clip-rule="evenodd"
19+
d="M16.6872 15.0342L17.1527 11.999H14.2406V10.0294C14.2406 9.19903 14.6474 8.38965 15.9518 8.38965H17.2758V5.80566C17.2758 5.80566 16.0742 5.60059 14.9254 5.60059C12.5269 5.60059 10.9594 7.05418 10.9594 9.68574V11.999H8.29336V15.0342H10.9594V22.3715C11.494 22.4553 12.0419 22.499 12.6 22.499C13.1581 22.499 13.706 22.4553 14.2406 22.3715V15.0342H16.6872Z"
20+
fill="white"
21+
/>
22+
</svg>
23+
);
24+
}

‎frontend/src/components/UpstreamProvider/logos/github.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export default function GithubLogo() {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
width="25"
6+
height="24"
7+
viewBox="0 0 25 24"
8+
fill="none"
9+
>
10+
<path
11+
d="M20.8421 7.10595C19.9703 5.6121 18.7876 4.42942 17.2939 3.55764C15.8 2.68581 14.169 2.25001 12.3999 2.25001C10.6311 2.25001 8.9996 2.68594 7.50597 3.55764C6.01212 4.42938 4.82953 5.6121 3.95765 7.10595C3.08592 8.59976 2.65002 10.231 2.65002 11.9997C2.65002 14.1242 3.26987 16.0346 4.50987 17.7315C5.74973 19.4284 7.35145 20.6027 9.3149 21.2543C9.54345 21.2967 9.71264 21.2669 9.82265 21.1656C9.9327 21.0641 9.98766 20.937 9.98766 20.7848C9.98766 20.7595 9.98548 20.531 9.98126 20.0993C9.9769 19.6676 9.97485 19.291 9.97485 18.9696L9.68285 19.0202C9.49667 19.0543 9.26181 19.0687 8.97826 19.0646C8.69484 19.0607 8.40061 19.031 8.09598 18.9757C7.79121 18.921 7.50775 18.7941 7.24536 18.5952C6.98311 18.3963 6.79693 18.1359 6.68688 17.8145L6.55993 17.5224C6.47531 17.3279 6.3421 17.1119 6.1601 16.875C5.97811 16.638 5.79406 16.4773 5.60789 16.3927L5.519 16.329C5.45978 16.2868 5.40482 16.2358 5.35399 16.1766C5.30321 16.1174 5.2652 16.0582 5.23981 15.9988C5.21437 15.9395 5.23545 15.8908 5.30326 15.8526C5.37107 15.8144 5.49361 15.7959 5.67143 15.7959L5.92524 15.8338C6.09451 15.8677 6.3039 15.9691 6.55366 16.1384C6.80329 16.3077 7.0085 16.5277 7.16933 16.7984C7.36408 17.1455 7.59873 17.4099 7.87392 17.5919C8.14889 17.7739 8.42613 17.8648 8.70537 17.8648C8.98461 17.8648 9.22579 17.8436 9.429 17.8015C9.63198 17.7592 9.82243 17.6955 10.0002 17.611C10.0764 17.0437 10.2838 16.6079 10.6222 16.3033C10.1399 16.2526 9.70619 16.1762 9.32099 16.0747C8.93601 15.9731 8.53818 15.8081 8.12777 15.5794C7.71714 15.3509 7.37649 15.0673 7.10574 14.7289C6.83495 14.3904 6.61271 13.9459 6.43934 13.3959C6.26588 12.8457 6.17913 12.211 6.17913 11.4916C6.17913 10.4674 6.51351 9.59578 7.18213 8.87633C6.86892 8.10629 6.89849 7.24304 7.27093 6.28668C7.51638 6.21043 7.88037 6.26765 8.36273 6.45801C8.84517 6.64845 9.1984 6.8116 9.42277 6.94686C9.64714 7.08208 9.82692 7.19666 9.96236 7.2896C10.7496 7.06963 11.562 6.95962 12.3998 6.95962C13.2377 6.95962 14.0503 7.06963 14.8376 7.2896L15.32 6.98505C15.6498 6.78185 16.0394 6.59563 16.4877 6.42635C16.9363 6.25716 17.2793 6.21056 17.5164 6.28682C17.8971 7.24322 17.931 8.10642 17.6177 8.87647C18.2863 9.59591 18.6208 10.4677 18.6208 11.4918C18.6208 12.2111 18.5337 12.8478 18.3605 13.4023C18.1871 13.9568 17.963 14.4008 17.688 14.7353C17.4127 15.0697 17.0699 15.3511 16.6595 15.5795C16.249 15.808 15.851 15.973 15.466 16.0747C15.0809 16.1763 14.6472 16.2527 14.1648 16.3035C14.6048 16.6842 14.8248 17.2851 14.8248 18.106V20.7845C14.8248 20.9367 14.8777 21.0637 14.9836 21.1652C15.0894 21.2665 15.2565 21.2964 15.485 21.2539C17.4487 20.6024 19.0505 19.4281 20.2903 17.7311C21.53 16.0343 22.15 14.1238 22.15 11.9993C22.1496 10.2309 21.7135 8.59976 20.8421 7.10595Z"
12+
fill="currentColor"
13+
/>
14+
</svg>
15+
);
16+
}

‎frontend/src/components/UpstreamProvider/logos/gitlab.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
export default function GitlabLogo() {
2+
return (
3+
<svg
4+
width="24"
5+
height="24"
6+
viewBox="0 0 24 24"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
>
10+
<path
11+
d="M12.0005 20.3296L15.3166 10.1293H8.68921L12.0005 20.3296Z"
12+
fill="#E24329"
13+
/>
14+
<path
15+
d="M4.04348 10.1293L3.03364 13.2283C2.94226 13.5097 3.04095 13.8203 3.28214 13.9957L11.9996 20.3296L4.04348 10.1293Z"
16+
fill="#FCA326"
17+
/>
18+
<path
19+
d="M4.04248 10.1289H8.68727L6.68828 3.98572C6.58597 3.67143 6.1401 3.67143 6.03411 3.98572L4.04248 10.1289Z"
20+
fill="#E24329"
21+
/>
22+
<path
23+
d="M19.9602 10.1293L20.9664 13.2283C21.0577 13.5097 20.9591 13.8203 20.7179 13.9957L11.9991 20.3296L19.9602 10.1293Z"
24+
fill="#FCA326"
25+
/>
26+
<path
27+
d="M19.9616 10.1289H15.3168L17.3121 3.98572C17.4144 3.67143 17.8603 3.67143 17.9663 3.98572L19.9616 10.1289Z"
28+
fill="#E24329"
29+
/>
30+
<path
31+
d="M11.9991 20.3296L15.3153 10.1293H19.9601L11.9991 20.3296Z"
32+
fill="#FC6D26"
33+
/>
34+
<path
35+
d="M11.9985 20.3296L4.04248 10.1293H8.68727L11.9985 20.3296Z"
36+
fill="#FC6D26"
37+
/>
38+
</svg>
39+
);
40+
}

‎frontend/src/components/UpstreamProvider/logos/google.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
export default function GoogleLogo() {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
width="24"
6+
height="24"
7+
viewBox="0 0 24 24"
8+
fill="none"
9+
>
10+
<path
11+
d="M22.501 12.2333C22.501 11.37 22.4296 10.74 22.2748 10.0867H12.2153V13.9833H18.12C18.001 14.9517 17.3582 16.41 15.9296 17.3899L15.9096 17.5204L19.0902 19.9351L19.3106 19.9567C21.3343 18.125 22.501 15.43 22.501 12.2333Z"
12+
fill="#4285F4"
13+
/>
14+
<path
15+
d="M12.2147 22.5001C15.1075 22.5001 17.5361 21.5667 19.3099 19.9567L15.929 17.39C15.0242 18.0083 13.8099 18.44 12.2147 18.44C9.38142 18.44 6.97669 16.6083 6.11947 14.0767L5.99382 14.0871L2.68656 16.5955L2.64331 16.7133C4.40519 20.1433 8.02423 22.5001 12.2147 22.5001Z"
16+
fill="#34A853"
17+
/>
18+
<path
19+
d="M6.12022 14.0767C5.89403 13.4234 5.76313 12.7233 5.76313 12C5.76313 11.2767 5.89403 10.5767 6.10832 9.92337L6.10233 9.78423L2.75361 7.2356L2.64405 7.28667C1.91789 8.71002 1.50122 10.3084 1.50122 12C1.50122 13.6917 1.91789 15.29 2.64405 16.7133L6.12022 14.0767Z"
20+
fill="#FBBC05"
21+
/>
22+
<path
23+
d="M12.2148 5.55997C14.2267 5.55997 15.5838 6.41163 16.3576 7.12335L19.3814 4.23C17.5243 2.53834 15.1076 1.5 12.2148 1.5C8.02426 1.5 4.4052 3.85665 2.64331 7.28662L6.10759 9.92332C6.97671 7.39166 9.38146 5.55997 12.2148 5.55997Z"
24+
fill="#EB4335"
25+
/>
26+
</svg>
27+
);
28+
}

‎frontend/src/components/UpstreamProvider/logos/twitter.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export default function TwitterLogo() {
2+
return (
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
width="25"
6+
height="24"
7+
viewBox="0 0 25 24"
8+
fill="none"
9+
>
10+
<path
11+
d="M9.04155 21C6.6153 21 4.35363 20.2943 2.45 19.0767C4.06624 19.1813 6.91855 18.9308 8.69268 17.2386C6.0238 17.1161 4.82019 15.0692 4.6632 14.1945C4.88997 14.2819 5.97147 14.3869 6.582 14.142C3.51192 13.3722 3.04094 10.678 3.1456 9.85573C3.72124 10.2581 4.69809 10.3981 5.08185 10.3631C2.22109 8.31618 3.25027 5.23707 3.75613 4.57226C5.80911 7.4165 8.8859 9.01393 12.6923 9.10278C12.6205 8.78802 12.5826 8.46032 12.5826 8.12373C12.5826 5.70819 14.5351 3.75 16.9435 3.75C18.2019 3.75 19.3358 4.28457 20.1318 5.13963C20.9727 4.94258 22.2382 4.4813 22.8569 4.0824C22.5451 5.20208 21.5742 6.13612 20.9869 6.48231C20.9918 6.49408 20.9821 6.47048 20.9869 6.48231C21.5028 6.40428 22.8986 6.13603 23.45 5.76192C23.1773 6.39094 22.148 7.4368 21.3033 8.02232C21.4604 14.9535 16.1574 21 9.04155 21Z"
12+
fill="#1D9BF0"
13+
/>
14+
</svg>
15+
);
16+
}

0 commit comments

Comments
 (0)