[UI] Display/allow user to copy alternate Epic login URL (#2504)

* feat: copy epic login url

* fix: accent color button

Author: kshitijsubedi

public/locales/en/login.json

@@ -1,6 +1,9 @@
 {
     "button": {
-        "login": "Log in"
+        "login": "Log in",
+        "open":"Open Link",
+        "copy":"Copy",
+        "copied":"Copied!"
     },
     "message": {
         "part1": "In order to log in and install your games, you first need to follow the steps below:",

src/frontend/screens/Login/components/SIDLogin/index.css

@@ -54,6 +54,38 @@
   color: var(--link-highlight);
 }
 
+.loginInstructions .login-link {
+  display: flex;
+  background-color: var(--background-darker);
+  border-color: var(--accent);
+  color: var(--text-default);
+  padding: var(--space-2xs);
+  margin: var(--space-lg);
+  width: inherit;
+  justify-content: space-between;
+  user-select: text;
+}
+
+.loginInstructions .icon-button {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+.loginInstructions .icon-button:hover {
+  color: var(--accent-overlay);
+  border-color: var(--accent-overlay);
+}
+
+.loginInstructions .icon-button-success {
+  color: var(--success);
+  border-color: var(--success);
+}
+
+.loginInstructions .icon-button-success:hover {
+  color: var(--success-hover);
+  border-color: var(--success-hover);
+}
+
 .loginInstructions li {
   text-align: left;
 }

src/frontend/screens/Login/components/SIDLogin/index.tsx

@@ -1,5 +1,8 @@
 import React, { useContext, useState } from 'react'
 import Info from '@mui/icons-material/Info'
+import LinkIcon from '@mui/icons-material/Link'
+import PublicIcon from '@mui/icons-material/Public'
+import { Button, Paper, Stack, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { loginPage, sidInfoPage } from 'frontend/helpers'
 import './index.css'
@@ -11,16 +14,24 @@ interface Props {
 }
 
 export default function SIDLogin({ backdropClick }: Props) {
+  const epicLoginUrl = 'https://legendary.gl/epiclogin'
+
   const { epic } = useContext(ContextProvider)
   const { t } = useTranslation('login')
   const [input, setInput] = useState('')
   const [status, setStatus] = useState({
     loading: false,
     message: ''
   })
+  const [linkCopied, setLinkCopied] = useState(false)
 
   const { loading, message } = status
 
+  const handleCopyLink = () => {
+    window.api.clipboardWriteText(epicLoginUrl)
+    setLinkCopied(true)
+  }
+
   const handleLogin = async (sid: string) => {
     await epic.login(sid).then(async (res) => {
       setStatus({
@@ -67,6 +78,33 @@ export default function SIDLogin({ backdropClick }: Props) {
                   className="material-icons"
                 />
               </span>
+              <Paper variant="outlined" className="login-link">
+                <Typography variant="subtitle1" paddingLeft={2}>
+                  {epicLoginUrl}
+                </Typography>
+                <Stack direction="row" spacing={1}>
+                  <Button
+                    className={
+                      linkCopied ? 'icon-button-success' : 'icon-button'
+                    }
+                    onClick={handleCopyLink}
+                    endIcon={<LinkIcon fontSize="small" />}
+                    variant="outlined"
+                    size="small"
+                  >
+                    {linkCopied ? t('button.copied') : t('button.copy')}
+                  </Button>
+                  <Button
+                    className="icon-button"
+                    endIcon={<PublicIcon fontSize="small" />}
+                    onClick={() => loginPage()}
+                    size="small"
+                    variant="outlined"
+                  >
+                    {t('button.open')}
+                  </Button>
+                </Stack>
+              </Paper>
             </li>
             <li>
               {`${t('message.part6')} `}