dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-06 01:45:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: new auth providers form

Browse Source 
• added new mobx store for config
• using yup() for validation schema
• tried to follow some conventions of JSONSchema, but can do better. can investigate some schema-to-yup solutions later so things can be more JSONSchema.
• made up a few parts of JSONSchema to show/hide properties - not following any official convention.
This commit is contained in:
Jonathan Summers-Muir committed 2022-05-12 10:35:41 +08:00
1 parent 5cd8a10cf4
commit d7fa6997e4
38 files changed
+2517 -330
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

studio/components/interfaces/Auth/AuthProvidersForm.tsx
+309
View File
@@ -0,0 +1,309 @@
import {
Alert,
Button,
Collapsible,
Form,
IconCheck,
IconChevronUp,
Input,
Listbox,
Toggle,
Menu,
} from '@supabase/ui'
import { useStore } from 'hooks'
import { observer } from 'mobx-react-lite'
import { useState } from 'react'
import ReactMarkdown from 'react-markdown'
import { PROVIDERS_SCHEMAS } from 'stores/authConfig/schema'
interface Enum {
label: string
value: string
icon: string
}
interface Provider {
$schema: string
type: 'object'
title: string
properties: {
[x: string]: {
title: string
type: 'boolean' | 'string' | 'select'
description?: string
descriptionOptional?: string
enum: Enum[]
show: {
key: string
matches: string
}
}
}
validationSchema: any // todo: use Yup type
misc: {
iconKey: 'gitlab-icon'
requiresRedirect: true
helper: string
alert: {
title: string
description: string
}
}
}
const AuthProvidersForm = () => {
const providers = PROVIDERS_SCHEMAS
return (
<div className="mx-auto my-8">
<div className="-space-y-px">
{
// @ts-expect-error
// to do: fix type error, needs to be dynamic
providers.map((provider: Provider, i) => {
return <ProviderForm provider={provider} key={i} />
})
}
</div>
</div>
)
}
const ProviderForm = ({ provider }: { provider: Provider }) => {
const [open, setOpen] = useState(false)
const { authConfig, ui } = useStore()
const active = authConfig.config[`EXTERNAL_${provider?.title?.toUpperCase()}_ENABLED`]
const INITIAL_VALUES: { [x: string]: string } = {}
/**
* construct values for INITIAL_VALUES
*
* return empty string `""` rather than `null`
* as it breaks form. null is not a valid value.
*/
Object.keys(provider.properties).forEach((key) => {
INITIAL_VALUES[key] = authConfig.config[key] ?? ''
})
return (
<Collapsible
open={open}
onOpenChange={setOpen}
className="
bg-scale-100 dark:bg-scale-300
hover:bg-scale-200 dark:hover:bg-scale-500
data-open:bg-scale-200 dark:data-open:bg-scale-500
border-scale-300
dark:border-scale-500 hover:border-scale-500
dark:hover:border-scale-700 data-open:border-scale-700
data-open:pb-px col-span-12 mx-auto
-space-y-px overflow-hidden
border shadow
transition
first:rounded-tl
first:rounded-tr
last:rounded-bl
last:rounded-br
hover:z-50
"
>
<Collapsible.Trigger asChild>
<button
type="button"
className="
text-scale-1200
group
flex
w-full items-center justify-between rounded
p-3 px-6"
>
<div className="flex items-center gap-3">
<IconChevronUp
className="text-scale-800 data-open-parent:rotate-0 data-closed-parent:rotate-180 transition"
strokeWidth={2}
width={14}
/>
<img
src={`/img/icons/${provider.misc.iconKey}.svg`}
width={18}
alt={`${provider.title} auth icon`}
/>
<span className="text-sm">{provider.title}</span>
</div>
<div className="flex items-center gap-3">
{active ? (
<div className="bg-brand-200 border-brand-700 text-brand-900 flex items-center gap-1 rounded-full border py-1 px-1 text-xs">
<span className="bg-brand-900 text-brand-200 rounded-full p-0.5 text-xs">
<IconCheck strokeWidth={2} size={12} />
</span>
<span className="px-1">Enabled</span>
</div>
) : (
<div className="bg-scale-100 dark:bg-scale-300 border-scale-500 dark:border-scale-700 text-scale-900 rounded-md border py-1 px-3 text-xs">
Disabled
</div>
)}
</div>
</button>
</Collapsible.Trigger>
<Form
name={`provider-${provider.title}-form`}
initialValues={INITIAL_VALUES}
validationSchema={provider.validationSchema}
onSubmit={async (values: any, { setSubmitting }: any) => {
try {
await authConfig.update(values)
setSubmitting(false)
setOpen(false)
} catch (error) {
console.error(error)
}
}}
>
{({ isSubmitting, handleReset, values }: any) => (
<Collapsible.Content>
<div
className="
bg-scale-100 dark:bg-scale-300
text-scale-1200 border-scale-500 group border-t py-6 px-6
"
>
<div className="mx-auto my-6 max-w-md space-y-6">
{Object.keys(provider.properties).map((x: string) => {
/**
* Properties of the form
*/
const properties = provider.properties[x]
/**
* Conditionally hide properties based on value of key
*/
if (properties.show && values[properties.show.key] !== properties.show.matches) {
return null
}
switch (properties.type) {
case 'string':
return (
<Input
size="small"
layout="vertical"
id={x}
key={x}
name={x}
label={properties.title}
descriptionText={
properties.description ? (
<ReactMarkdown unwrapDisallowed disallowedElements={['p']}>
{properties.description}
</ReactMarkdown>
) : null
}
//
// @ts-expect-error
//
// to do: change to "string" | React.ReactNode | undefined
//
labelOptional={
properties.descriptionOptional ? (
<ReactMarkdown unwrapDisallowed disallowedElements={['p']}>
{properties.descriptionOptional}
</ReactMarkdown>
) : null
}
/>
)
break
case 'boolean':
return (
<Toggle
size="small"
key={x}
name={x}
label={properties.title}
descriptionText={properties.description}
/>
)
break
case 'select':
return (
<Listbox
size="small"
key={x}
name={x}
label={properties.title}
descriptionText={properties.description}
defaultValue={properties.enum[0]}
>
{properties.enum.map((option: Enum) => {
return (
<Listbox.Option
id={option.value}
label={option.label}
value={option.value}
addOnBefore={() => (
<img className="h-6 w-6" src={`/img/icons/${option.icon}`} />
)}
>
{option.label}
</Listbox.Option>
)
})}
</Listbox>
)
break
default:
break
}
})}
{provider?.misc?.alert && (
<Alert title={provider.misc.alert.title} variant="warning" withIcon>
<ReactMarkdown>{provider.misc.alert.description}</ReactMarkdown>
</Alert>
)}
{provider.misc.requiresRedirect && (
<>
<ReactMarkdown className="text-scale-900 text-xs">
{provider.misc.helper}
</ReactMarkdown>
<Input
label="Redirect url"
readOnly
value={`https://${ui.selectedProjectRef}.supabase.co/auth/v1/callback`}
copy
disabled
/>
</>
)}
<div className="flex items-center justify-end gap-3">
<Button
htmlType="reset"
onClick={() => {
handleReset()
setOpen(false)
}}
type="default"
>
Cancel
</Button>
<Button htmlType="submit" loading={isSubmitting}>
Save
</Button>
</div>
</div>
</div>
</Collapsible.Content>
)}
</Form>
</Collapsible>
)
}
export default observer(AuthProvidersForm)
studio/components/interfaces/Auth/index.tsx
+3
View File
@@ -0,0 +1,3 @@
import AuthProvidersForm from './AuthProvidersForm'
export { AuthProvidersForm }
studio/components/interfaces/index.ts
+2
View File
@@ -1,4 +1,6 @@
import TableGridEditor from './TableGridEditor'
import SQLEditor from './SQLEditor'
export * from './Auth'
export { TableGridEditor, SQLEditor }
studio/components/layouts/AuthLayout/AuthLayout.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { FC, ReactNode, useState, useEffect } from 'react'
import { observer } from 'mobx-react-lite'
import { useRouter } from 'next/router'
import { useStore } from 'hooks'
import { useStore, withAuth } from 'hooks'
import BaseLayout from '../'
import Error from 'components/ui/Error'
import ProductMenu from 'components/ui/ProductMenu'
@@ -57,4 +57,4 @@ const AuthLayout: FC<Props> = ({ title, children }) => {
)
}
export default observer(AuthLayout)
export default withAuth(observer(AuthLayout))
studio/components/ui/Forms/AutoSchemaForm.tsx
+1 -1
View File
@@ -68,7 +68,7 @@ const AutoSchemaForm = () => {
return errors
}}
>
{({ isSubmitting, handleReset }: any) => (
{({ isSubmitting, handleReset, values }: any) => (
<Panel
footer={
<>
studio/package.json
+2
View File
@@ -53,6 +53,7 @@
"react-grid-layout": "^1.3.0",
"react-hot-toast": "^2.1.1",
"react-inlinesvg": "^2.3.0",
"react-markdown": "^8.0.3",
"react-split": "^2.0.13",
"react-virtualized-auto-sizer": "^1.0.6",
"react-window": "^1.8.6",
@@ -64,6 +65,7 @@
"swr": "^1.2.1",
"uniforms-bootstrap4": "^3.6.2",
"uniforms-bridge-json-schema": "^3.6.2",
"yup": "^0.32.11",
"zxcvbn": "^4.4.2"
},
"devDependencies": {
studio/pages/project/[ref]/auth/AuthFormSchema.json
-281
View File
@@ -1,281 +0,0 @@
[
{
"name": "Email",
"icon": "email-icon",
"form": [
{
"type": "text",
"name": "email-app-id",
"label": "email App Id",
"description": ""
},
{
"type": "text",
"name": "email-id-key",
"label": "email client ID",
"description": ""
},
{
"type": "text",
"name": "email-id-key",
"label": "email client ID",
"description": ""
},
{
"type": "text",
"name": "email-id-key",
"label": "email client ID",
"description": ""
}
]
},
{
"name": "Phone",
"icon": "phone-icon",
"form": [
{
"type": "select",
"name": "phone-app-provider",
"label": "Phone service provider",
"description": "You can use a provider etc etc"
},
{
"type": "text",
"name": "phone-id-key",
"label": "phone client ID",
"description": ""
},
{
"type": "text",
"name": "phone-id-key",
"label": "phone client ID",
"description": ""
},
{
"type": "text",
"name": "phone-id-key",
"label": "phone client ID",
"description": ""
}
]
},
{
"name": "Google",
"icon": "google-icon",
"form": [
{
"type": "text",
"name": "google-app-id",
"label": "Google App Id",
"description": ""
},
{
"type": "text",
"name": "google-id-key",
"label": "Google client ID",
"description": ""
}
]
},
{
"name": "Facebook",
"icon": "facebook-icon",
"form": [
{
"type": "text",
"name": "facebook-app-id",
"label": "Facebook App Id",
"description": ""
},
{
"type": "text",
"name": "facebook-id-key",
"label": "Facebook client ID",
"description": ""
}
]
},
{
"name": "Twitter",
"icon": "twitter-icon",
"form": [
{
"type": "text",
"name": "twitter-app-id",
"label": "Twitter App Id",
"description": ""
},
{
"type": "text",
"name": "twitter-id-key",
"label": "Twitter client ID",
"description": ""
}
]
},
{
"name": "Apple",
"icon": "apple-icon",
"form": [
{
"type": "text",
"name": "apple-app-id",
"label": "Apple App Id",
"description": ""
},
{
"type": "text",
"name": "apple-id-key",
"label": "Apple client ID",
"description": ""
}
]
},
{
"name": "Microsoft",
"icon": "microsoft-icon",
"form": [
{
"type": "text",
"name": "microsoft-app-id",
"label": "Microsoft App Id",
"description": ""
},
{
"type": "text",
"name": "microsoft-id-key",
"label": "Microsoft client ID",
"description": ""
}
]
},
{
"name": "Gitlab",
"icon": "gitlab-icon",
"form": [
{
"type": "text",
"name": "gitlab-app-id",
"label": "Gitlab App Id",
"description": ""
},
{
"type": "text",
"name": "gitlab-id-key",
"label": "Gitlab client ID",
"description": ""
}
]
},
{
"name": "Bitbucket",
"icon": "bitbucket-icon",
"form": [
{
"type": "text",
"name": "bitbucket-app-id",
"label": "Bitbucket App Id",
"description": ""
},
{
"type": "text",
"name": "bitbucket-id-key",
"label": "Bitbucket client ID",
"description": ""
}
]
},
{
"name": "Discord",
"icon": "discord-icon",
"form": [
{
"type": "text",
"name": "discord-app-id",
"label": "Discord App Id",
"description": ""
},
{
"type": "text",
"name": "discord-id-key",
"label": "Discord client ID",
"description": ""
}
]
},
{
"name": "Github",
"icon": "github-icon-dark",
"form": [
{
"type": "text",
"name": "github-app-id",
"label": "Github App Id",
"description": ""
},
{
"type": "text",
"name": "github-id-key",
"label": "Github client ID",
"description": ""
}
]
},
{
"name": "Slack",
"icon": "slack-icon",
"form": [
{
"type": "text",
"name": "slack-app-id",
"label": "Slack App Id",
"description": ""
},
{
"type": "text",
"name": "slack-id-key",
"label": "Slack client ID",
"description": ""
}
]
},
{
"name": "Spotify",
"icon": "spotify-icon",
"form": [
{
"type": "text",
"name": "spotify-app-id",
"label": "Spotify App Id",
"description": ""
},
{
"type": "text",
"name": "spotify-id-key",
"label": "Spotify client ID",
"description": ""
}
]
},
{
"name": "Twitch",
"icon": "twitch-icon",
"form": [
{
"type": "text",
"name": "twitch-app-id",
"label": "Twitch App Id",
"description": ""
},
{
"type": "text",
"name": "twitch-id-key",
"label": "Twitch client ID",
"description": ""
}
]
}
]
studio/pages/project/[ref]/auth/AuthFormSchema.tsx
+293
View File
@@ -0,0 +1,293 @@
import { object, string } from 'yup'
export default [
{
name: 'Email',
icon: 'email-icon',
form: [
{
type: 'text',
name: 'email-app-id',
label: 'email App Id',
description: '',
},
{
type: 'text',
name: 'email-id-key',
label: 'email client ID',
description: '',
},
{
type: 'text',
name: 'email-id-key',
label: 'email client ID',
description: '',
},
{
type: 'text',
name: 'email-id-key',
label: 'email client ID',
description: '',
},
],
},
{
name: 'Phone',
icon: 'phone-icon',
form: [
{
type: 'select',
name: 'phone-app-provider',
label: 'Phone service provider',
description: 'You can use a provider etc etc',
},
{
type: 'text',
name: 'phone-id-key',
label: 'phone client ID',
description: '',
},
{
type: 'text',
name: 'phone-id-key',
label: 'phone client ID',
description: '',
},
{
type: 'text',
name: 'phone-id-key',
label: 'phone client ID',
description: '',
},
],
},
{
name: 'Google',
icon: 'google-icon',
validationSchema: object({
'google-app-id': string()
.required('You need THIS')
.min(7, 'Needs to be at least 7 characters')
.max(10, 'Can not be longer than 10 characters'),
'google-id-key': string()
.required('You need THIS')
.min(7, 'Needs to be at least 7 characters')
.max(10, 'Can not be longer than 10 characters'),
}),
form: [
{
type: 'text',
name: 'google-app-id',
label: 'Google App Id',
description: '',
},
{
type: 'text',
name: 'google-id-key',
label: 'Google client ID',
description: '',
},
],
},
{
name: 'Facebook',
icon: 'facebook-icon',
form: [
{
type: 'text',
name: 'facebook-app-id',
label: 'Facebook App Id',
description: '',
},
{
type: 'text',
name: 'facebook-id-key',
label: 'Facebook client ID',
description: '',
},
],
},
{
name: 'Twitter',
icon: 'twitter-icon',
form: [
{
type: 'text',
name: 'twitter-app-id',
label: 'Twitter App Id',
description: '',
},
{
type: 'text',
name: 'twitter-id-key',
label: 'Twitter client ID',
description: '',
},
],
},
{
name: 'Apple',
icon: 'apple-icon',
form: [
{
type: 'text',
name: 'apple-app-id',
label: 'Apple App Id',
description: '',
},
{
type: 'text',
name: 'apple-id-key',
label: 'Apple client ID',
description: '',
},
],
},
{
name: 'Microsoft',
icon: 'microsoft-icon',
form: [
{
type: 'text',
name: 'microsoft-app-id',
label: 'Microsoft App Id',
description: '',
},
{
type: 'text',
name: 'microsoft-id-key',
label: 'Microsoft client ID',
description: '',
},
],
},
{
name: 'Gitlab',
icon: 'gitlab-icon',
form: [
{
type: 'text',
name: 'gitlab-app-id',
label: 'Gitlab App Id',
description: '',
},
{
type: 'text',
name: 'gitlab-id-key',
label: 'Gitlab client ID',
description: '',
},
],
},
{
name: 'Bitbucket',
icon: 'bitbucket-icon',
form: [
{
type: 'text',
name: 'bitbucket-app-id',
label: 'Bitbucket App Id',
description: '',
},
{
type: 'text',
name: 'bitbucket-id-key',
label: 'Bitbucket client ID',
description: '',
},
],
},
{
name: 'Discord',
icon: 'discord-icon',
form: [
{
type: 'text',
name: 'discord-app-id',
label: 'Discord App Id',
description: '',
},
{
type: 'text',
name: 'discord-id-key',
label: 'Discord client ID',
description: '',
},
],
},
{
name: 'Github',
icon: 'github-icon-dark',
form: [
{
type: 'text',
name: 'github-app-id',
label: 'Github App Id',
description: '',
},
{
type: 'text',
name: 'github-id-key',
label: 'Github client ID',
description: '',
},
],
},
{
name: 'Slack',
icon: 'slack-icon',
form: [
{
type: 'text',
name: 'slack-app-id',
label: 'Slack App Id',
description: '',
},
{
type: 'text',
name: 'slack-id-key',
label: 'Slack client ID',
description: '',
},
],
},
{
name: 'Spotify',
icon: 'spotify-icon',
form: [
{
type: 'text',
name: 'spotify-app-id',
label: 'Spotify App Id',
description: '',
},
{
type: 'text',
name: 'spotify-id-key',
label: 'Spotify client ID',
description: '',
},
],
},
{
name: 'Twitch',
icon: 'twitch-icon',
form: [
{
type: 'text',
name: 'twitch-app-id',
label: 'Twitch App Id',
description: '',
},
{
type: 'text',
name: 'twitch-id-key',
label: 'Twitch client ID',
description: '',
},
],
},
]
studio/pages/project/[ref]/auth/settings-new.tsx
+89 -45
View File
@@ -1,53 +1,97 @@
import {
Button,
Collapsible,
Form,
IconArrowRight,
IconCheck,
IconChevronUp,
IconGlobe,
IconTrash,
IconX,
Input,
InputNumber,
Modal,
Tabs,
Toggle,
} from '@supabase/ui'
import { Loading } from '@supabase/ui'
import { AuthProvidersForm } from 'components/interfaces'
import { AuthLayout } from 'components/layouts'
import { withAuth } from 'hooks'
import { observer } from 'mobx-react-lite'
import React, { useReducer, useState } from 'react'
// import AuthFormSchema from './AuthFormSchema.json'
import { AutoSchemaForm } from 'components/ui/Forms'
import { useStore, withAuth } from 'hooks'
import { get } from 'lib/common/fetch'
import { API_URL } from 'lib/constants'
import { observer } from 'mobx-react-lite'
import { useRouter } from 'next/router'
import React from 'react'
import { useState } from 'react'
import { useEffect } from 'react'
import useSWR from 'swr'
import { NextPageWithLayout } from 'types'
const Auth = () => {
return (
<AuthLayout title="Auth">
<div className="p-4">
<WholeForm />
// const Auth = () => {
// return (
// <AuthLayout title="Auth">
// <div className="p-4">
// <WholeForm />
// </div>
// </AuthLayout>
// )
// }
const PageLayout: NextPageWithLayout = () => {
const router = useRouter()
const { ui, authConfig } = useStore()
const URL = `${API_URL}/auth/${router.query.ref}/config`
// const { data: config, error }: any = useSWR(URL, get)
// console.log(authConfig)
useEffect(() => {
// temporary store loader
authConfig.load()
}, [ui.selectedProjectRef])
const [model, setModel] = useState<any>({})
const [isCustomSMTPEnabled, setCustomSMTP] = useState<boolean>(false)
const [externalProvidersModel, setExternalProvidersModel] = useState<any>({})
if (!authConfig.isLoaded) {
return <Loading active={true}>{''}</Loading>
}
// if (error) {
// return (
// <span>
// <p>Error connecting to API</p>
// <p>{`${error}`}</p>
// </span>
// )
// }
// console.log(config)
// useEffect(() => {
// if (config) {
// const temp =
// config.SMTP_ADMIN_EMAIL ||
// config.SMTP_HOST ||
// config.SMTP_PORT ||
// config.SMTP_USER ||
// config.SMTP_PASS
// setCustomSMTP(temp)
// }
// setModel({ ...config })
// setExternalProvidersModel({ ...config })
// }, [config])
if (authConfig)
return (
<div style={{ width: '820px' }} className="mx-auto">
<div>
<h3 className="text-scale-1200 mb-2 text-2xl">General settings</h3>
<p className="text-scale-900 text-sm">
Turn payment methods on and off in one click – no engineering time required.
</p>
<p className="text-scale-900 text-sm">
Use our guide to check which payment methods are compatible with your integration.
</p>
<AutoSchemaForm />
</div>
<AuthProvidersForm />
</div>
</AuthLayout>
)
)
}
export function WholeForm() {
return (
<div style={{ width: '820px' }} className="mx-auto">
<div>
<h3 className="text-scale-1200 mb-2 text-2xl">General settings</h3>
<p className="text-scale-900 text-sm">
Turn payment methods on and off in one click – no engineering time required.
</p>
<p className="text-scale-900 text-sm">
Use our guide to check which payment methods are compatible with your integration.
</p>
<AutoSchemaForm />
</div>
</div>
)
PageLayout.getLayout = (page) => {
// console.log()
return <AuthLayout>{page}</AuthLayout>
}
export default withAuth(observer(Auth))
export default observer(PageLayout)
studio/pages/project/[ref]/auth/templates-new.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ import AutoSchemaForm from 'components/ui/Forms/AutoSchemaForm'
import { withAuth } from 'hooks'
import { observer } from 'mobx-react-lite'
import React, { useReducer, useState } from 'react'
import AuthFormSchema from './AuthFormSchema.json'
import AuthFormSchema from './AuthFormSchema'
// import GoogleIcon './../../../static/icons/google-icon.svg'
studio/public/img/icons/apple-icon.svg
+56
View File
@@ -0,0 +1,56 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="842.32007"
viewBox="0 0 842.32007 1000.0001"
version="1.1"
height="1000.0001"
id="svg2"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
sodipodi:docname="Apple_logo_black.svg">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1366"
inkscape:window-height="705"
id="namedview6"
showgrid="false"
inkscape:zoom="0.1767767"
inkscape:cx="-621.03745"
inkscape:cy="964.94676"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<path
d="m 824.66636,779.30363 c -15.12299,34.93724 -33.02368,67.09674 -53.7638,96.66374 -28.27076,40.3074 -51.4182,68.2078 -69.25717,83.7012 -27.65347,25.4313 -57.2822,38.4556 -89.00964,39.1963 -22.77708,0 -50.24539,-6.4813 -82.21973,-19.629 -32.07926,-13.0861 -61.55985,-19.5673 -88.51583,-19.5673 -28.27075,0 -58.59083,6.4812 -91.02193,19.5673 -32.48053,13.1477 -58.64639,19.9994 -78.65196,20.6784 -30.42501,1.29623 -60.75123,-12.0985 -91.02193,-40.2457 -19.32039,-16.8514 -43.48632,-45.7394 -72.43607,-86.6641 C 77.707522,829.30207 52.171259,778.62464 32.165691,720.84861 10.740416,658.44309 0,598.01283 0,539.50845 0,472.49197 14.481044,414.69125 43.486336,366.25444 66.28194,327.34823 96.60818,296.6578 134.5638,274.1276 c 37.95566,-22.53016 78.96676,-34.01129 123.1321,-34.74585 24.16591,0 55.85633,7.47508 95.23784,22.166 39.27042,14.74029 64.48571,22.21538 75.54091,22.21538 8.26518,0 36.27668,-8.7405 83.7629,-26.16587 44.90607,-16.16001 82.80614,-22.85118 113.85458,-20.21546 84.13326,6.78992 147.34122,39.95559 189.37699,99.70686 -75.24463,45.59122 -112.46573,109.4473 -111.72502,191.36456 0.67899,63.8067 23.82643,116.90384 69.31888,159.06309 20.61664,19.56727 43.64066,34.69027 69.2571,45.4307 -5.55531,16.11062 -11.41933,31.54225 -17.65372,46.35662 z M 631.70926,20.0057 c 0,50.01141 -18.27108,96.70693 -54.6897,139.92782 -43.94932,51.38118 -97.10817,81.07162 -154.75459,76.38659 -0.73454,-5.99983 -1.16045,-12.31444 -1.16045,-18.95003 0,-48.01091 20.9006,-99.39207 58.01678,-141.40314 C 497.65157,54.696 521.21876,37.0095 549.79815,22.90064 578.3158,9.00229 605.2903,1.31621 630.65988,0 c 0.74076,6.68575 1.04938,13.37191 1.04938,20.00505 z"
id="path4"
inkscape:connector-curvature="0"
style="stroke-width:0.84231985;fill:#b3b3b3;fill-opacity:1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

studio/public/img/icons/bitbucket-icon.svg
+1
View File
@@ -0,0 +1 @@
<svg height="2256" preserveAspectRatio="xMidYMid" width="2500" xmlns="http://www.w3.org/2000/svg" viewBox="-0.9662264221278978 -0.5824607696358868 257.93281329857973 230.8324730411935"><linearGradient id="a" x1="108.633%" x2="46.927%" y1="13.818%" y2="78.776%"><stop offset=".18" stop-color="#0052cc"/><stop offset="1" stop-color="#2684ff"/></linearGradient><g fill="none"><path d="M101.272 152.561h53.449l12.901-75.32H87.06z"/><path d="M8.308 0A8.202 8.202 0 0 0 .106 9.516l34.819 211.373a11.155 11.155 0 0 0 10.909 9.31h167.04a8.202 8.202 0 0 0 8.201-6.89l34.82-213.752a8.202 8.202 0 0 0-8.203-9.514zm146.616 152.768h-53.315l-14.436-75.42h80.67z" fill="#2684ff"/><path d="M244.61 77.242h-76.916l-12.909 75.36h-53.272l-62.902 74.663a11.105 11.105 0 0 0 7.171 2.704H212.73a8.196 8.196 0 0 0 8.196-6.884z" fill="url(#a)"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 831 B

studio/public/img/icons/discord-icon.svg
+10
View File
@@ -0,0 +1,10 @@
<svg width="71" height="55" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="#5865F2"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="71" height="55" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

studio/public/img/icons/email-icon2.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="gray" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 402 B

studio/public/img/icons/facebook-icon.svg
+18
View File
@@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="14.2222in" height="14.2222in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 14222 14222"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:#1977F3;fill-rule:nonzero}
.fil1 {fill:#FEFEFE;fill-rule:nonzero}
]]>
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path class="fil0" d="M14222 7111c0,-3927 -3184,-7111 -7111,-7111 -3927,0 -7111,3184 -7111,7111 0,3549 2600,6491 6000,7025l0 -4969 -1806 0 0 -2056 1806 0 0 -1567c0,-1782 1062,-2767 2686,-2767 778,0 1592,139 1592,139l0 1750 -897 0c-883,0 -1159,548 -1159,1111l0 1334 1972 0 -315 2056 -1657 0 0 4969c3400,-533 6000,-3475 6000,-7025z"/>
<path class="fil1" d="M9879 9167l315 -2056 -1972 0 0 -1334c0,-562 275,-1111 1159,-1111l897 0 0 -1750c0,0 -814,-139 -1592,-139 -1624,0 -2686,984 -2686,2767l0 1567 -1806 0 0 2056 1806 0 0 4969c362,57 733,86 1111,86 378,0 749,-30 1111,-86l0 -4969 1657 0z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

studio/public/img/icons/github-icon-dark.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.58 31.77" fill="currentColor">
<path
fill="#FFFFFF"
d="M16.29,0a16.29,16.29,0,0,0-5.15,31.75c.82.15,1.11-.36,1.11-.79s0-1.41,0-2.77C7.7,29.18,6.74,26,6.74,26a4.36,4.36,0,0,0-1.81-2.39c-1.47-1,.12-1,.12-1a3.43,3.43,0,0,1,2.49,1.68,3.48,3.48,0,0,0,4.74,1.36,3.46,3.46,0,0,1,1-2.18c-3.62-.41-7.42-1.81-7.42-8a6.3,6.3,0,0,1,1.67-4.37,5.94,5.94,0,0,1,.16-4.31s1.37-.44,4.48,1.67a15.41,15.41,0,0,1,8.16,0c3.11-2.11,4.47-1.67,4.47-1.67A5.91,5.91,0,0,1,25,11.07a6.3,6.3,0,0,1,1.67,4.37c0,6.26-3.81,7.63-7.44,8a3.85,3.85,0,0,1,1.11,3c0,2.18,0,3.94,0,4.47s.29.94,1.12.78A16.29,16.29,0,0,0,16.29,0Z"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 667 B

studio/public/img/icons/github-icon.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.58 31.77" fill="gray">
<path
fill="currentColor"
d="M16.29,0a16.29,16.29,0,0,0-5.15,31.75c.82.15,1.11-.36,1.11-.79s0-1.41,0-2.77C7.7,29.18,6.74,26,6.74,26a4.36,4.36,0,0,0-1.81-2.39c-1.47-1,.12-1,.12-1a3.43,3.43,0,0,1,2.49,1.68,3.48,3.48,0,0,0,4.74,1.36,3.46,3.46,0,0,1,1-2.18c-3.62-.41-7.42-1.81-7.42-8a6.3,6.3,0,0,1,1.67-4.37,5.94,5.94,0,0,1,.16-4.31s1.37-.44,4.48,1.67a15.41,15.41,0,0,1,8.16,0c3.11-2.11,4.47-1.67,4.47-1.67A5.91,5.91,0,0,1,25,11.07a6.3,6.3,0,0,1,1.67,4.37c0,6.26-3.81,7.63-7.44,8a3.85,3.85,0,0,1,1.11,3c0,2.18,0,3.94,0,4.47s.29.94,1.12.78A16.29,16.29,0,0,0,16.29,0Z"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 664 B

studio/public/img/icons/gitlab-icon.svg
+45
View File
@@ -0,0 +1,45 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 586 559" style="enable-background:new 0 0 586 559;" xml:space="preserve">
<style type="text/css">
.st0{fill:#E24329;}
.st1{fill:#FCA326;}
.st2{fill:#FC6D26;}
.st3{display:none;}
.st4{display:inline;opacity:0.1;fill:#E828E3;enable-background:new ;}
.st5{display:inline;}
.st6{font-family:'ArialMT';}
.st7{font-size:24px;}
</style>
<g id="logo_art">
<g>
<path id="path50_2_" class="st0" d="M293,548.3L293,548.3l107.5-330.8H185.6L293,548.3L293,548.3z"/>
<path id="path66_6_" class="st1" d="M35,217.5L35,217.5L2.3,318c-3,9.1,0.2,19.2,8.1,24.9L293,548.3L35,217.5L35,217.5z"/>
<path id="path74_2_" class="st0" d="M35,217.5h150.6L120.8,18.3c-3.3-10.2-17.8-10.2-21.2,0L35,217.5L35,217.5z"/>
<path id="path82_6_" class="st1" d="M551.2,217.5L551.2,217.5L583.8,318c3,9.1-0.2,19.2-8.1,24.9L293,548.3L551.2,217.5
L551.2,217.5z"/>
<path id="path86_2_" class="st0" d="M551.2,217.5H400.6l64.7-199.2c3.3-10.2,17.8-10.2,21.2,0L551.2,217.5L551.2,217.5z"/>
<polygon class="st2" points="293,548.3 400.6,217.5 551.2,217.5 "/>
<polygon class="st2" points="293,548.3 35,217.5 185.6,217.5 "/>
</g>
</g>
<g id="spacing_guides" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" class="st3">
<path id="path40_18_" sketch:type="MSShapeGroup" class="st4" d="M0,0.5v124h586V0.5H0L0,0.5z"/>
<path id="path40_16_" sketch:type="MSShapeGroup" class="st4" d="M0,435.5v124h586v-124H0L0,435.5z"/>
<path id="path40_15_" sketch:type="MSShapeGroup" class="st4" d="M462.2,560h124V0h-124V560L462.2,560z"/>
<g class="st5">
<text transform="matrix(1 0 0 1 511.2881 283.3319)" class="st6 st7">1x</text>
</g>
<g class="st5">
<text transform="matrix(1 0 0 1 281.2881 500.9977)" class="st6 st7">1x</text>
</g>
<g class="st5">
<text transform="matrix(1 0 0 1 281.2881 65.998)" class="st6 st7">1x</text>
</g>
<path id="path40_5_" sketch:type="MSShapeGroup" class="st4" d="M0,560h124V0H0V560L0,560z"/>
<g class="st5">
<text transform="matrix(1 0 0 1 51.2881 283.3319)" class="st6 st7">1x</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

studio/public/img/icons/google-icon.svg
+1
View File
@@ -0,0 +1 @@
<svg width="2443" height="2500" viewBox="0 0 256 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1018 B

studio/public/img/icons/keycloak-icon.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M472.136 163.959H408.584C407.401 163.959 406.218 163.327 405.666 162.3L354.651 73.6591C354.02 72.632 352.916 72 351.654 72H143.492C142.309 72 141.126 72.632 140.574 73.6591L87.5084 165.618L36.414 254.259C35.862 255.286 35.862 256.55 36.414 257.656L87.5084 346.297L140.495 438.335C141.047 439.362 142.23 440.073 143.413 439.994H351.654C352.837 439.994 354.02 439.362 354.651 438.335L405.745 349.694C406.297 348.667 407.48 347.956 408.663 348.035H472.215C474.344 348.035 476 346.297 476 344.243V167.83C475.921 165.697 474.186 163.959 472.136 163.959ZM228.728 349.694L212.721 377.345C212.485 377.74 212.091 378.135 211.696 378.372C211.223 378.609 210.75 378.767 210.198 378.767H178.422C177.318 378.767 176.293 378.214 175.82 377.187L128.431 294.787L123.779 286.65L106.748 257.498C106.511 257.103 106.353 256.629 106.432 256.076C106.432 255.602 106.59 255.049 106.827 254.654L123.937 224.949L175.899 134.886C176.451 133.938 177.476 133.306 178.501 133.306H210.198C210.75 133.306 211.302 133.464 211.854 133.701C212.248 133.938 212.643 134.254 212.879 134.728L228.886 162.537C229.359 163.485 229.28 164.67 228.728 165.539L177.397 254.654C177.16 255.049 177.081 255.523 177.081 255.918C177.081 256.392 177.239 256.787 177.397 257.182L228.728 346.218C229.438 347.403 229.359 348.667 228.728 349.694ZM388.083 257.498L371.051 286.65L366.399 294.787L319.011 377.187C318.459 378.135 317.512 378.767 316.409 378.767H284.632C284.08 378.767 283.607 378.609 283.134 378.372C282.74 378.135 282.346 377.819 282.109 377.345L266.103 349.694C265.393 348.667 265.393 347.403 266.024 346.376L317.355 257.34C317.591 256.945 317.67 256.471 317.67 256.076C317.67 255.602 317.513 255.207 317.355 254.812L266.024 165.697C265.472 164.749 265.393 163.643 265.866 162.695L281.873 134.886C282.109 134.491 282.503 134.096 282.898 133.859C283.371 133.543 283.923 133.464 284.553 133.464H316.409C317.512 133.464 318.538 134.017 319.011 135.044L370.972 225.107L388.083 254.812C388.319 255.286 388.477 255.76 388.477 256.234C388.477 256.55 388.319 257.024 388.083 257.498Z" fill="#008AAA"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

studio/public/img/icons/linkedin-icon.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="512px" height="512px"><path fill="#0288D1" d="M42,37c0,2.762-2.238,5-5,5H11c-2.761,0-5-2.238-5-5V11c0-2.762,2.239-5,5-5h26c2.762,0,5,2.238,5,5V37z"/><path fill="#FFF" d="M12 19H17V36H12zM14.485 17h-.028C12.965 17 12 15.888 12 14.499 12 13.08 12.995 12 14.514 12c1.521 0 2.458 1.08 2.486 2.499C17 15.887 16.035 17 14.485 17zM36 36h-5v-9.099c0-2.198-1.225-3.698-3.192-3.698-1.501 0-2.313 1.012-2.707 1.99C24.957 25.543 25 26.511 25 27v9h-5V19h5v2.616C25.721 20.5 26.85 19 29.738 19c3.578 0 6.261 2.25 6.261 7.274L36 36 36 36z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 600 B

studio/public/img/icons/messagebird-icon.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M57.425 14.726c-2.568 0-4.863 1.284-6.264 3.23l-9.454 13.228a1.9 1.9 0 0 1-1.556.817 1.91 1.91 0 0 1-1.906-1.906c0-.39.117-.778.31-1.05L46.53 17.1c.817-1.206 1.284-2.684 1.284-4.28 0-4.24-3.424-7.664-7.664-7.664H0v7.664h34.393c0 2.1-1.712 3.852-3.852 3.852H0c0 2.723.584 5.33 1.595 7.664H26.69c0 2.1-1.712 3.852-3.852 3.852H3.852a19.12 19.12 0 0 0 15.368 7.664h9.454a1.91 1.91 0 0 1 1.906 1.906 1.91 1.91 0 0 1-1.906 1.906H19.18l-12.84 19.18h23.227c10.62 0 19.647-6.925 22.8-16.496l4.32-13.11c1.4-4.24 3.968-7.976 7.314-10.816-1.323-2.218-3.774-3.696-6.575-3.696zm0 5.252c-.778 0-1.44-.66-1.44-1.44s.66-1.44 1.44-1.44 1.44.66 1.44 1.44c0 .817-.66 1.44-1.44 1.44z" fill="#2481d7"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 758 B

studio/public/img/icons/microsoft-icon.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><path fill="#f3f3f3" d="M0 0h23v23H0z"/><path fill="#f35325" d="M1 1h10v10H1z"/><path fill="#81bc06" d="M12 1h10v10H12z"/><path fill="#05a6f0" d="M1 12h10v10H1z"/><path fill="#ffba08" d="M12 12h10v10H12z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 272 B

studio/public/img/icons/notion-icon.svg
+1
View File
@@ -0,0 +1 @@
<svg fill="gray" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="512px" height="512px"><path d="M 15.46875 1.5 L 2.9804688 2 A 0.50038132 0.50038132 0 0 0 2.9511719 2.0019531 A 1.0001 1.0001 0 0 0 2.9296875 2.0039062 A 1.0001 1.0001 0 0 0 2 3 L 2 16.894531 C 2 17.487 2.1760213 18.066018 2.5039062 18.558594 L 5.1679688 22.554688 A 1.0001 1.0001 0 0 0 6.0625 22.998047 L 22.0625 21.998047 A 1.0001 1.0001 0 0 0 23 21 L 23 5.5 A 1.0001 1.0001 0 0 0 22.736328 4.8242188 A 0.50037856 0.50037856 0 0 0 22.587891 4.6933594 A 0.50037856 0.50037856 0 0 0 22.585938 4.6914062 A 1.0001 1.0001 0 0 0 22.398438 4.5839844 L 18.296875 2.2441406 L 18.330078 2.265625 C 17.492273 1.6962298 16.485312 1.4260957 15.474609 1.5 L 15.46875 1.5 z M 15.525391 2.4980469 A 0.50005 0.50005 0 0 0 15.542969 2.4980469 C 16.330286 2.4394359 17.115017 2.6483002 17.767578 3.0917969 A 0.50005 0.50005 0 0 0 17.800781 3.1132812 L 20.324219 4.5527344 L 6.8554688 4.9882812 L 4.46875 2.9414062 L 15.525391 2.4980469 z M 21 6.5332031 L 21 20.060547 L 7 20.935547 L 7 6.984375 L 21 6.5332031 z M 19.441406 8.5019531 C 18.427406 8.5619531 17.407625 8.6115 16.390625 8.6875 C 16.056625 8.7125 15.808578 9.0013594 15.767578 9.3183594 C 15.748578 9.4663594 15.789031 9.5426875 15.957031 9.5546875 C 16.265031 9.5776875 16.570625 9.6212031 16.890625 9.6582031 L 16.890625 15.527344 C 16.796625 15.392344 16.745266 15.321047 16.697266 15.248047 C 15.387266 13.269047 14.071438 11.293641 12.773438 9.3066406 C 12.577437 9.0066406 12.393953 8.86225 12.001953 8.90625 C 11.084953 9.00725 10.160234 9.0373281 9.2402344 9.1113281 C 8.7302344 9.1523281 8.4274531 9.5989844 8.5644531 10.083984 C 8.9094531 10.113984 9.2572813 10.144781 9.6132812 10.175781 L 9.6132812 18.607422 C 9.3792813 18.673422 9.1461563 18.747688 8.9101562 18.804688 C 8.6701563 18.862688 8.5577187 19.024094 8.5117188 19.246094 C 8.4747187 19.424094 8.5183281 19.514047 8.7363281 19.498047 C 9.4853281 19.445047 10.238281 19.412188 10.988281 19.367188 C 11.298281 19.349188 11.609063 19.342969 11.914062 19.292969 C 12.330062 19.223969 12.556563 18.970453 12.601562 18.564453 C 12.231563 18.482453 11.859375 18.392312 11.484375 18.320312 C 11.317375 18.288312 11.260719 18.219875 11.261719 18.046875 C 11.267719 16.090875 11.266578 14.133734 11.267578 12.177734 C 11.267578 12.113734 11.280969 12.048406 11.292969 11.941406 C 11.350969 12.018406 11.374484 12.049984 11.396484 12.083984 C 12.408484 13.654984 13.417547 15.229875 14.435547 16.796875 C 14.873547 17.470875 15.322203 18.137875 15.783203 18.796875 C 16.117203 19.274875 16.607063 19.426547 17.164062 19.310547 C 17.512062 19.237547 17.8465 19.098234 18.1875 18.990234 C 18.3775 18.930234 18.432641 18.807422 18.431641 18.607422 C 18.424641 15.733422 18.427734 12.860328 18.427734 9.9863281 C 18.427734 9.4513281 18.426031 9.4517969 18.957031 9.3417969 C 19.445031 9.2407969 19.588406 9.0019531 19.441406 8.5019531 z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

studio/public/img/icons/phone-icon4.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="gray">
<path stroke="inherit" stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 405 B

studio/public/img/icons/slack-icon.svg
+1
View File
@@ -0,0 +1 @@
<svg enable-background="new 0 0 2447.6 2452.5" viewBox="0 0 2447.6 2452.5" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill-rule="evenodd"><path d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z" fill="#36c5f0"/><path d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z" fill="#2eb67d"/><path d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z" fill="#ecb22e"/><path d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0" fill="#e01e5a"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

studio/public/img/icons/spotify-icon.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1333.33 1333.3" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"><path d="M666.66 0C298.48 0 0 298.47 0 666.65c0 368.19 298.48 666.65 666.66 666.65 368.22 0 666.67-298.45 666.67-666.65C1333.33 298.49 1034.88.03 666.65.03l.01-.04zm305.73 961.51c-11.94 19.58-37.57 25.8-57.16 13.77-156.52-95.61-353.57-117.26-585.63-64.24-22.36 5.09-44.65-8.92-49.75-31.29-5.12-22.37 8.84-44.66 31.26-49.75 253.95-58.02 471.78-33.04 647.51 74.35 19.59 12.02 25.8 37.57 13.77 57.16zm81.6-181.52c-15.05 24.45-47.05 32.17-71.49 17.13-179.2-110.15-452.35-142.05-664.31-77.7-27.49 8.3-56.52-7.19-64.86-34.63-8.28-27.49 7.22-56.46 34.66-64.82 242.11-73.46 543.1-37.88 748.89 88.58 24.44 15.05 32.16 47.05 17.12 71.46V780zm7.01-189.02c-214.87-127.62-569.36-139.35-774.5-77.09-32.94 9.99-67.78-8.6-77.76-41.55-9.98-32.96 8.6-67.77 41.56-77.78 235.49-71.49 626.96-57.68 874.34 89.18 29.69 17.59 39.41 55.85 21.81 85.44-17.52 29.63-55.89 39.4-85.42 21.8h-.03z" fill="#1ed760" fill-rule="nonzero"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

studio/public/img/icons/textlocal-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

studio/public/img/icons/twilio-icon.svg
+1
View File
@@ -0,0 +1 @@
<svg fill="#F22F46" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M15 0C6.7 0 0 6.7 0 15s6.7 15 15 15 15-6.7 15-15S23.3 0 15 0zm0 26C8.9 26 4 21.1 4 15S8.9 4 15 4s11 4.9 11 11-4.9 11-11 11zm6.8-14.7c0 1.7-1.4 3.1-3.1 3.1s-3.1-1.4-3.1-3.1 1.4-3.1 3.1-3.1 3.1 1.4 3.1 3.1zm0 7.4c0 1.7-1.4 3.1-3.1 3.1s-3.1-1.4-3.1-3.1c0-1.7 1.4-3.1 3.1-3.1s3.1 1.4 3.1 3.1zm-7.4 0c0 1.7-1.4 3.1-3.1 3.1s-3.1-1.4-3.1-3.1c0-1.7 1.4-3.1 3.1-3.1s3.1 1.4 3.1 3.1zm0-7.4c0 1.7-1.4 3.1-3.1 3.1S8.2 13 8.2 11.3s1.4-3.1 3.1-3.1 3.1 1.4 3.1 3.1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 544 B

studio/public/img/icons/twitch-icon.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M5.7 0L1.4 10.985V55.88h15.284V64h8.597l8.12-8.12h12.418l16.716-16.716V0H5.7zm51.104 36.3L47.25 45.85H31.967l-8.12 8.12v-8.12H10.952V5.73h45.85V36.3zM47.25 16.716v16.716h-5.73V16.716h5.73zm-15.284 0v16.716h-5.73V16.716h5.73z" fill="#6441a4" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 340 B

studio/public/img/icons/twitter-icon.svg
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="256px" height="209px" viewBox="0 0 256 209" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<g>
<path d="M256,25.4500259 C246.580841,29.6272672 236.458451,32.4504868 225.834156,33.7202333 C236.678503,27.2198053 245.00583,16.9269929 248.927437,4.66307685 C238.779765,10.6812633 227.539325,15.0523376 215.57599,17.408298 C205.994835,7.2006971 192.34506,0.822 177.239197,0.822 C148.232605,0.822 124.716076,24.3375931 124.716076,53.3423116 C124.716076,57.4586875 125.181462,61.4673784 126.076652,65.3112644 C82.4258385,63.1210453 43.7257252,42.211429 17.821398,10.4359288 C13.3005011,18.1929938 10.710443,27.2151234 10.710443,36.8402889 C10.710443,55.061526 19.9835254,71.1374907 34.0762135,80.5557137 C25.4660961,80.2832239 17.3681846,77.9207088 10.2862577,73.9869292 C10.2825122,74.2060448 10.2825122,74.4260967 10.2825122,74.647085 C10.2825122,100.094453 28.3867003,121.322443 52.413563,126.14673 C48.0059695,127.347184 43.3661509,127.988612 38.5755734,127.988612 C35.1914554,127.988612 31.9009766,127.659938 28.694773,127.046602 C35.3777973,147.913145 54.7742053,163.097665 77.7569918,163.52185 C59.7820257,177.607983 37.1354036,186.004604 12.5289147,186.004604 C8.28987161,186.004604 4.10888474,185.75646 0,185.271409 C23.2431033,200.173139 50.8507261,208.867532 80.5109185,208.867532 C177.116529,208.867532 229.943977,128.836982 229.943977,59.4326002 C229.943977,57.1552968 229.893412,54.8901664 229.792282,52.6381454 C240.053257,45.2331635 248.958338,35.9825545 256,25.4500259" fill="#55acee"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

studio/public/img/icons/vonage-icon.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="66" height="58" viewBox="0 0 66 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H13.0127L25.4577 27.641L19.3007 42.182C19.1697 42.4877 18.6893 42.4877 18.5583 42.182L0 0Z" fill="#080808"/>
<path d="M30.0427 49.911C32.7063 45.6753 52.662 0 52.662 0V0.0436627H65.9367C65.9367 0.0436627 46.3303 45.0203 43.9723 49.3433C41.92 53.1423 38.1647 57.4653 33.012 57.4653H21.091C21.0473 57.4653 21.0037 57.4217 21.0037 57.378C21.0037 57.3343 21.0037 57.2907 21.0473 57.2907C24.89 56.6793 26.9423 54.8017 30.0427 49.911Z" fill="#080808"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 563 B

studio/public/img/icons/workos-icon.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M33 256.043C33 264.556 35.3159 273.069 39.4845 280.202L117.993 415.493C126.098 429.298 138.373 440.572 153.657 445.634C183.764 455.528 214.797 442.873 229.618 417.333L248.609 384.661L173.806 256.043L252.777 119.831L271.768 87.1591C277.557 77.2654 284.968 69.4424 294 63H285.894H172.185C150.878 63 131.193 74.2742 120.54 92.6812L39.7161 231.884C35.3159 239.016 33 247.53 33 256.043Z" fill="#6363F1"/>
<path d="M480 256.058C480 247.539 477.684 239.021 473.516 231.883L393.849 94.6596C379.028 69.3331 347.995 56.4396 317.888 66.34C302.603 71.4053 290.329 82.6871 282.224 96.5015L264.391 127.354L339.194 256.058L260.223 392.131L241.232 424.825C235.443 434.495 228.032 442.553 219 449H227.106H340.815C362.122 449 381.807 437.718 392.46 419.299L473.284 280.003C477.684 272.866 480 264.577 480 256.058Z" fill="#6363F1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 930 B

studio/public/img/icons/zoom-icon.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="512px" height="512px"><circle cx="24" cy="24" r="20" fill="#2196f3"/><path fill="#fff" d="M29,31H14c-1.657,0-3-1.343-3-3V17h15c1.657,0,3,1.343,3,3V31z"/><polygon fill="#fff" points="37,31 31,27 31,21 37,17"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 282 B

studio/stores/RootStore.ts
+7
View File
@@ -5,6 +5,9 @@ import MetaStore, { IMetaStore } from './pgmeta/MetaStore'
import UiStore, { IUiStore } from './UiStore'
import ProjectContentStore, { IProjectContentStore } from './content/ProjectContentStore'
import ProjectFunctionsStore, { IProjectFunctionsStore } from './functions/ProjectFunctionsStore'
import ProjectAuthConfigStore, {
IProjectAuthConfigStore,
} from './authConfig/ProjectAuthConfigStore'
// Temporary disable mobx warnings
// TODO: need to remove this after refactoring old stores.
@@ -16,6 +19,7 @@ export interface IRootStore {
ui: IUiStore
content: IProjectContentStore
functions: IProjectFunctionsStore
authConfig: IProjectAuthConfigStore
meta: IMetaStore
app: IAppStore
setProjectRef: (value?: string) => void
@@ -25,6 +29,7 @@ export class RootStore implements IRootStore {
ui: IUiStore
content: IProjectContentStore
functions: IProjectFunctionsStore
authConfig: IProjectAuthConfigStore
meta: IMetaStore
app: IAppStore
@@ -33,6 +38,7 @@ export class RootStore implements IRootStore {
// @ts-ignore
this.content = new ProjectContentStore(this, { projectRef: '' })
this.functions = new ProjectFunctionsStore(this, { projectRef: '' })
this.authConfig = new ProjectAuthConfigStore(this, { projectRef: '' })
this.meta = new MetaStore(this, {
projectRef: '',
connectionString: '',
@@ -86,6 +92,7 @@ export class RootStore implements IRootStore {
this.ui.setProjectRef(value)
this.functions.setProjectRef(value)
this.authConfig.setProjectRef(value)
this.content.setProjectRef(value)
}
studio/stores/authConfig/ProjectAuthConfigStore.ts
+124
View File
@@ -0,0 +1,124 @@
import { makeAutoObservable, toJS } from 'mobx'
import { keyBy } from 'lodash'
import { get, post, patch, delete_ } from 'lib/common/fetch'
import { UserContent, UserContentMap } from 'types'
import { IRootStore } from '../RootStore'
import { API_URL } from 'lib/constants'
// [Joshen] This will be the new ProjectContentStore
// but use the one under the stores folder projectContentStore first while we transition
export interface IProjectAuthConfigStore {
isLoading: boolean
isInitialized: boolean
isLoaded: boolean
error: any
config: any
baseUrl: string
projectRef: string
load: () => void
update: ({}) => void
setProjectRef: (ref?: string) => void
}
export default class ProjectAuthConfigStore implements IProjectAuthConfigStore {
rootStore: IRootStore
STATES = {
INITIAL: 'initial',
LOADING: 'loading',
ERROR: 'error',
LOADED: 'loaded',
}
baseUrl: string
projectRef: string
// @ts-ignore
data: UserContentMap = []
state = this.STATES.INITIAL
error = null
constructor(rootStore: IRootStore, options: { projectRef: string }) {
const { projectRef } = options
this.projectRef = projectRef
this.rootStore = rootStore
this.baseUrl = ``
makeAutoObservable(this)
}
get isLoading() {
return this.state === this.STATES.INITIAL || this.state === this.STATES.LOADING
}
get isInitialized() {
return this.state !== this.STATES.INITIAL
}
get isLoaded() {
return this.state === this.STATES.LOADED
}
get config() {
return this.data
}
async fetchData() {
const headers = {
'Content-Type': 'application/json',
}
console.log('this.baseUrl', this.baseUrl)
const response = await get(this.baseUrl, { headers })
console.log('response in authCOnfig store', response)
if (response.error) {
throw response.error
}
this.data = response
return response
}
async load() {
let { LOADING, ERROR, LOADED } = this.STATES
try {
this.error = null
this.state = LOADING
await this.fetchData()
this.state = LOADED
return this.data
} catch (e: any) {
console.error('Failed to load auth config', e.message)
this.error = e
this.state = ERROR
}
}
byId(id: any) {
return toJS(this.data)[id]
}
async update(updates: any) {
try {
const headers = {
'Content-Type': 'application/json',
}
let payload = {
...updates,
}
const url = `${this.baseUrl}`
const updated = await patch(url, payload, { headers })
if (updated.error) throw updated.error
this.data = updated
return { data: updated, error: null }
} catch (error) {
return { data: null, error }
}
}
setProjectRef(ref?: string) {
if (ref) {
this.projectRef = ref
this.baseUrl = `${API_URL}/auth/${ref}/config`
}
}
}
studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx
+1508
View File
File diff suppressed because it is too large. Load diff
studio/stores/authConfig/schema/index.ts
+1
View File
@@ -0,0 +1 @@
export { PROVIDERS_SCHEMAS } from './AuthProviders/AuthProvidersFormValidation'