Merge pull request #4968 from h3poteto/iss-4961

refs #4961 Show authorization URL in login modal

locales/en/translation.json

@@ -41,6 +41,7 @@
       "domain": "Domain",
       "sign_in": "Sign in",
       "authorize": "Authorize",
+      "authorization_url": "Normally, the browser will open automatically, but if it doesn't, please open the following URL in your browser and approve it.",
       "authorization_code": "Authorization Code",
       "authorization_helper": "Please paste the authorization code from your browser",
       "without_code_authorize": "Please approve Whalebird in your browser, and after you approve it please authorize",

renderer/app.scss

@@ -114,6 +114,10 @@
   opacity: 1;
 }
 
+.no-scroll::-webkit-scrollbar {
+  display: none;
+}
+
 button:focus {
   outline: none;
 }

renderer/components/accounts/New.tsx

@@ -2,8 +2,9 @@ import generator, { MegalodonInterface, OAuth, detector } from 'megalodon'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { db } from '@/db'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { Alert, Button, Dialog, DialogBody, DialogHeader, Input, Spinner, Typography } from '@material-tailwind/react'
+import { Alert, Button, Dialog, DialogBody, DialogHeader, IconButton, Input, Spinner, Typography } from '@material-tailwind/react'
 import { invoke } from '@/utils/invoke'
+import { FaPaperclip } from 'react-icons/fa6'
 
 type NewProps = {
   opened: boolean
@@ -77,6 +78,10 @@ export default function New(props: NewProps) {
     }
   }, [props.opened, sns])
 
+  const copyText = (text: string) => {
+    navigator.clipboard.writeText(text)
+  }
+
   const authorize = async () => {
     setError('')
     setLoading(true)
@@ -169,6 +174,19 @@ export default function New(props: NewProps) {
               <>
                 {appData ? (
                   <form className="flex max-w-md flex-col gap-2" ref={authorizeFormRef}>
+                    <div>
+                      <Typography>
+                        <FormattedMessage id="accounts.new.authorization_url" />
+                      </Typography>
+                    </div>
+                    <div className="w-full px-1 flex justify-between">
+                      <span className="whitespace-nowrap overflow-x-auto w-11/12 p-1 bg-gray-200 dark:bg-gray-800 no-scroll">
+                        {appData.url}
+                      </span>
+                      <IconButton size="sm" variant="text" color="blue" onClick={() => copyText(appData.url)}>
+                        <FaPaperclip className="text-xl" />
+                      </IconButton>
+                    </div>
                     {appData.session_token ? (
                       <>
                         <div className="block text-gray-600">