mirror of
https://github.com/wasp-lang/wasp.git
synced 2024-10-26 08:57:28 +03:00
Extracts Message component from OAuthCallback page (#1991)
This commit is contained in:
Mihovil Ilakovac
GitHub
parent
e916adb820
commit
62f88055a7
@ -5,35 +5,14 @@ import { Redirect, useLocation } from 'react-router-dom'
|
||||
import { useAuth } from 'wasp/client/auth'
|
||||
import { api } from 'wasp/client/api'
|
||||
import { initSession } from 'wasp/auth/helpers/user'
|
||||
import { MessageLoading, MessageError } from "../../components/Message";
|
||||
|
||||
const wrapperStyles = {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "4rem",
|
||||
};
|
||||
|
||||
const commonMessageStyles = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '.5rem',
|
||||
borderRadius: '.5rem',
|
||||
padding: '1rem',
|
||||
};
|
||||
|
||||
const errorMessageStyles = {
|
||||
...commonMessageStyles,
|
||||
borderColor: 'rgb(240 82 82)',
|
||||
backgroundColor: 'rgb(253 232 232)',
|
||||
color: 'rgb(200 30 30)',
|
||||
};
|
||||
|
||||
const loadingMessageStyles = {
|
||||
...commonMessageStyles,
|
||||
borderColor: 'rgb(107 114 128)',
|
||||
backgroundColor: 'rgb(243 244 246)',
|
||||
color: 'rgb(55 65 81)',
|
||||
};
|
||||
justifyContent: 'center',
|
||||
padding: '4rem',
|
||||
}
|
||||
|
||||
export function OAuthCallbackPage() {
|
||||
const { isLoading, error, user } = useOAuthCallbackHandler();
|
||||
@ -44,8 +23,8 @@ export function OAuthCallbackPage() {
|
||||
|
||||
return (
|
||||
<div style={wrapperStyles}>
|
||||
{error && <div style={errorMessageStyles}><MessageIcon /> {error}</div>}
|
||||
{isLoading && <div style={loadingMessageStyles}><MessageIcon /> Please wait a moment while we log you in.</div>}
|
||||
{error && <MessageError>{error}</MessageError>}
|
||||
{isLoading && <MessageLoading>Please wait a moment while we log you in.</MessageLoading>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -99,26 +78,6 @@ function useOAuthCallbackHandler() {
|
||||
};
|
||||
}
|
||||
|
||||
const MessageIcon = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.25rem"
|
||||
height="1.25rem"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth={0}
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
stroke="none"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a1 1 0 0 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2v-3a1 1 0 0 0-1-1H9z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
async function exchangeOAuthCodeForToken(data: {
|
||||
code: string
|
||||
}): Promise<AxiosResponse<unknown>> {
|
||||
|
||||
@ -0,0 +1,65 @@
|
||||
const commonMessageStyles = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '.5rem',
|
||||
borderRadius: '.5rem',
|
||||
padding: '1rem',
|
||||
}
|
||||
|
||||
const errorMessageStyles = {
|
||||
...commonMessageStyles,
|
||||
borderColor: 'rgb(240 82 82)',
|
||||
backgroundColor: 'rgb(253 232 232)',
|
||||
color: 'rgb(200 30 30)',
|
||||
}
|
||||
|
||||
const loadingMessageStyles = {
|
||||
...commonMessageStyles,
|
||||
borderColor: 'rgb(107 114 128)',
|
||||
backgroundColor: 'rgb(243 244 246)',
|
||||
color: 'rgb(55 65 81)',
|
||||
}
|
||||
|
||||
export function MessageError({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div style={errorMessageStyles}>
|
||||
<MessageIcon /> {children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function MessageLoading({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div style={loadingMessageStyles}>
|
||||
<MessageIcon /> {children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const MessageIcon = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.25rem"
|
||||
height="1.25rem"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth={0}
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
stroke="none"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a1 1 0 0 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2v-3a1 1 0 0 0-1-1H9z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
@ -210,6 +210,7 @@ waspBuild/.wasp/build/web-app/public/.gitkeep
|
||||
waspBuild/.wasp/build/web-app/public/favicon.ico
|
||||
waspBuild/.wasp/build/web-app/public/manifest.json
|
||||
waspBuild/.wasp/build/web-app/scripts/validate-env.mjs
|
||||
waspBuild/.wasp/build/web-app/src/components/Message.tsx
|
||||
waspBuild/.wasp/build/web-app/src/index.tsx
|
||||
waspBuild/.wasp/build/web-app/src/logo.png
|
||||
waspBuild/.wasp/build/web-app/src/router.tsx
|
||||
|
||||
@ -545,6 +545,13 @@
|
||||
],
|
||||
"a9a3a7eb6bc3ead49d8e3850a70737c93c789098beb3b40196bf145fd38893cd"
|
||||
],
|
||||
[
|
||||
[
|
||||
"file",
|
||||
"web-app/src/components/Message.tsx"
|
||||
],
|
||||
"8851c3201f8e165d647a66abe5457e837cfb750790f393428d16be51c41ee2e5"
|
||||
],
|
||||
[
|
||||
[
|
||||
"file",
|
||||
|
||||
@ -0,0 +1,65 @@
|
||||
const commonMessageStyles = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '.5rem',
|
||||
borderRadius: '.5rem',
|
||||
padding: '1rem',
|
||||
}
|
||||
|
||||
const errorMessageStyles = {
|
||||
...commonMessageStyles,
|
||||
borderColor: 'rgb(240 82 82)',
|
||||
backgroundColor: 'rgb(253 232 232)',
|
||||
color: 'rgb(200 30 30)',
|
||||
}
|
||||
|
||||
const loadingMessageStyles = {
|
||||
...commonMessageStyles,
|
||||
borderColor: 'rgb(107 114 128)',
|
||||
backgroundColor: 'rgb(243 244 246)',
|
||||
color: 'rgb(55 65 81)',
|
||||
}
|
||||
|
||||
export function MessageError({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div style={errorMessageStyles}>
|
||||
<MessageIcon /> {children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function MessageLoading({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div style={loadingMessageStyles}>
|
||||
<MessageIcon /> {children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const MessageIcon = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.25rem"
|
||||
height="1.25rem"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth={0}
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
stroke="none"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a1 1 0 0 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2v-3a1 1 0 0 0-1-1H9z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
@ -207,6 +207,7 @@ waspCompile/.wasp/out/web-app/public/.gitkeep
|
||||
waspCompile/.wasp/out/web-app/public/favicon.ico
|
||||
waspCompile/.wasp/out/web-app/public/manifest.json
|
||||
waspCompile/.wasp/out/web-app/scripts/validate-env.mjs
|
||||
waspCompile/.wasp/out/web-app/src/components/Message.tsx
|
||||
waspCompile/.wasp/out/web-app/src/index.tsx
|
||||
waspCompile/.wasp/out/web-app/src/logo.png
|
||||
waspCompile/.wasp/out/web-app/src/router.tsx
|
||||
|
||||
@ -559,6 +559,13 @@
|
||||
],
|
||||
"a9a3a7eb6bc3ead49d8e3850a70737c93c789098beb3b40196bf145fd38893cd"
|
||||
],
|
||||
[
|
||||
[
|
||||
"file",
|
||||
"web-app/src/components/Message.tsx"
|
||||
],
|
||||
"8851c3201f8e165d647a66abe5457e837cfb750790f393428d16be51c41ee2e5"
|
||||
],
|
||||
[
|
||||
[
|
||||
"file",
|
||||
|
||||
@ -0,0 +1,65 @@
|
||||
const commonMessageStyles = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '.5rem',
|
||||
borderRadius: '.5rem',
|
||||
padding: '1rem',
|
||||
}
|
||||
|
||||
const errorMessageStyles = {
|
||||
...commonMessageStyles,
|
||||
borderColor: 'rgb(240 82 82)',
|
||||
backgroundColor: 'rgb(253 232 232)',
|
||||
color: 'rgb(200 30 30)',
|
||||
}
|
||||
|
||||
const loadingMessageStyles = {
|
||||
...commonMessageStyles,
|
||||
borderColor: 'rgb(107 114 128)',
|
||||
backgroundColor: 'rgb(243 244 246)',
|
||||
color: 'rgb(55 65 81)',
|
||||
}
|
||||
|
||||
export function MessageError({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div style={errorMessageStyles}>
|
||||
<MessageIcon /> {children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function MessageLoading({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div style={loadingMessageStyles}>
|
||||
<MessageIcon /> {children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const MessageIcon = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.25rem"
|
||||
height="1.25rem"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth={0}
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
stroke="none"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a1 1 0 0 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2v-3a1 1 0 0 0-1-1H9z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
@ -464,6 +464,7 @@ waspComplexTest/.wasp/out/web-app/public/manifest.json
|
||||
waspComplexTest/.wasp/out/web-app/scripts/validate-env.mjs
|
||||
waspComplexTest/.wasp/out/web-app/src/auth/pages/OAuthCallback.tsx
|
||||
waspComplexTest/.wasp/out/web-app/src/auth/pages/createAuthRequiredPage.jsx
|
||||
waspComplexTest/.wasp/out/web-app/src/components/Message.tsx
|
||||
waspComplexTest/.wasp/out/web-app/src/index.tsx
|
||||
waspComplexTest/.wasp/out/web-app/src/logo.png
|
||||
waspComplexTest/.wasp/out/web-app/src/router.tsx
|
||||
|
||||
@ -1138,7 +1138,7 @@
|
||||
"file",
|
||||
"web-app/src/auth/pages/OAuthCallback.tsx"
|
||||
],
|
||||
"cae2fb9d5e096386387ef5caa75f3d2730c1fcd86d91ba8a6efbe023cb66b529"
|
||||
"09bd320039ac42ffc821bc7c40737cc5d6ee7cd0b6ddc47c85c4284b2bd70a44"
|
||||
],
|
||||
[
|
||||
[
|
||||
@ -1147,6 +1147,13 @@
|
||||
],
|
||||
"04ca0c6aa20114998fb60080474026d80b9efbb7fc3cbe29f86a5ecab2300b05"
|
||||
],
|
||||
[
|
||||
[
|
||||
"file",
|
||||
"web-app/src/components/Message.tsx"
|
||||
],
|
||||
"8851c3201f8e165d647a66abe5457e837cfb750790f393428d16be51c41ee2e5"
|
||||
],
|
||||
[
|
||||
[
|
||||
"file",
|
||||
|
||||
@ -4,35 +4,14 @@ import { Redirect, useLocation } from 'react-router-dom'
|
||||
import { useAuth } from 'wasp/client/auth'
|
||||
import { api } from 'wasp/client/api'
|
||||
import { initSession } from 'wasp/auth/helpers/user'
|
||||
import { MessageLoading, MessageError } from "../../components/Message";
|
||||
|
||||
const wrapperStyles = {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "4rem",
|
||||
};
|
||||
|
||||
const commonMessageStyles = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '.5rem',
|
||||
borderRadius: '.5rem',
|
||||
padding: '1rem',
|
||||
};
|
||||
|
||||
const errorMessageStyles = {
|
||||
...commonMessageStyles,
|
||||
borderColor: 'rgb(240 82 82)',
|
||||
backgroundColor: 'rgb(253 232 232)',
|
||||
color: 'rgb(200 30 30)',
|
||||
};
|
||||
|
||||
const loadingMessageStyles = {
|
||||
...commonMessageStyles,
|
||||
borderColor: 'rgb(107 114 128)',
|
||||
backgroundColor: 'rgb(243 244 246)',
|
||||
color: 'rgb(55 65 81)',
|
||||
};
|
||||
justifyContent: 'center',
|
||||
padding: '4rem',
|
||||
}
|
||||
|
||||
export function OAuthCallbackPage() {
|
||||
const { isLoading, error, user } = useOAuthCallbackHandler();
|
||||
@ -43,8 +22,8 @@ export function OAuthCallbackPage() {
|
||||
|
||||
return (
|
||||
<div style={wrapperStyles}>
|
||||
{error && <div style={errorMessageStyles}><MessageIcon /> {error}</div>}
|
||||
{isLoading && <div style={loadingMessageStyles}><MessageIcon /> Please wait a moment while we log you in.</div>}
|
||||
{error && <MessageError>{error}</MessageError>}
|
||||
{isLoading && <MessageLoading>Please wait a moment while we log you in.</MessageLoading>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -98,26 +77,6 @@ function useOAuthCallbackHandler() {
|
||||
};
|
||||
}
|
||||
|
||||
const MessageIcon = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.25rem"
|
||||
height="1.25rem"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth={0}
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
stroke="none"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a1 1 0 0 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2v-3a1 1 0 0 0-1-1H9z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
async function exchangeOAuthCodeForToken(data: {
|
||||
code: string
|
||||
}): Promise<AxiosResponse<unknown>> {
|
||||
|
||||
@ -0,0 +1,65 @@
|
||||
const commonMessageStyles = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '.5rem',
|
||||
borderRadius: '.5rem',
|
||||
padding: '1rem',
|
||||
}
|
||||
|
||||
const errorMessageStyles = {
|
||||
...commonMessageStyles,
|
||||
borderColor: 'rgb(240 82 82)',
|
||||
backgroundColor: 'rgb(253 232 232)',
|
||||
color: 'rgb(200 30 30)',
|
||||
}
|
||||
|
||||
const loadingMessageStyles = {
|
||||
...commonMessageStyles,
|
||||
borderColor: 'rgb(107 114 128)',
|
||||
backgroundColor: 'rgb(243 244 246)',
|
||||
color: 'rgb(55 65 81)',
|
||||
}
|
||||
|
||||
export function MessageError({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div style={errorMessageStyles}>
|
||||
<MessageIcon /> {children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function MessageLoading({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div style={loadingMessageStyles}>
|
||||
<MessageIcon /> {children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const MessageIcon = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.25rem"
|
||||
height="1.25rem"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth={0}
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
stroke="none"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a1 1 0 0 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2v-3a1 1 0 0 0-1-1H9z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
@ -242,6 +242,7 @@ waspJob/.wasp/out/web-app/public/.gitkeep
|
||||
waspJob/.wasp/out/web-app/public/favicon.ico
|
||||
waspJob/.wasp/out/web-app/public/manifest.json
|
||||
waspJob/.wasp/out/web-app/scripts/validate-env.mjs
|
||||
waspJob/.wasp/out/web-app/src/components/Message.tsx
|
||||
waspJob/.wasp/out/web-app/src/index.tsx
|
||||
waspJob/.wasp/out/web-app/src/logo.png
|
||||
waspJob/.wasp/out/web-app/src/router.tsx
|
||||
|
||||
@ -629,6 +629,13 @@
|
||||
],
|
||||
"a9a3a7eb6bc3ead49d8e3850a70737c93c789098beb3b40196bf145fd38893cd"
|
||||
],
|
||||
[
|
||||
[
|
||||
"file",
|
||||
"web-app/src/components/Message.tsx"
|
||||
],
|
||||
"8851c3201f8e165d647a66abe5457e837cfb750790f393428d16be51c41ee2e5"
|
||||
],
|
||||
[
|
||||
[
|
||||
"file",
|
||||
|
||||
65
waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/components/Message.tsx
generated
Normal file
65
waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/components/Message.tsx
generated
Normal file
@ -0,0 +1,65 @@
|
||||
const commonMessageStyles = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '.5rem',
|
||||
borderRadius: '.5rem',
|
||||
padding: '1rem',
|
||||
}
|
||||
|
||||
const errorMessageStyles = {
|
||||
...commonMessageStyles,
|
||||
borderColor: 'rgb(240 82 82)',
|
||||
backgroundColor: 'rgb(253 232 232)',
|
||||
color: 'rgb(200 30 30)',
|
||||
}
|
||||
|
||||
const loadingMessageStyles = {
|
||||
...commonMessageStyles,
|
||||
borderColor: 'rgb(107 114 128)',
|
||||
backgroundColor: 'rgb(243 244 246)',
|
||||
color: 'rgb(55 65 81)',
|
||||
}
|
||||
|
||||
export function MessageError({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div style={errorMessageStyles}>
|
||||
<MessageIcon /> {children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function MessageLoading({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div style={loadingMessageStyles}>
|
||||
<MessageIcon /> {children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const MessageIcon = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.25rem"
|
||||
height="1.25rem"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth={0}
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
stroke="none"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a1 1 0 0 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2v-3a1 1 0 0 0-1-1H9z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
@ -211,6 +211,7 @@ waspMigrate/.wasp/out/web-app/public/.gitkeep
|
||||
waspMigrate/.wasp/out/web-app/public/favicon.ico
|
||||
waspMigrate/.wasp/out/web-app/public/manifest.json
|
||||
waspMigrate/.wasp/out/web-app/scripts/validate-env.mjs
|
||||
waspMigrate/.wasp/out/web-app/src/components/Message.tsx
|
||||
waspMigrate/.wasp/out/web-app/src/index.tsx
|
||||
waspMigrate/.wasp/out/web-app/src/logo.png
|
||||
waspMigrate/.wasp/out/web-app/src/router.tsx
|
||||
|
||||
@ -559,6 +559,13 @@
|
||||
],
|
||||
"a9a3a7eb6bc3ead49d8e3850a70737c93c789098beb3b40196bf145fd38893cd"
|
||||
],
|
||||
[
|
||||
[
|
||||
"file",
|
||||
"web-app/src/components/Message.tsx"
|
||||
],
|
||||
"8851c3201f8e165d647a66abe5457e837cfb750790f393428d16be51c41ee2e5"
|
||||
],
|
||||
[
|
||||
[
|
||||
"file",
|
||||
|
||||
@ -0,0 +1,65 @@
|
||||
const commonMessageStyles = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '.5rem',
|
||||
borderRadius: '.5rem',
|
||||
padding: '1rem',
|
||||
}
|
||||
|
||||
const errorMessageStyles = {
|
||||
...commonMessageStyles,
|
||||
borderColor: 'rgb(240 82 82)',
|
||||
backgroundColor: 'rgb(253 232 232)',
|
||||
color: 'rgb(200 30 30)',
|
||||
}
|
||||
|
||||
const loadingMessageStyles = {
|
||||
...commonMessageStyles,
|
||||
borderColor: 'rgb(107 114 128)',
|
||||
backgroundColor: 'rgb(243 244 246)',
|
||||
color: 'rgb(55 65 81)',
|
||||
}
|
||||
|
||||
export function MessageError({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div style={errorMessageStyles}>
|
||||
<MessageIcon /> {children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function MessageLoading({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div style={loadingMessageStyles}>
|
||||
<MessageIcon /> {children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const MessageIcon = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.25rem"
|
||||
height="1.25rem"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth={0}
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
stroke="none"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a1 1 0 0 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2v-3a1 1 0 0 0-1-1H9z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
@ -195,6 +195,7 @@ genSrcDir spec =
|
||||
[ genFileCopy [relfile|logo.png|],
|
||||
genFileCopy [relfile|utils.js|],
|
||||
genFileCopy [relfile|vite-env.d.ts|],
|
||||
genFileCopy [relfile|components/Message.tsx|],
|
||||
getIndexTs spec
|
||||
]
|
||||
<++> genAuth spec
|
||||
|
||||
Loading…
Reference in New Issue
Block a user