; 7 | } 8 | 9 | return line; 10 | }); 11 | } 12 | -------------------------------------------------------------------------------- /packages/email/src/lib/omit.ts: -------------------------------------------------------------------------------- 1 | export function omit
{children}
;
8 | }
9 |
10 | export function CallToAction({ href, children }) {
11 | const style = useTheme('callToAction');
12 |
13 | return (
14 |
15 |
16 | {children}
17 |
18 |
19 | );
20 | }
21 |
22 | export function Container({ children }) {
23 | const style = useTheme('container');
24 |
25 | return (
26 |
27 |
31 | );
32 | }
33 |
34 | export function Content({ children }) {
35 | const style = useTheme('content');
36 |
37 | return (
38 |
28 | {children}
29 |
30 |
39 |
43 | );
44 | }
45 |
46 | export function Title({ children }) {
47 | const style = useTheme('title');
48 | return
40 | {children}
41 |
42 | {children}
;
49 | }
50 |
51 | export function Code({ children }) {
52 | const style = useTheme('code');
53 |
54 | return (
55 |
56 |
58 | );
59 | }
60 |
61 | export function Header({
62 | logo,
63 | action,
64 | }: {
65 | logo?: string;
66 | action?: { label: string; url: string };
67 | }) {
68 | const style = useTheme('header');
69 |
70 | return (
71 | {children}
57 |
72 |
82 | );
83 | }
84 |
85 | export function Footer({ children }) {
86 | const style = useTheme('footer');
87 |
88 | return (
89 |
73 | {logo ? 
: null}
74 |
75 | {action ? (
76 |
77 | {action.label}
78 |
79 | ) : null}
80 |
81 |
90 |
92 | );
93 | }
94 |
--------------------------------------------------------------------------------
/packages/email/src/templates/Email.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, ReactNode, useContext } from 'react';
2 | import defaultTheme from './themes/default';
3 |
4 | export const context = createContext({});
5 |
6 | export function useTheme(prop) {
7 | const theme = useContext(context);
8 | return prop ? theme[prop] : theme;
9 | }
10 |
11 | const Provider = context.Provider;
12 |
13 | export function Email({
14 | theme = defaultTheme,
15 | children,
16 | }: {
17 | theme?: Record{children}
91 | {children}
23 | {code}
33 |
34 |
51 |
56 | );
57 | }
58 |
59 | return (
60 | 52 | 404 53 |
54 |This page could not be found.
55 |
61 | {children}
62 |
63 |
76 |
78 |
79 | );
80 | }
81 |
--------------------------------------------------------------------------------
/packages/nextjs-auth-ui/src/forms/enroll-account-form.tsx:
--------------------------------------------------------------------------------
1 | import { Password } from '@rakered/accounts/lib/types';
2 | import { handleSubmit } from '@rakered/forms';
3 | import { useRouter } from 'next/router';
4 | import { ReactElement, useEffect, useState } from 'react';
5 | import { useStore } from '../store';
6 | import Field from '../shared/field';
7 | import Input from '../shared/input';
8 | import Button from '../shared/button';
9 | import { getError } from '../utils';
10 | import { State } from '../types';
11 |
12 | export type EnrollAccountFormProps = {
13 | token: string;
14 | onEnrollAccount?: ({ redirectTo }: { redirectTo: string }) => Promise
45 |
48 | );
49 | }
50 |
51 | return (
52 |
89 | );
90 | }
91 |
--------------------------------------------------------------------------------
/packages/nextjs-auth-ui/src/forms/reset-password-form.tsx:
--------------------------------------------------------------------------------
1 | import { handleSubmit, HashedPassword } from '@rakered/forms';
2 | import { useRouter } from 'next/router';
3 | import { ReactElement, useEffect, useState } from 'react';
4 |
5 | import { useStore } from '../store';
6 | import { State } from '../types';
7 | import Field from '../shared/field';
8 | import Input from '../shared/input';
9 | import Button from '../shared/button';
10 |
11 | export type ResetPasswordFormData = { password: HashedPassword };
12 |
13 | export type ResetPasswordFormProps = {
14 | token: string;
15 | };
16 |
17 | export function ResetPasswordForm({
18 | token,
19 | }: ResetPasswordFormProps): ReactElement {
20 | const router = useRouter();
21 | const resetPassword = useStore((state) => state.resetPassword);
22 |
23 | const [state, setState] = useStateThanks, check your email for instructions to reset your password.
46 |Please check your spam folder if you didn't get an email.
47 |
18 |
20 | You've been logged out. Feel free to close this tab.
19 |48 | {state.status === 'error' ? state.error : 'please give us a second'} 49 |
50 |
48 | {description}
49 |
50 | ) : null;
51 |
52 | // the relative is to catch grammarly. Grammarly locates the nearest
53 | // relative element, and positions inside that. Without this relative
54 | // it will keep walking, and potentially end up in a element with a space-y-..
55 | return (
56 |
57 | {label ? (
58 |
94 | );
95 | }
96 |
97 | export default Field;
98 |
--------------------------------------------------------------------------------
/packages/nextjs-auth-ui/src/shared/input.tsx:
--------------------------------------------------------------------------------
1 | import cn from 'clsx';
2 |
3 | type InputProps = {
4 | invalid?: boolean;
5 | resize?: boolean;
6 | flat?: boolean;
7 | className?: string;
8 | status?: 'initial' | 'error' | 'success';
9 | type?: 'textarea' | string;
10 | 'aria-label'?: string;
11 | } & Record
59 |
72 | ) : null}
73 |
74 | {variant !== 'description-below' && descriptionElement}
75 |
76 | {childNodes.length === 1
77 | ? cloneElement(childNodes[0], {
78 | ...childNodes[0].props,
79 | id: inputId,
80 | invalid:
81 | (childNodes[0].type as any).name === Input.name
82 | ? invalid
83 | : undefined,
84 | required: childNodes[0].props.required || required,
85 | 'aria-invalid': invalid,
86 | 'aria-describedby': [error && errorId, description && descriptionId]
87 | .filter(Boolean)
88 | .join(' '),
89 | })
90 | : children}
91 |
92 | {variant === 'description-below' && descriptionElement}
93 |
60 |
61 | {required ? (
62 | *
63 | ) : null}
64 |
65 | {error ? (
66 |
67 | {error}
68 |
69 | ) : null}
70 | {alt ? {alt} : null}
71 |
6 | {children}
7 |
8 | );
9 | }
10 |
11 | function PageTitle({ children }: { children: ReactNode }): ReactElement {
12 | return