Myzel394/kleckrelay
1
0
Fork 0
mirror of https://github.com/Myzel394/kleckrelay-website.git synced 2025-06-19 07:55:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: Apply Prettier

Browse Source
This commit is contained in:
Myzel394 2023-02-18 20:11:12 +01:00
parent 491a6d82cc
commit abfe85f363
15 changed files with 61 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/apis/check-is-domain-disposable.ts
View File

@ -1,8 +1,6 @@
import {client} from "~/constants/axios-client"
export default async function checkIsDomainDisposable(
domain: string,
): Promise<boolean> {
export default async function checkIsDomainDisposable(domain: string): Promise<boolean> {
const {data} = await client.get(`https://api.mailcheck.ai/domain/${domain}`)
return !data.mx || data.disposable

16
src/components/widgets/FaviconImage.tsx
View File

@ -2,10 +2,7 @@ import React, {ReactElement, useState} from "react"
export interface FaviconImageProps
extends Omit<
React.DetailedHTMLProps<
React.ImgHTMLAttributes<HTMLImageElement>,
HTMLImageElement
>,
React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,
"src"
> {
url: string
@ -16,10 +13,7 @@ const getDomain = (url: string): string => {
return `${hostname}${port ? `:${port}` : ""}`
}
export default function FaviconImage({
url,
...props
}: FaviconImageProps): ReactElement {
export default function FaviconImage({url, ...props}: FaviconImageProps): ReactElement {
const [source, setSource] = useState<string>(`${url}/favicon.ico`)
return (
@ -27,11 +21,7 @@ export default function FaviconImage({
{...props}
src={source}
onError={() =>
setSource(
`https://external-content.duckduckgo.com/ip3/${getDomain(
url,
)}.ico`,
)
setSource(`https://external-content.duckduckgo.com/ip3/${getDomain(url)}.ico`)
}
/>
)

48
src/components/widgets/MultiStepForm.module.css
View File

@ -1,37 +1,37 @@
.animateOut {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
animation: slideOut 3s linear;
animation: slideOut 3s linear;
}
.animateIn {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
animation: slideIn 3s linear;
animation: slideIn 3s linear;
}
@keyframes slideIn {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@keyframes slideOut {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

36
src/components/widgets/MultiStepForm.tsx
View File

@ -46,8 +46,7 @@ function MultiStepForm({
}, [index, currentIndex])
const hasSize = Boolean(
(currentSize?.width || nextSize?.width) &&
(currentSize?.height || nextSize?.height),
(currentSize?.width || nextSize?.width) && (currentSize?.height || nextSize?.height),
)
return (
@ -58,12 +57,8 @@ function MultiStepForm({
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
width:
Math.max(currentSize?.width || 0, nextSize?.width || 0) ||
"100%",
height:
Math.max(currentSize?.height || 0, nextSize?.height || 0) ||
"100%",
width: Math.max(currentSize?.width || 0, nextSize?.width || 0) || "100%",
height: Math.max(currentSize?.height || 0, nextSize?.height || 0) || "100%",
overflow: hasSize ? "hidden" : "visible",
}}
>
@ -73,13 +68,9 @@ function MultiStepForm({
...currentSize,
position: "absolute",
transition: easing,
transitionDuration: isTransitioning
? `${duration}ms`
: "0ms",
transitionDuration: isTransitioning ? `${duration}ms` : "0ms",
transformOrigin: isTransitioning
? `${nextSize?.x - currentSize.x}px ${
nextSize?.y - currentSize.y
}px`
? `${nextSize?.x - currentSize.x}px ${nextSize?.y - currentSize.y}px`
: "",
// Scale the difference between currentSize and nextSize
transform: isTransitioning
@ -102,12 +93,7 @@ function MultiStepForm({
// @ts-ignore
$currentElement.current = ref
const {
width = 0,
height = 0,
x,
y,
} = ref.getBoundingClientRect()
const {width = 0, height = 0, x, y} = ref.getBoundingClientRect()
if (
width !== 0 &&
@ -152,16 +138,10 @@ function MultiStepForm({
height: "max-content",
transition: easing,
transitionDuration: isTransitioning ? `${duration}ms` : "",
transform: isTransitioning
? ""
: nextSize?.x
? "translateX(100%)"
: "",
transform: isTransitioning ? "" : nextSize?.x ? "translateX(100%)" : "",
}}
>
{currentIndex === steps.length - 1
? null
: steps[currentIndex + 1]}
{currentIndex === steps.length - 1 ? null : steps[currentIndex + 1]}
</div>
</div>
)

4
src/components/widgets/MultiStepFormElement.tsx
View File

@ -6,9 +6,7 @@ export interface MultiStepFormElementProps {
children: ReactElement
}
export default function MultiStepFormElement({
children,
}: MultiStepFormElementProps): ReactElement {
export default function MultiStepFormElement({children}: MultiStepFormElementProps): ReactElement {
return (
<Box maxWidth="90vw" justifyContent="center" alignItems="center">
<Container maxWidth="xs">{children}</Container>

18
src/components/widgets/PasswordField.tsx
View File

@ -1,12 +1,7 @@
import {MdVisibility, MdVisibilityOff} from "react-icons/md"
import React, {ReactElement, useState} from "react"
import {
IconButton,
InputAdornment,
TextField,
TextFieldProps,
} from "@mui/material"
import {IconButton, InputAdornment, TextField, TextFieldProps} from "@mui/material"
export interface PasswordFieldProps extends Omit<TextFieldProps, "type"> {}
@ -24,15 +19,8 @@ export default function PasswordField({
...InputProps,
endAdornment: (
<InputAdornment position="end">
<IconButton
edge="end"
onClick={() => setShowPassword(value => !value)}
>
{showPassword ? (
<MdVisibilityOff />
) : (
<MdVisibility />
)}
<IconButton edge="end" onClick={() => setShowPassword(value => !value)}>
{showPassword ? <MdVisibilityOff /> : <MdVisibility />}
</IconButton>
</InputAdornment>
),

11
src/components/widgets/SimplePage.tsx
View File

@ -28,12 +28,7 @@ export default function SimplePage({
</Typography>
</Grid>
<Grid item width="100%">
<Grid
container
spacing={4}
flexDirection="column"
alignItems="stretch"
>
<Grid container spacing={4} flexDirection="column" alignItems="stretch">
{subtitle && (
<Grid item>
<Typography variant="h6" component="h2">
@ -48,9 +43,7 @@ export default function SimplePage({
</Typography>
</Grid>
)}
{pageOptionsActions && (
<Grid item>{pageOptionsActions}</Grid>
)}
{pageOptionsActions && <Grid item>{pageOptionsActions}</Grid>}
<Grid item>{children}</Grid>
</Grid>
</Grid>

4
src/constants/themes.ts
View File

@ -4,8 +4,8 @@ export const lightTheme = createTheme({
palette: {
mode: "dark",
secondary: {
main: "#ACF",
contrastText: "#FFF",
main: "#ACF",
contrastText: "#FFF",
},
},
})

4
src/hocs/WithEncryptionRequired.tsx
View File

@ -2,9 +2,7 @@ import {ReactElement} from "react"
import {DecryptionPasswordMissingAlert} from "~/components"
export default function WithEncryptionRequired(
Component: any,
): (props: any) => ReactElement {
export default function WithEncryptionRequired(Component: any): (props: any) => ReactElement {
return (props: any): ReactElement => {
return (
<DecryptionPasswordMissingAlert>

4
src/hooks/use-interval-update.ts
View File

@ -1,8 +1,6 @@
import {useEffect, useState} from "react"
export default function useIntervalUpdate(
updateIntervalInMilliSeconds = 1000,
): [Date, () => void] {
export default function useIntervalUpdate(updateIntervalInMilliSeconds = 1000): [Date, () => void] {
const [, setForceUpdateValue] = useState<number>(0)
const [startDate, setStartDate] = useState(() => new Date())

4
src/hooks/use-ui-state.ts
View File

@ -1,9 +1,7 @@
import {Dispatch, SetStateAction, useState} from "react"
import {useUpdateEffect} from "react-use"
export default function useUIState<T>(
outerValue: T,
): [T, Dispatch<SetStateAction<T>>] {
export default function useUIState<T>(outerValue: T): [T, Dispatch<SetStateAction<T>>] {
const [value, setValue] = useState<T>(outerValue)
useUpdateEffect(() => {

4
src/main.tsx
View File

@ -3,6 +3,4 @@ import ReactDOM from "react-dom/client"
import App from "~/App"
ReactDOM.createRoot(document.getElementById("root") as HTMLDivElement).render(
<App />,
)
ReactDOM.createRoot(document.getElementById("root") as HTMLDivElement).render(<App />)

36
src/route-widgets/SignupRoute/EmailForm/DetectEmailAutofillService.tsx
View File

@ -1,12 +1,6 @@
import {MdCheck} from "react-icons/md"
import {useSessionStorage} from "react-use"
import React, {
ReactElement,
useCallback,
useEffect,
useRef,
useState,
} from "react"
import React, {ReactElement, useCallback, useEffect, useRef, useState} from "react"
import {
Alert,
@ -41,10 +35,7 @@ export default function DetectEmailAutofillService({
const $hasDetected = useRef<boolean>(false)
const [type, setType] = useState<AliasType | null>(null)
const [hasShownModal, setHasShownModal] = useSessionStorage<boolean>(
STORAGE_KEY,
false,
)
const [hasShownModal, setHasShownModal] = useSessionStorage<boolean>(STORAGE_KEY, false)
const handleFound = useCallback(
(type: AliasType) => {
@ -72,9 +63,7 @@ export default function DetectEmailAutofillService({
return false
}
const checkSimpleLogin = () => {
const $element = document.querySelector(
"body > div.sl-button-wrapper",
)
const $element = document.querySelector("body > div.sl-button-wrapper")
if (
$element &&
@ -116,17 +105,14 @@ export default function DetectEmailAutofillService({
<Grid container spacing={2} justifyContent="center">
<Grid item>
<DialogContentText>
We detected that you are using an email relay
service to sign up. This KleckRelay instance does
not support relaying to another email relay service.
You can either choose a different instance or sign
up with a different email address.
We detected that you are using an email relay service to sign up. This
KleckRelay instance does not support relaying to another email relay
service. You can either choose a different instance or sign up with a
different email address.
</DialogContentText>
</Grid>
<Grid item>
<DialogContentText>
Detected email relay:
</DialogContentText>
<DialogContentText>Detected email relay:</DialogContentText>
</Grid>
<Grid item>
<Alert severity="info">{TYPE_NAME_MAP[type!]}</Alert>
@ -134,11 +120,7 @@ export default function DetectEmailAutofillService({
</Grid>
</DialogContent>
<DialogActions>
<Button
autoFocus
startIcon={<MdCheck />}
onClick={() => setType(null)}
>
<Button autoFocus startIcon={<MdCheck />} onClick={() => setType(null)}>
Got it
</Button>
</DialogActions>

17
src/routes/SignupRoute.tsx
View File

@ -9,26 +9,15 @@ import YouGotMail from "~/route-widgets/SignupRoute/YouGotMail"
export default function SignupRoute(): ReactElement {
const serverSettings = useLoaderData() as ServerSettings
const [email, setEmail] = useLocalStorage<string>(
"signup-form-state-email",
"",
)
const [email, setEmail] = useLocalStorage<string>("signup-form-state-email", "")
const index = email ? 1 : 0
return (
<MultiStepForm
steps={[
<EmailForm
serverSettings={serverSettings}
onSignUp={setEmail}
key="email"
/>,
<YouGotMail
onGoBack={() => setEmail("")}
email={email || ""}
key="you_got_mail"
/>,
<EmailForm serverSettings={serverSettings} onSignUp={setEmail} key="email" />,
<YouGotMail onGoBack={() => setEmail("")} email={email || ""} key="you_got_mail" />,
]}
index={index}
/>

4
src/utils/when-enter-pressed.ts
View File

@ -1,8 +1,6 @@
import {KeyboardEventHandler} from "react"
export default function whenEnterPressed<T = HTMLDivElement>(
callback: KeyboardEventHandler<T>,
) {
export default function whenEnterPressed<T = HTMLDivElement>(callback: KeyboardEventHandler<T>) {
return (event: any) => {
if (event.key === "Enter") {
callback(event)