diff --git a/astro/src/components/Client/bsky/LoginForm.tsx b/astro/src/components/Client/bsky/LoginForm.tsx index 3cd729e..1dc9031 100644 --- a/astro/src/components/Client/bsky/LoginForm.tsx +++ b/astro/src/components/Client/bsky/LoginForm.tsx @@ -1,24 +1,30 @@ -import { useState, useEffect, useContext, Dispatch, SetStateAction } from "react" +import { + useState, + useEffect, + useContext, + Dispatch, + SetStateAction, +} from "react" import { inputtext_base, link } from "../common/tailwindVariants" import { Session_context, Profile_context } from "../common/contexts" import { type msgInfo } from "../common/types" -import createSession from "@/utils/atproto_api/createSession"; -import loadProfile from "./lib/loadProfile"; +import createSession from "@/utils/atproto_api/createSession" +import loadProfile from "./lib/loadProfile" -import { writeJwt } from "@/utils/useLocalStorage" import ProcButton from "../common/ProcButton" import Tooltip from "../common/Tooltip" import SavePasswordToggle from "./optionToggles/SavePasswordToggle" -import { readLogininfo, setLogininfo } from "@/utils/useLocalStorage" +import { writeJwt, readLogininfo, setLogininfo } from "@/utils/useLocalStorage" +import { servicename } from "@/env/vars" export const Component = ({ setMsgInfo, }: { - setMsgInfo: Dispatch>, + setMsgInfo: Dispatch> }) => { const [loading, setLoad] = useState(false) const [savePassword, setSavePassword] = useState(false) - const [identifier, setIdentifer] = useState("") + const [identifier, setIdentifier] = useState("") const [password, setPassword] = useState("") const { setSession } = useContext(Session_context) const { setProfile } = useContext(Profile_context) @@ -32,10 +38,10 @@ export const Component = ({ } const res = await createSession({ identifier: id, - password: pw + password: pw, }) - if (typeof res.error !== "undefined") { - let e: Error = new Error(res.message) + if ("error" in res) { + const e: Error = new Error(res.message) e.name = res.error throw e } else { @@ -50,13 +56,13 @@ export const Component = ({ if (savePassword === true) { setLogininfo({ id: identifier, - pw: password + pw: password, }) } // プロフィールを読み込み await loadProfile({ session: res, - setProfile: setProfile + setProfile: setProfile, }) } } catch (error: unknown) { @@ -66,7 +72,7 @@ export const Component = ({ } setMsgInfo({ msg: msg, - isError: true + isError: true, }) } setLoad(false) @@ -78,77 +84,92 @@ export const Component = ({ msg: "ブラウザに保存されたID/APWでログイン中...", isError: false, }) - await handleLogin( - loginInfo.id, - loginInfo.pw) + await handleLogin(loginInfo.id, loginInfo.pw) } } useEffect(() => { - handleOnLoad() + void handleOnLoad() }, []) return ( - <> +
- setIdentifer(event.target.value)} + setIdentifier(event.target.value)} placeholder="example.bsky.social" disabled={loading} className={inputtext_base({ class: "max-w-52 w-full px-2", kind: "outbound", - disabled: loading - })} type="text" /> + disabled: loading, + })} + type="text" + />
- setPassword(event.target.value)} + setPassword(event.target.value)} placeholder="this-isex-ampl-epwd" disabled={loading} className={inputtext_base({ class: "max-w-52 w-full px-2", kind: "outbound", - disabled: loading - })} type="password" /> + disabled: loading, + })} + type="password" + />
0 && password.length > 0)} - showAnimation={true} /> + disabled={ + !(identifier.length > 0 && password.length > 0) + } + showAnimation={true} + />
+ setProp={setSavePassword} + />
- -
- (BskyLinXに限らず)非公式のアプリを使う際はAppPasswordの利用が推奨されています。 - - bsky.appの⚙設定🔒高度な設定(新規タブが開きます) - から生成してください。 + +
+ {`(${servicename}に限らず)非公式のアプリを使う際はAppPasswordの利用が推奨されています。`} + + bsky.appの⚙設定→ + 🔒高度な設定(新規タブが開きます) + + から生成してください。 +
-
- }> + } + > ※AppPasswordとは?(タップで説明を表示)
- + ) } -export default Component \ No newline at end of file +export default Component diff --git a/astro/src/components/Client/bsky/MediaPreview/AltDialog.tsx b/astro/src/components/Client/bsky/MediaPreview/AltDialog.tsx index 57aa0d4..0a4a89e 100644 --- a/astro/src/components/Client/bsky/MediaPreview/AltDialog.tsx +++ b/astro/src/components/Client/bsky/MediaPreview/AltDialog.tsx @@ -1,5 +1,5 @@ // utils -import React, { memo, useRef, useCallback, useState, useEffect } from "react"; +import React, { memo, useRef, useCallback, useState, useEffect } from "react" // component import OverlayDialog from "../../common/OverlayDialog" @@ -9,7 +9,7 @@ import { inputtext_base, link } from "../../common/tailwindVariants" import { MediaData } from "../../common/types" const Img = ({ - mediaDataItem + mediaDataItem, }: { mediaDataItem: { alt: string @@ -17,16 +17,19 @@ const Img = ({ } }) => { return ( - + ) } const MemoImg = memo(Img) export const Component = ({ itemId, - mediaData + mediaData, }: { - itemId: number, + itemId: number mediaData: MediaData }) => { // mediaDataがimageではない場合はコンポーネントを無効に @@ -34,7 +37,7 @@ export const Component = ({ return } let mediaDataItem = mediaData.images[itemId] - const textref = useRef(null); + const textref = useRef(null) const [altBoxText, setAltBoxText] = useState(mediaDataItem.alt) const maxShowAltLength = 10 @@ -42,17 +45,18 @@ export const Component = ({ if (textref.current) { textref.current.value = mediaDataItem.alt } - }; + } const handleCloseDialog = () => { mediaDataItem.alt = altBoxText - }; + } const handleClickInDialog = useCallback( (e: React.MouseEvent) => { - e.stopPropagation(); - }, [] - ); + e.stopPropagation() + }, + [], + ) const handleOnChange = (event: React.ChangeEvent) => { // メディアがimagesの場合のみ処理 @@ -81,43 +85,51 @@ export const Component = ({ callbackOpenDialog={handleOpenDialog} callbackCloseDialog={handleCloseDialog} buttonOption={{ - className: [ - "rounded-lg", "border-1", - "bg-opacity-70", "px-2", - "bg-black", "border-white", - "text-white", "absolute", - "left-1", "bottom-1"].join(" ") + ( - altBoxText !== "" ? (" bg-blue-500") : ("") - ), + className: + [ + "rounded-lg", + "border-1", + "bg-opacity-70", + "px-2", + "bg-black", + "border-white", + "text-white", + "absolute", + "left-1", + "bottom-1", + ].join(" ") + (altBoxText !== "" ? " bg-blue-500" : ""), content: - altBoxText !== "" ? ( - `${altBoxText.slice(0, maxShowAltLength) - }${altBoxText.length >= maxShowAltLength - ? ("...") : ("")}` - ) : ( - "Altを設定" - ) - }}> -
- - -