issue #6 adding faq, typo fixes

config.ini

@@ -36,7 +36,7 @@ HOSTED_ZONE_ID = Z0205454134UILBVG0TC
 SSL_CERTIFICATE = arn:aws:acm:us-east-1:748909248546:certificate/44fe9e04-6511-4a46-a0b8-36209d443f21
 DOCUMENT_ROOT = index.html 
 # app
-VITE_OIDC_AUTHORITY=https://auth-test.ala.org.au/cas/oidc
+VITE_OIDC_AUTHORITY=https://auth-dev.ala.org.au/cas/oidc
 VITE_OIDC_REDIRECT_URI=https://${SUB_DOMAIN}.${HOSTED_ZONE}/login
 VITE_OIDC_LOGOUT_REDIRECT_URI=https://${SUB_DOMAIN}.${HOSTED_ZONE}/logout
 

src/components/client-registration.tsx

@@ -116,7 +116,7 @@ function ClientRegistration(): ReactElement {
                     e.preventDefault();
                 }}
             >
-                Sumbit
+                Submit
             </a>
         );
     }
@@ -131,7 +131,7 @@ function ClientRegistration(): ReactElement {
             <div>
             <Title className={classes.title}>Client Application Registration</Title>
             <Text className={classes.description} mt="sm" mb={30}>
-                Please provide details in the adjacent form for Client Registration. Once registered, you will be provided with Client ID and Secret required for token generation and refresh. 
+                Please provide details in the adjacent form for Client Registration. Once registered, our team will provide you with Client ID and Secret required for token generation and refresh. 
             </Text>
 
             </div>
@@ -181,10 +181,10 @@ function ClientRegistration(): ReactElement {
                             value={scopes}
                             onChange={(event) => setScopes(event.target.value)}
                         />
-                        <Tooltip   position="bottom" className={classes.toolTip} label="The callback/redirect for your application ALA should redirect to after authentication. This is only required if you are planning to generate JWTs on your own front-end application(s) via PKCE or Implict OAuth flows.">
+                        <Tooltip   position="bottom" className={classes.toolTip} label="The callback/redirect for your application ALA should redirect to after authentication. This is only required if you are planning to generate JWTs on your own front-end application(s) via PKCE or Implicit OAuth flows.">
                             <TextInput
                                 label="Callback URL (Optional)"
-                                placeholder="e.g. https://myapp.exmaple.com"
+                                placeholder="e.g. https://myapp.example.com"
                                 classNames={{ input: classes.input, label: classes.inputLabel }}
                                 value={callbackUrl}
                                 onChange={(event) => setCallbackUrl(event.target.value)}

src/components/faq.tsx

@@ -1,23 +1,24 @@
-import {Box} from '@mantine/core';
+import {Accordion, Box, Container} from '@mantine/core';
 
 function Faq(): React.ReactElement {
     return (
-        <Box
-        sx={(theme) => ({
-          backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
-          textAlign: 'center',
-          padding: theme.spacing.xl,
-          borderRadius: theme.radius.md,
-          cursor: 'pointer',
-
-          '&:hover': {
-            backgroundColor:
-              theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-          },
-        })}
-      >
-        FAQs coming soon!
-      </Box>
+        <div style={{"width":"90%"}}>
+          <Accordion>
+            <Accordion.Item label="Why do I need a token?">
+                ALA aggregates data from many providers, and most of these data are open and freely accessible to all. However, some data are private for their intended audience only, such as for user accounts, location data for sensitive species, and administration/edit access to particular projects. 
+                We use access tokens as a secure method of verifying user access to these specific APIs.
+            </Accordion.Item>
+
+            <Accordion.Item label="Why do need to register?">
+              Access Tokens (JWTs) need to be associated with a registered application and as such, a Client Application must be registered with the ALA. 
+              The level of access to resources, i.e. scopes,  an access token has is defined in the Client Application amongst other permissions and restrictions. These attributes will be applied to any and all access tokens generated using the associated Client Id and Secret. 
+            </Accordion.Item>
+
+            <Accordion.Item label="How long will it take to receive the Client ID and Secret?">
+              Once you’ve submitted the registration form, our team will respond to you as soon as they can. This may take some time if they are working through many requests. 
+            </Accordion.Item>
+          </Accordion>
+          </div>
     );
   }
 

src/components/token-ui.tsx

@@ -61,14 +61,14 @@ const  UI: React.FC<{config: AuthProps}> = ({config}) => {
                 <Stepper.Step label="Client Registration" description="Register Client Application">
                     <br />
                     <Alert icon={<IconInfoCircle size={16} />} color="blue"> Before JSON Web Tokens (JWT) can be generated and used for protected API access, a Client Application must registered with the ALA. Once registered, a Client ID, and optionally, a Client Secret will be provided to the resource owner i.e. user. for token generation and refresh.</Alert>
-                    <p>If you do not yet have Client Details,  click 'Register'and follow the registration process.</p>
+                    <p>If you do not yet have Client Details,  click 'Register' and follow the registration process.</p>
 
                 </Stepper.Step>
                 <br />
                 <Stepper.Step label="Enter Client Details" description="Enter Client details e.g. Client ID and Secret of the registered application">
                   <TextInput
                       label="Client ID"
-                      placeholder="exmaple-client-id"
+                      placeholder="example-client-id"
                       description="Client ID of a registered application"
                       id='client-id'
                       value={clientId} onInput={(event) => setClientId(event.currentTarget.value)} 
@@ -78,15 +78,15 @@ const  UI: React.FC<{config: AuthProps}> = ({config}) => {
                   <TextInput
                       label="Scopes"
                       placeholder="openid email ala"
-                      description="Scopes (resource permission) to assign for the access token"
+                      description="Scopes (resource permissions) to assign for the access token"
                       value={scope} onInput={(event) => setScope(event.currentTarget.value)}  
                   />
                   <br />
                   <TextInput
                       label="Client Secret (Optional)"
                       placeholder="Client secret"
                       type='password'
-                      description="Client secret of a registered application. Only required for clients registered as private client applications(eg. server side web application)."
+                      description="Client secret of a registered application. Only required for clients registered as private client applications( eg. server side web application)."
                       value={clientSecret} onInput={(event) => setClientSecret(event.currentTarget.value)} 
                   />
                 </Stepper.Step>

yarn.lock

@@ -1069,6 +1069,11 @@
   "resolved" "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz"
   "version" "0.14.54"
 
+"esbuild-linux-arm64@0.14.54":
+  "integrity" "sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig=="
+  "resolved" "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz"
+  "version" "0.14.54"
+
 "esbuild@^0.14.27":
   "integrity" "sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA=="
   "resolved" "https://registry.npmjs.org/esbuild/-/esbuild-0.14.54.tgz"