mirror of
https://github.com/trailbaseio/trailbase.git
synced 2026-04-29 04:59:36 -05:00
Add image assets for external auth providers to add a bit more polish.
This commit is contained in:
Sebastian Jeltsch
@@ -38,6 +38,21 @@ import { createConfigQuery, setConfig } from "@/lib/config";
|
||||
import { adminFetch } from "@/lib/fetch";
|
||||
import { showSaveFileDialog } from "@/lib/utils";
|
||||
|
||||
// OAuth2 provider assets.
|
||||
import discord from "@shared/assets/oauth2/discord.svg";
|
||||
import facebook from "@shared/assets/oauth2/facebook.svg";
|
||||
import gitlab from "@shared/assets/oauth2/gitlab.svg";
|
||||
import google from "@shared/assets/oauth2/google.svg";
|
||||
import microsoft from "@shared/assets/oauth2/microsoft.svg";
|
||||
|
||||
const assets: Record<string, string> = {
|
||||
discord: discord,
|
||||
facebook: facebook,
|
||||
gitlab: gitlab,
|
||||
google: google,
|
||||
microsoft: microsoft,
|
||||
} as const;
|
||||
|
||||
// Using a proxy struct since tanstack only deals with arrays and not maps.
|
||||
// And rather than trying to hack it an converting on the fly, we're converting
|
||||
// once upfront from config to proxy and back on submission.
|
||||
@@ -188,9 +203,16 @@ function ProviderSettingsSubForm(props: {
|
||||
return (
|
||||
<AccordionItem value={`item-${props.provider.id}`}>
|
||||
<AccordionTrigger>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center gap-4">
|
||||
{icon()}
|
||||
<span>{props.provider.display_name}</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<img
|
||||
class="size-[24px]"
|
||||
src={assets[props.provider.name]}
|
||||
alt={props.provider.display_name}
|
||||
/>
|
||||
<span>{props.provider.display_name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* @refresh reload */
|
||||
import { render } from "solid-js/web";
|
||||
|
||||
import "@styles/global.css";
|
||||
import "@styles/kobalte.css";
|
||||
import "@shared/global.css";
|
||||
import "@shared/kobalte.css";
|
||||
|
||||
import App from "./App";
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
"@/*": ["./src/*"],
|
||||
"@proto/*": ["./proto/*"],
|
||||
"@bindings/*": ["../../bindings/*"],
|
||||
"@styles/*": ["../styles/*"]
|
||||
"@shared/*": ["../shared/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["tailwind.config.ts", "dist/", "node_modules/", "public/"]
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"$schema": "https://solid-ui.com/schema.json",
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"css": "../styles/global.css",
|
||||
"css": "../shared/global.css",
|
||||
"config": "tailwind.config.ts",
|
||||
"prefix": ""
|
||||
},
|
||||
|
||||
@@ -5,6 +5,23 @@ import type { ConfiguredOAuthProvidersResponse } from "@bindings/ConfiguredOAuth
|
||||
|
||||
import { AUTH_API } from "@/lib/constants";
|
||||
|
||||
// OAuth2 provider assets.
|
||||
import discord from "@shared/assets/oauth2/discord.svg";
|
||||
import facebook from "@shared/assets/oauth2/facebook.svg";
|
||||
import gitlab from "@shared/assets/oauth2/gitlab.svg";
|
||||
import google from "@shared/assets/oauth2/google.svg";
|
||||
import microsoft from "@shared/assets/oauth2/microsoft.svg";
|
||||
|
||||
const assets: Record<string, string> = {
|
||||
discord: discord.src,
|
||||
facebook: facebook.src,
|
||||
gitlab: gitlab.src,
|
||||
google: google.src,
|
||||
microsoft: microsoft.src,
|
||||
|
||||
fake: facebook.src,
|
||||
} as const;
|
||||
|
||||
async function listConfiguredOAuthProviders(): Promise<ConfiguredOAuthProvidersResponse> {
|
||||
const response = await fetch(`${AUTH_API}/oauth/providers`, {
|
||||
method: "GET",
|
||||
@@ -25,7 +42,7 @@ export function ConfiguredOAuthProviders() {
|
||||
const providers = () => {
|
||||
const providers = [...(providersFetch()?.providers ?? [])];
|
||||
if (import.meta.env.DEV) {
|
||||
providers.push(["name", "Display Name"]);
|
||||
providers.push(["fake", "Fake Provider"]);
|
||||
}
|
||||
return providers;
|
||||
};
|
||||
@@ -47,7 +64,14 @@ export function ConfiguredOAuthProviders() {
|
||||
class={cn("w-full", buttonVariants({ variant: "outline" }))}
|
||||
href={`${AUTH_API}/oauth/${name}/login`}
|
||||
>
|
||||
{displayName}
|
||||
<div class="flex items-center gap-2">
|
||||
<img
|
||||
class="size-[28px]"
|
||||
src={assets[name]}
|
||||
alt={displayName}
|
||||
/>
|
||||
<span class="font-bold">{displayName}</span>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
import "@styles/global.css";
|
||||
import "@styles/kobalte.css";
|
||||
import "@shared/global.css";
|
||||
import "@shared/kobalte.css";
|
||||
|
||||
import favicon from "@/assets/favicon.svg";
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"@bindings/*": ["../../bindings/*"],
|
||||
"@styles/*": ["../styles/*"]
|
||||
"@shared/*": ["../shared/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["dist", "node_modules", "public"]
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"$schema": "https://solid-ui.com/schema.json",
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"css": "../styles/global.css",
|
||||
"css": "../shared/global.css",
|
||||
"config": "tailwind.config.ts",
|
||||
"prefix": ""
|
||||
},
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="256px" height="199px" viewBox="0 0 256 199" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
|
||||
<g>
|
||||
<path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="#5865F2" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
|
||||
<title>Facebook</title>
|
||||
<g>
|
||||
<path d="M256,128 C256,57.3075 198.6925,0 128,0 C57.3075,0 0,57.3075 0,128 C0,191.8885 46.80775,244.8425 108,254.445 L108,165 L75.5,165 L75.5,128 L108,128 L108,99.8 C108,67.72 127.1095,50 156.3475,50 C170.35175,50 185,52.5 185,52.5 L185,84 L168.8595,84 C152.95875,84 148,93.86675 148,103.98925 L148,128 L183.5,128 L177.825,165 L148,165 L148,254.445 C209.19225,244.8425 256,191.8885 256,128" fill="#1877F2"></path>
|
||||
<path d="M177.825,165 L183.5,128 L148,128 L148,103.98925 C148,93.86675 152.95875,84 168.8595,84 L185,84 L185,52.5 C185,52.5 170.35175,50 156.3475,50 C127.1095,50 108,67.72 108,99.8 L108,128 L75.5,128 L75.5,165 L108,165 L108,254.445 C114.51675,255.4675 121.196,256 128,256 C134.804,256 141.48325,255.4675 148,254.445 L148,165 L177.825,165" fill="#FFFFFF"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1020 B |
@@ -0,0 +1,6 @@
|
||||
<svg width="256" height="247" viewBox="0 0 256 247" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M251.729 97.7258L251.37 96.8097L216.663 6.23026C215.957 4.45495 214.706 2.94895 213.091 1.92834C211.475 0.925064 209.59 0.441856 207.69 0.543954C205.791 0.646053 203.968 1.32854 202.469 2.49927C200.986 3.70361 199.911 5.33554 199.389 7.17296L175.954 78.8717H81.0591L57.6242 7.17296C57.116 5.32553 56.0381 3.68542 54.5438 2.48599C53.0445 1.31526 51.2221 0.632772 49.3226 0.530674C47.4231 0.428575 45.538 0.911784 43.9218 1.91506C42.3103 2.93979 41.061 4.44447 40.3501 6.21698L5.57625 96.7566L5.23103 97.6727C0.234724 110.727 -0.381989 125.052 3.47388 138.488C7.32974 151.924 15.4491 163.742 26.6079 172.16L26.7274 172.253L27.046 172.478L79.9172 212.072L106.074 231.869L122.007 243.898C123.871 245.313 126.146 246.079 128.486 246.079C130.827 246.079 133.102 245.313 134.966 243.898L150.899 231.869L177.056 212.072L230.246 172.239L230.378 172.133C241.512 163.713 249.613 151.908 253.463 138.49C257.313 125.073 256.704 110.768 251.729 97.7258Z" fill="#E24329"/>
|
||||
<path d="M251.729 97.7258L251.37 96.8097C234.458 100.281 218.522 107.444 204.7 117.788L128.473 175.426C154.431 195.064 177.029 212.125 177.029 212.125L230.219 172.293L230.352 172.186C241.501 163.767 249.615 151.953 253.47 138.524C257.325 125.095 256.714 110.778 251.729 97.7258Z" fill="#FC6D26"/>
|
||||
<path d="M79.9172 212.125L106.074 231.922L122.007 243.951C123.871 245.366 126.146 246.133 128.486 246.133C130.827 246.133 133.102 245.366 134.966 243.951L150.899 231.922L177.056 212.125C177.056 212.125 154.431 195.01 128.473 175.426C102.516 195.01 79.9172 212.125 79.9172 212.125Z" fill="#FCA326"/>
|
||||
<path d="M52.2335 117.788C38.4222 107.423 22.4892 100.241 5.57625 96.7566L5.23103 97.6727C0.234724 110.727 -0.381989 125.052 3.47388 138.488C7.32974 151.924 15.4491 163.741 26.6079 172.16L26.7274 172.253L27.046 172.478L79.9172 212.072C79.9172 212.072 102.489 195.01 128.473 175.373L52.2335 117.788Z" fill="#FC6D26"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="256px" height="262px" viewBox="0 0 256 262" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
|
||||
<g>
|
||||
<path d="M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451" fill="#4285F4"></path>
|
||||
<path d="M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1" fill="#34A853"></path>
|
||||
<path d="M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37" fill="#FBBC05"></path>
|
||||
<path d="M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479" fill="#EB4335"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
|
||||
<title>Microsoft</title>
|
||||
<g>
|
||||
<polygon fill="#F1511B" points="121.666095 121.666095 0 121.666095 0 0 121.666095 0"></polygon>
|
||||
<polygon fill="#80CC28" points="256 121.666095 134.335356 121.666095 134.335356 0 256 0"></polygon>
|
||||
<polygon fill="#00ADEF" points="121.663194 256.002188 0 256.002188 0 134.336095 121.663194 134.336095"></polygon>
|
||||
<polygon fill="#FBBC09" points="256 256.002188 134.335356 256.002188 134.335356 134.336095 256 134.336095"></polygon>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 689 B |
Reference in New Issue
Block a user