Skip to content

Commit

Permalink
refactor: oauth factory
Browse files Browse the repository at this point in the history 
Signed-off-by: Innei <i@innei.in>
  • Loading branch information
@Innei
Innei committed Sep 3, 2024
1 parent cf796ed commit 8c24ba1
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 113 deletions.
3 changes: 2 additions & 1 deletion src/views/setting/tabs/auth.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ import {
useInjectOauthData,
useProvideOauthData,
} from './providers/oauth'
import { GitHubProvider } from './sections/oauth'
import { GitHubProvider, GoogleProvider } from './sections/oauth'

export const TabAuth = defineComponent({
setup() {
Expand Down Expand Up @@ -283,6 +283,7 @@ const Oauth = defineComponent(() => {
<NH2 class={'mb-0'}>OAuth</NH2>
<div class={'mt-8 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3'}>
<GitHubProvider />
<GoogleProvider />
</div>
</NLayoutContent>
)
Expand Down
239 changes: 127 additions & 112 deletions src/views/setting/tabs/sections/oauth.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,134 +8,149 @@ import {
NP,
NSwitch,
} from 'naive-ui'
import type { BuiltInProviderType } from '@auth/core/providers'
import type { FormInst } from 'naive-ui/lib'

import { RESTManager } from '~/utils'
import { signIn } from '~/utils/authjs'

import { useInjectOauthData } from '../providers/oauth'

export const GitHubProvider = defineComponent({
setup() {
const handleValidate = async () => {
await signIn('github', { callbackUrl: `${location.href}?validate=true` })
}
export const createProvideSectionComponent = (
type: BuiltInProviderType,
options: {
name: string
},
) =>
defineComponent({
setup() {
const handleValidate = async () => {
await signIn(type, {
callbackUrl: `${location.href}?validate=true`,
})
}

const oauthData = useInjectOauthData()
const formValueRef = ref({
clientId: '',
secret: '',
})
const isEnabled = ref(false)
const oauthData = useInjectOauthData()
const formValueRef = ref({
clientId: '',
secret: '',
})
const isEnabled = ref(false)

watchEffect(() => {
if (oauthData.value.github === undefined) return
const { clientId, enabled } = oauthData.value.github
isEnabled.value = enabled
formValueRef.value.clientId = clientId
})
watchEffect(() => {
if (oauthData.value[type] === undefined) return
const { clientId, enabled } = oauthData.value[type]
isEnabled.value = enabled
formValueRef.value.clientId = clientId
})

const formRef = ref<null | FormInst>(null)
const rules = {
clientId: [{ required: true, message: 'Client Id 不能为空' }],
secret: [{ required: true, message: 'Client Secret 不能为空' }],
}
const formRef = ref<null | FormInst>(null)
const rules = {
clientId: [{ required: true, message: 'Client Id 不能为空' }],
secret: [{ required: true, message: 'Client Secret 不能为空' }],
}

const handleSave = async () => {
await formRef.value?.validate()
const handleSave = async () => {
await formRef.value?.validate()

const type = 'github'
RESTManager.api.options('oauth').patch({
data: {
providers: [
{
type,
enabled: true,
RESTManager.api.options('oauth').patch({
data: {
providers: [
{
type,
enabled: isEnabled.value,
},
],
secrets: {
[type]: {
clientSecret: formValueRef.value.secret,
},
},
],
secrets: {
[type]: {
clientSecret: formValueRef.value.secret,
public: {
[type]: {
clientId: formValueRef.value.clientId,
},
},
},
public: {
[type]: {
clientId: formValueRef.value.clientId,
},
},
},
})
}
})
}

return () => (
<NCard title={'GitHub'}>
{{
default() {
return (
<NForm model={formValueRef.value} ref={formRef} rules={rules}>
<NFormItem label="Client Id" path="clientId" required>
<NInput
value={formValueRef.value.clientId}
onUpdateValue={(v) => {
formValueRef.value.clientId = v
}}
/>
</NFormItem>
return () => (
<NCard title={options.name}>
{{
default() {
return (
<NForm model={formValueRef.value} ref={formRef} rules={rules}>
<NFormItem label="Client Id" path="clientId" required>
<NInput
value={formValueRef.value.clientId}
onUpdateValue={(v) => {
formValueRef.value.clientId = v
}}
/>
</NFormItem>

<NFormItem label="Client Secret" required path="secret">
<NInput
showPasswordToggle
type="password"
value={formValueRef.value.secret}
onUpdateValue={(v) => {
formValueRef.value.secret = v
}}
/>
</NFormItem>
<NFormItem label="Client Secret" required path="secret">
<NInput
showPasswordToggle
type="password"
value={formValueRef.value.secret}
onUpdateValue={(v) => {
formValueRef.value.secret = v
}}
/>
</NFormItem>

<NP class={'text-sm'}>
请在 GitHub Developer Settings 中创建 OAuth App
<br /> Callback URL 填写{' '}
<NButton
onClick={() => {
navigator.clipboard.writeText(
`${RESTManager.endpoint}/auth/callback/github`,
)
message.success('已复制到剪贴板')
}}
text
>
{RESTManager.endpoint}/auth/callback/github
</NButton>
</NP>
</NForm>
)
},
action() {
return (
<div class={'flex justify-between'}>
<label class={'flex items-center gap-2'}>
启用
<NSwitch
value={isEnabled.value}
onUpdateValue={(v) => {
isEnabled.value = v
}}
/>
</label>
<NButtonGroup>
<NButton onClick={handleValidate} type="tertiary" round>
验证
</NButton>
<NButton onClick={handleSave} type="primary" round>
保存
</NButton>
</NButtonGroup>
</div>
)
},
}}
</NCard>
)
},
<NP class={'text-sm'}>
<br /> Callback URL 填写{' '}
<NButton
onClick={() => {
navigator.clipboard.writeText(
`${RESTManager.endpoint}/auth/callback/${type}`,
)
message.success('已复制到剪贴板')
}}
text
>
{RESTManager.endpoint}/auth/callback/{type}
</NButton>
</NP>
</NForm>
)
},
action() {
return (
<div class={'flex justify-between'}>
<label class={'flex items-center gap-2'}>
启用
<NSwitch
value={isEnabled.value}
onUpdateValue={(v) => {
isEnabled.value = v
}}
/>
</label>
<NButtonGroup>
<NButton onClick={handleValidate} type="tertiary" round>
验证
</NButton>
<NButton onClick={handleSave} type="primary" round>
保存
</NButton>
</NButtonGroup>
</div>
)
},
}}
</NCard>
)
},
})

export const GitHubProvider = createProvideSectionComponent('github', {
name: 'GitHub',
})

export const GoogleProvider = createProvideSectionComponent('google', {
name: 'Google',
})

0 comments on commit 8c24ba1

Please sign in to comment.