CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-04 21:04:37 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fixed maybeFullPage layout

Browse Source
This commit is contained in:
Zai Shi 2024-09-30 15:01:30 -07:00
parent 27f3387741
commit 23a1f95a89
2 changed files with 58 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/stack/src/components-page/forgot-password.tsx
View File

@ -3,7 +3,7 @@
import { yupResolver } from "@hookform/resolvers/yup";
import { yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
import { Button, Input, Label, StyledLink, Typography } from "@stackframe/stack-ui";
import { Button, Input, Label, StyledLink, Typography, cn } from "@stackframe/stack-ui";
import { useState } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";
@ -76,16 +76,23 @@ export function ForgotPassword(props: { fullPage?: boolean }) {
return (
<MaybeFullPage fullPage={!!props.fullPage}>
<div className="text-center mb-6 stack-scope" style={{ width: '380px', padding: props.fullPage ? '1rem' : 0 }}>
<Typography type='h2'>{t("Reset Your Password")}</Typography>
<Typography>
{t("Don't need to reset?")}{" "}
<StyledLink href={stackApp.urls['signUp']}>
{t("Sign in")}
</StyledLink>
</Typography>
<div className={cn(
"stack-scope w-[380px]",
props.fullPage ? "p-4" : "p-0"
)}>
<div className="text-center">
<Typography type='h2'>{t("Reset Your Password")}</Typography>
<Typography>
{t("Don't need to reset?")}{" "}
<StyledLink href={stackApp.urls['signUp']}>
{t("Sign in")}
</StyledLink>
</Typography>
</div>
<div className="mt-6">
<ForgotPasswordForm onSent={() => setSent(true)} />
</div>
</div>
<ForgotPasswordForm onSent={() => setSent(true)} />
</MaybeFullPage>
);
};

76
packages/stack/src/components-page/password-reset.tsx
View File

@ -6,7 +6,7 @@ import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password
import { yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
import { cacheFunction } from "@stackframe/stack-shared/dist/utils/caches";
import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
import { Button, Label, PasswordInput, Typography } from "@stackframe/stack-ui";
import { Button, Label, PasswordInput, Typography, cn } from "@stackframe/stack-ui";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";
@ -74,43 +74,49 @@ export default function PasswordResetForm(props: {
);
}
return (
<MaybeFullPage fullPage={!!props.fullPage}>
<div className="text-center mb-6" style={{ width: '380px', padding: props.fullPage ? '1rem' : 0 }}>
<Typography type='h2'>{t("Reset Your Password")}</Typography>
<div className={cn(
"flex flex-col items-stretch w-[380px]",
props.fullPage ? "p-4" : "p-0"
)}>
<div className="text-center mb-6">
<Typography type='h2'>{t("Reset Your Password")}</Typography>
</div>
<form
className="flex flex-col items-stretch"
onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
noValidate
>
<Label htmlFor="password" className="mb-1">{t("New Password")}</Label>
<PasswordInput
id="password"
{...register('password')}
onChange={() => {
clearErrors('password');
clearErrors('passwordRepeat');
}}
/>
<FormWarningText text={errors.password?.message?.toString()} />
<Label htmlFor="repeat-password" className="mt-4 mb-1">{t("Repeat New Password")}</Label>
<PasswordInput
id="repeat-password"
{...register('passwordRepeat')}
onChange={() => {
clearErrors('password');
clearErrors('passwordRepeat');
}}
/>
<FormWarningText text={errors.passwordRepeat?.message?.toString()} />
<Button type="submit" className="mt-6" loading={loading}>
{t("Reset Password")}
</Button>
</form>
</div>
<form
style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}
onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
noValidate
>
<Label htmlFor="password" className="mb-1">{t("New Password")}</Label>
<PasswordInput
id="password"
{...register('password')}
onChange={() => {
clearErrors('password');
clearErrors('passwordRepeat');
}}
/>
<FormWarningText text={errors.password?.message?.toString()} />
<Label htmlFor="repeat-password" className="mt-4 mb-1">{t("Repeat New Password")}</Label>
<PasswordInput
id="repeat-password"
{...register('passwordRepeat')}
onChange={() => {
clearErrors('password');
clearErrors('passwordRepeat');
}}
/>
<FormWarningText text={errors.passwordRepeat?.message?.toString()} />
<Button type="submit" className="mt-6" loading={loading}>
{t("Reset Password")}
</Button>
</form>
</MaybeFullPage>
);
}