forked from chapter-three/next-drupal
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(example-umami): implement account pages
- Loading branch information
Showing
28 changed files
with
512 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| import * as React from "react" | ||
| import classNames from "classnames" | ||
| import { useTranslation } from "next-i18next" | ||
| import { signIn } from "next-auth/react" | ||
| import { useRouter } from "next/router" | ||
|
|
||
| interface FormLoginProps extends React.HTMLProps<HTMLFormElement> {} | ||
|
|
||
| interface FormStatus { | ||
| status: "success" | "error" | "fetching" | ||
| message?: string | ||
| } | ||
|
|
||
| export function FormLogin({ className, ...props }: FormLoginProps) { | ||
| const [formStatus, setFormStatus] = React.useState<FormStatus>(null) | ||
| const { t } = useTranslation() | ||
| const router = useRouter() | ||
|
|
||
| React.useEffect(() => { | ||
| if (router.query.error === "CredentialsSignin") { | ||
| return setFormStatus({ | ||
| status: "error", | ||
| message: t("unrecognized-username-or-password-please-try-again"), | ||
| }) | ||
| } | ||
|
|
||
| return setFormStatus(null) | ||
| }, [router, t]) | ||
|
|
||
| const onSubmit = async (event) => { | ||
| event.preventDefault() | ||
| const data = new FormData(event.target) | ||
|
|
||
| setFormStatus({ status: "fetching" }) | ||
|
|
||
| await signIn("credentials", { | ||
| username: data.get("username"), | ||
| password: data.get("password"), | ||
| }) | ||
|
|
||
| return setFormStatus({ | ||
| status: "success", | ||
| }) | ||
| } | ||
|
|
||
| return ( | ||
| <form | ||
| className={classNames("grid gap-4", className)} | ||
| onSubmit={onSubmit} | ||
| {...props} | ||
| > | ||
| {formStatus?.message && ( | ||
| <p | ||
| className={classNames("py-3 px-4 border", { | ||
| "border-link bg-link/10 text-link": | ||
| formStatus?.status === "success", | ||
| "border-error bg-error/10 text-error": | ||
| formStatus?.status === "error", | ||
| })} | ||
| > | ||
| {formStatus.message} | ||
| </p> | ||
| )} | ||
| <div className="grid gap-2"> | ||
| <label htmlFor="username" className="font-semibold text-text"> | ||
| {t("username")} <span className="text-sm text-red-500">*</span> | ||
| </label> | ||
| <input | ||
| id="username" | ||
| name="username" | ||
| maxLength={255} | ||
| required | ||
| className="px-2 py-3 border-2 border-gray focus:outline-dotted focus:outline-offset-2 focus:ring-0 focus:outline-link focus:border-gray" | ||
| /> | ||
| <p className="text-sm text-text">{t("enter-your-drupal-username")}</p> | ||
| </div> | ||
| <div className="grid gap-2"> | ||
| <label htmlFor="password" className="font-semibold text-text"> | ||
| {t("password")} <span className="text-sm text-red-500">*</span> | ||
| </label> | ||
| <input | ||
| type="password" | ||
| id="password" | ||
| name="password" | ||
| required | ||
| className="px-2 py-3 border-2 border-gray focus:outline-dotted focus:outline-offset-2 focus:ring-0 focus:outline-link focus:border-gray" | ||
| /> | ||
| <p className="text-sm text-text"> | ||
| {t("enter-the-password-that-accompanies-your-username")} | ||
| </p> | ||
| </div> | ||
| <div> | ||
| <input | ||
| type="submit" | ||
| className="px-6 py-3 font-serif text-xl text-white transition-colors border-2 rounded-sm cursor-pointer bg-link hover:bg-white hover:text-black border-link" | ||
| disabled={formStatus?.status === "fetching"} | ||
| value={ | ||
| formStatus?.status === "fetching" ? t("please-wait") : t("login") | ||
| } | ||
| /> | ||
| </div> | ||
| </form> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import * as React from "react" | ||
| import NextLink, { LinkProps as NextLinkProps } from "next/link" | ||
|
|
||
| export type MenuLinkProps = Omit< | ||
| NextLinkProps, | ||
| "as" | "passHref" | "children" | ||
| > & | ||
| React.HTMLAttributes<HTMLAnchorElement> | ||
|
|
||
| function CustomLink(props, ref) { | ||
| let { href, children, ...rest } = props | ||
| return ( | ||
| <NextLink href={href} passHref> | ||
| <a ref={ref} {...rest}> | ||
| {children} | ||
| </a> | ||
| </NextLink> | ||
| ) | ||
| } | ||
|
|
||
| export const MenuLink = React.forwardRef<HTMLAnchorElement, MenuLinkProps>( | ||
| CustomLink | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { DrupalNode } from "next-drupal" | ||
| import { useTranslation } from "next-i18next" | ||
| import { useRouter } from "next/router" | ||
|
|
||
| import { formatDate } from "lib/utils" | ||
| import { MediaImage } from "components/media--image" | ||
|
|
||
| interface NodeArticleRowProps { | ||
| node: DrupalNode | ||
| } | ||
|
|
||
| export function NodeArticleRow({ node, ...props }: NodeArticleRowProps) { | ||
| const { t } = useTranslation() | ||
| const router = useRouter() | ||
|
|
||
| async function handleDelete() { | ||
| if (!window?.confirm(t("are-you-use-you-want-to-delete-this-article"))) { | ||
| return | ||
| } | ||
|
|
||
| const response = await fetch(`/api/articles/${node.id}`, { | ||
| method: "DELETE", | ||
| }) | ||
|
|
||
| if (response?.ok) { | ||
| router.reload() | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <article | ||
| className="relative grid grid-cols-[120px_1fr] items-start gap-4 p-4 overflow-hidden bg-white border border-border group" | ||
| {...props} | ||
| > | ||
| <MediaImage media={node.field_media_image} width={115} height={75} /> | ||
| <div className="flex items-start justify-between text-text"> | ||
| <div> | ||
| <h2 className="flex-1 font-serif text-xl">{node.title}</h2> | ||
| <p className="text-sm text-gray"> | ||
| {formatDate(node.created)} -{" "} | ||
| {node.status ? t("published") : t("draft")} | ||
| </p> | ||
| </div> | ||
| <button | ||
| onClick={() => handleDelete()} | ||
| className="px-2 py-1 text-white rounded-md hover:bg-error bg-error/80" | ||
| > | ||
| {t("delete")} | ||
| </button> | ||
| </div> | ||
| </article> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.