diff --git a/src/app/dashboard/(organisation)/[slug]/widget/components/SocialSignInPopup.tsx b/src/app/dashboard/(organisation)/[slug]/widget/components/SocialSignInPopup.tsx index ace61b21..cf0d3286 100644 --- a/src/app/dashboard/(organisation)/[slug]/widget/components/SocialSignInPopup.tsx +++ b/src/app/dashboard/(organisation)/[slug]/widget/components/SocialSignInPopup.tsx @@ -1,3 +1,4 @@ +'use client'; import React, { useState } from 'react'; import { DialogContent, @@ -11,10 +12,13 @@ import { Button } from '@/components/ui/Button'; import { Plus } from 'lucide-react'; import { cn } from '@/lib/utils'; import { Input } from '@/components/ui/Input'; +import { Label } from '@/components/ui/Label'; import { useParams } from 'next/navigation'; import Spinner from '@/components/spinner'; import { updateStoreWithFetch, useWidgetStore } from '../widgetStore'; - +import Link from 'next/link'; +import { MdFileCopy } from 'react-icons/md'; +import { Badge } from '@/components/ui/Badge'; function SocialSignInPopup({ socialName }: { socialName: string }) { const { toast } = useToast(); const { slug: ORG_ID } = useParams(); @@ -25,6 +29,7 @@ function SocialSignInPopup({ socialName }: { socialName: string }) { const [client_id, setClient_id] = useState(''); const [client_secret, setClient_secret] = useState(''); + const [copied, setCopied] = useState(false); const { social } = useWidgetStore(); const socialType = socialName.toLocaleLowerCase(); @@ -44,7 +49,7 @@ function SocialSignInPopup({ socialName }: { socialName: string }) { if (client_id.length === 0 || client_secret.length === 0) { toast({ title: 'Client details required', - description: "Please put the client Id and client Secret", + description: 'Please put the client Id and client Secret', variant: 'destructive' }); return; @@ -156,6 +161,15 @@ function SocialSignInPopup({ socialName }: { socialName: string }) { destructiveToast(); } } + const handleClipBoardCopy = () => { + navigator.clipboard.writeText( + 'https://api.trustauthx.com/api/single/social/callback' + ); + setCopied(true); + setTimeout(() => { + setCopied(false); + }, 4000); + }; return (
- +

README: Google OAuth Config.

+

+ It provides a guidance to configure your own Google’s OAuth 2.0 + authentication system for more customized experience and avoiding any + rate limit levied by google via generic TrustAuthx application. +

+
@@ -189,10 +216,27 @@ function SocialSignInPopup({ socialName }: { socialName: string }) {

**Callback URI

- +
+ + + Copied! + + +

**Client ID

@@ -289,137 +333,4 @@ function SocialSignInPopup({ socialName }: { socialName: string }) { ); } -function ConfigText() { - return ( -
-

README: Google OAuth Config.

-

- It provides a guidance to configure your own Google’s OAuth 2.0 - authentication system for more customized experience and avoiding any - rate limit levied by google via generic TrustAuthx application. -

-

Set up a project in the Google API Console

-
    -
  • - Visit the Google API Console and sign in with your Google account. -
    • -
  • - Click the Select a project button on the top menu bar, and click the - New -
    • -
  • - Project button to create a project. In your newly created project, - click the APIs & Services to enter the APIs & Services menu. -
    • -
-

Configure your consent screen

-

Configure and register your application

-
    -
  • - On the left APIs & Services menu, click the OAuth consent screen - button.{' '} -
    • -
  • - Choose the User Type you want, and click the Create button. (Note: If - you select External as your User Type, you will need to add test users - later.) -
    • -
-

Now you will be on the Edit app registration page.

-

Edit app registration

-

Config OAuth consent screen

-
    -
  • - Follow the instructions to fill out the OAuth consent screen form. -
    • -
  • Click SAVE AND CONTINUE to continue.
    • -
-

Config scopes

-
    -
  • - Click ADD OR REMOVE SCOPES and select ../auth/userinfo.email, - ../auth/userinfo.profile and openid in the popup drawer, and click - UPDATE to finish. It is recommended that you consider adding all the - scopes you may use, otherwise some scopes you added in the - configuration may not work. -
    • -
  • Fill out the form as you need.
    • -
  • Click SAVE AND CONTINUE to continue.
    • - -

    Add test users (External user type only)

    - -
      -
    • - Click ADD USERS and add test users to allow these users to access - your application while testing. -
      • -
    • Click SAVE AND CONTINUE to continue.
      • -
    - -

    - Now you should have the Google OAuth 2.0 consent screen configured. -

    - -

    Obtain OAuth 2.0 credentials

    - -
      -
    • - On the left APIs & Services menu, click the Credentials button. -
      • -
    • - On the Credentials page, click the + CREATE CREDENTIALS button on - the top menu bar, and select OAuth client ID. -
      • -
    • - On the Create OAuth client ID page, select Web application as the - application type. -
      • -
    • Fill out the basic information for your application.
      • -
    • - Click + Add URI to add an authorized domain to the Authorized - JavaScript origins section. This is the domain that your logto - authorization page will be served from. In our case, this will be $ - your_logto_origin. e.g.https://logto.dev. -
      • -
    • - Click + Add URI in the Authorized redirect URIs section to set up - the Authorized redirect URIs, which redirect the user to the - application after logging in. In our case, this will be $ - your_logto_endpoint/callback/connector_id. e.g. - https://logto.dev/callback/connector_id. The connector_id can be - found on the top bar of the Logto Admin Console connector details - page. -
      • -
    • - Click Create to finish and then you will get the Client ID and - Client Secret. -
      • -
    - -

    Configure your connector

    - -

    - Fill out the clientId and clientSecret field with Client ID and Client - Secret you've got from OAuth app detail pages mentioned in the - previous section. -

    - -

    - scope is a space-delimited list of scopes. If not provided, scope - defaults to be openid profile email. -

    - -

    Config types

    -

    NameTypeclientIdstringclientSecretstringscopestring

    - -

    References

    - -
      - Google Identity: Setting up OAuth 2.0 -
    -
-
- ); -} - export default SocialSignInPopup; diff --git a/src/app/dashboard/(organisation)/[slug]/widget/components/email-settings.tsx b/src/app/dashboard/(organisation)/[slug]/widget/components/email-settings.tsx index c71b1e29..5d786f57 100644 --- a/src/app/dashboard/(organisation)/[slug]/widget/components/email-settings.tsx +++ b/src/app/dashboard/(organisation)/[slug]/widget/components/email-settings.tsx @@ -1,3 +1,4 @@ +import { useEffect } from 'react'; import { useWidgetStore } from '../widgetStore'; import { WidgetInput } from './widget-input'; @@ -12,6 +13,7 @@ export function EmailSettings() { setUserOrEmail, setPassword } = useWidgetStore(); + return (
{ toast({ variant: 'destructive', diff --git a/src/app/dashboard/(organisation)/[slug]/widget/widgetStore.ts b/src/app/dashboard/(organisation)/[slug]/widget/widgetStore.ts index 1bc43058..92f22e88 100644 --- a/src/app/dashboard/(organisation)/[slug]/widget/widgetStore.ts +++ b/src/app/dashboard/(organisation)/[slug]/widget/widgetStore.ts @@ -50,6 +50,14 @@ export type OrgObject = { color11: string; redirect_url?: string; }; + email_provider: { + smtp: { + password: string | undefined; + username: string | undefined; + smtp_server: string | undefined; + smtp_port?: string | undefined; + }; + }; callback_url?: string; social: Social; tnc_url?: string; @@ -448,7 +456,11 @@ export const updateStoreWithFetch = async (token: string, ORG_ID: string) => { ppURL: data.pp_url ?? '', hostURL: data.host ?? '', callbackURL: data.callback_url ?? '', - redirectURL: data.widget.redirect_url ?? '' + redirectURL: data.widget.redirect_url ?? '', + userOrEmail: data.email_provider?.smtp.username ?? '', + password: data.email_provider?.smtp.password ?? '', + smtpPort: data.email_provider?.smtp.smtp_port ?? '', + smtpProvider: data.email_provider?.smtp.smtp_server ?? '' })); setInitialState(data);