Merge branch 'qa' into prod

eresearchqut · Aug 19, 2024 · 2416012 · 2416012
2 parents 97f0861 + 51d87ef
commit 2416012
Showing 1 changed file with 17 additions and 14 deletions.
diff --git a/frontend/pages/login.tsx b/frontend/pages/login.tsx
@@ -3,32 +3,35 @@ import * as React from "react"
 import {withLayout} from '@moxy/next-layout'
 import {LoginLayout} from '../components/layout'
 import Quotas from "../components/quotas";
-import {Heading, Link, ListItem, Text, UnorderedList, VStack,} from "@chakra-ui/react";
-import {ExternalLinkIcon} from "@chakra-ui/icons";
+import { Button, Heading, Link, ListItem, Text, UnorderedList, VStack } from "@chakra-ui/react";
+import { ArrowForwardIcon, ExternalLinkIcon } from "@chakra-ui/icons";
+import { useLogin } from "../context/auth-context";
+import { Box } from "@chakra-ui/layout";
 
 const Login: NextPage = () => {
 
+  const {handleLogin} = useLogin();
+
 
     return (
 
         <VStack p='4' spacing={4} align='stretch'>
             <Heading size={"md"}>QUT Audio Transcription Service</Heading>
-            <Text>Login required.</Text>
+            <Text>Login required. Click the button below to login with your QUT credentials.</Text>
+            <Box>
+              <Button onClick={handleLogin} variant='outline' rightIcon={<ArrowForwardIcon />}>
+                Login
+              </Button>
+            </Box>
 
             <Heading size={"md"}>Service Quotas and Limits</Heading>
             <Quotas/>
 
             <Heading size={"md"}>Powered by Amazon Transcribe</Heading>
-            <blockquote>Amazon Transcribe uses a deep learning process called automatic speech recognition (ASR) to
-                convert speech to text quickly and accurately. Amazon Transcribe can be used to transcribe customer
-                service calls, automate subtitling, and generate metadata for media assets to create a fully
-                searchable
-                archive. You can use Amazon Transcribe Medical to add medical speech to text capabilities to
-                clinical
-                documentation applications.
-            </blockquote>
-            <Link href={"https://aws.amazon.com/transcribe/"} isExternal mt={4}>Amazon
-                Transcribe <ExternalLinkIcon/></Link>
+            <Text><Link href={"https://aws.amazon.com/transcribe/"} isExternal mt={4}>Amazon
+              Transcribe <ExternalLinkIcon/></Link> uses a deep learning process called automatic speech recognition (ASR) to
+                convert speech to text quickly and accurately.
+            </Text>
 
             <Heading size={"md"}>Data storage and security</Heading>
             <Text>
@@ -38,7 +41,7 @@ const Login: NextPage = () => {
                 <ListItem>Stored in the Amazon Web Services (AWS) Sydney region</ListItem>
                 <ListItem>Kept for 14 days and then automatically deleted</ListItem>
                 <ListItem>Encrypted in transit and at rest</ListItem>
-                <ListItem>Media and transcriptions are accessible only by the uploader</ListItem>
+                <ListItem>Accessible only by the uploader</ListItem>
             </UnorderedList>
 
             <Text>For more