VSinerva/freesewing
1
0
Fork 0
Code Activity

feat: Upgrade to TailwindCSS 4 & DaisyUI 5 (#263)

Browse source 
Also fixes #251

Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/263
Co-authored-by: joostdecock <joost@joost.at>
Co-committed-by: joostdecock <joost@joost.at>
This commit is contained in:
joostdecock 2025-04-18 08:07:13 +00:00 • committed by Joost De Cock
parent a2863e5158
commit 44e04a4cef
164 changed files with 2361 additions and 2658 deletions
Download patch file Download diff file Expand all files Collapse all files

34
packages/react/components/Account/Mfa.mjs
View file

@ -89,14 +89,14 @@ export const Mfa = ({ welcome = false, title = true }) => {
if (enable) titleText = 'Set up Multi-Factor Authentication'
return (
<div className="tw-w-full">
<div className="tw:w-full">
{title ? <h2>{titleText}</h2> : null}
{enable ? (
<>
<div className="tw-flex tw-flex-row tw-items-center tw-justify-center tw-px-8 lg:tw-px-36">
<div className="tw:flex tw:flex-row tw:items-center tw:justify-center tw:px-8 tw:lg:px-36">
<div dangerouslySetInnerHTML={{ __html: enable.qrcode }} />
</div>
<p className="tw-flex tw-flex-row tw-items-center tw-justify-center">{enable.secret}</p>
<p className="tw:flex tw:flex-row tw:items-center tw:justify-center">{enable.secret}</p>
<Bullet num="1">
Add FreeSewing to your Authenticator App by scanning the QR code above. If you cannot
scan the QR code, you can manually enter the secret below it.
@ -107,14 +107,14 @@ export const Mfa = ({ welcome = false, title = true }) => {
<input
value={code}
onChange={(evt) => setCode(evt.target.value)}
className="tw-daisy-input tw-w-64 tw-m-auto tw-text-4xl tw-daisy-input-bordered tw-daisy-input-lg tw-flex tw-flex-row tw-text-center tw-mb-8 tw-tracking-widest"
className="tw:daisy-input tw:w-64 tw:m-auto tw:text-4xl tw:daisy-input-bordered tw:daisy-input-lg tw:flex tw:flex-row tw:text-center tw:mb-8 tw:tracking-widest"
type="text"
inputMode="numeric"
pattern="[0-9]{6}"
placeholder="000000"
/>
<button
className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-success tw-daisy-btn-lg tw-block tw-w-full md:tw-w-auto tw-mx-auto`}
className={`${horFlexClasses} tw:daisy-btn tw:daisy-btn-success tw:daisy-btn-lg tw:block tw:w-full tw:md:w-auto tw:mx-auto`}
onClick={confirmMfa}
>
<LockIcon />
@ -123,7 +123,7 @@ export const Mfa = ({ welcome = false, title = true }) => {
</>
) : null}
{disable ? (
<div className="tw-my-8 tw-max-w-xl">
<div className="tw:my-8 tw:max-w-xl">
<Bullet num="1">
<h5>Please enter your password to confirm this action</h5>
<PasswordInput
@ -138,13 +138,13 @@ export const Mfa = ({ welcome = false, title = true }) => {
<input
value={code}
onChange={(evt) => setCode(evt.target.value)}
className="tw-input tw-w-full tw-text-4xl tw-input-bordered tw-input-lg tw-flex tw-flex-row tw-text-center tw-mb-8 tw-tracking-widest"
className="tw:input tw:w-full tw:text-4xl tw:input-bordered tw:input-lg tw:flex tw:flex-row tw:text-center tw:mb-8 tw:tracking-widest"
type="text"
placeholder={'000000'}
/>
</Bullet>
<button
className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-error tw-daisy-btn-lg`}
className={`${horFlexClasses} tw:daisy-btn tw:daisy-btn-error tw:daisy-btn-lg`}
onClick={disableMfa}
disabled={code.length < 4 || password.length < 3}
>
@ -163,8 +163,8 @@ export const Mfa = ({ welcome = false, title = true }) => {
You can use each of these codes only once. Write them down, because this is the only
time you will get to see them.
</p>
<div className="hljs tw-my-4">
<div className="tw-flex tw-flex-row tw-justify-between tw-items-center tw-text-xs tw-font-medium tw-text-warning tw-mt-1 tw-border-b tw-border-neutral-content tw-border-opacity-25 tw-px-4 tw-py-1 tw-mb-2 lg:tw-text-sm">
<div className="hljs tw:my-4">
<div className="tw:flex tw:flex-row tw:justify-between tw:items-center tw:text-xs tw:font-medium tw:text-warning tw:mt-1 tw:border-b tw:border-neutral-content tw:border-opacity-25 tw:px-4 tw:py-1 tw:mb-2 tw:lg:text-sm">
<span>MFA Scratch Codes</span>
<CopyToClipboardButton
content={
@ -173,17 +173,17 @@ export const Mfa = ({ welcome = false, title = true }) => {
}
/>
</div>
<pre className="language-shell hljs tw-text-base lg:tw-text-lg tw-whitespace-break-spaces tw-overflow-scroll tw-pr-4">
<pre className="language-shell hljs tw:text-base tw:lg:text-lg tw:whitespace-break-spaces tw:overflow-scroll tw:pr-4">
{scratchCodes.map((code) => code + '\n')}
</pre>
</div>
</>
) : (
<div className="tw-mt-4">
<div className="tw:mt-4">
{account.mfaEnabled ? (
disable ? null : (
<button
className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-primary tw-w-full md:tw-w-auto tw-daisy-btn-outline`}
className={`${horFlexClasses} tw:daisy-btn tw:daisy-btn-primary tw:w-full tw:md:w-auto tw:daisy-btn-outline`}
onClick={() => setDisable(true)}
>
<NoIcon stroke={3} />
@ -193,7 +193,7 @@ export const Mfa = ({ welcome = false, title = true }) => {
) : enable ? null : (
<div>
<button
className={`${horFlexClasses} tw-daisy-btn tw-daisy-btn-primary tw-w-full md:tw-w-auto tw-daisy-btn-lg`}
className={`${horFlexClasses} tw:daisy-btn tw:daisy-btn-primary tw:w-full tw:md:w-auto tw:daisy-btn-lg`}
onClick={enableMfa}
>
<LockIcon />
@ -215,10 +215,10 @@ export const Mfa = ({ welcome = false, title = true }) => {
}
const Bullet = ({ num, children }) => (
<div className="tw-flex tw-flex-row tw-items-start tw-py-4 tw-w-full tw-gap-4">
<span className="tw-bg-secondary tw-text-secondary-content tw-rounded-full tw-w-8 tw-h-8 tw-p-1 tw-inline-block tw-text-center tw-font-bold tw-mr-4 tw-shrink-0">
<div className="tw:flex tw:flex-row tw:items-start tw:py-4 tw:w-full tw:gap-4">
<span className="tw:bg-secondary tw:text-secondary-content tw:rounded-full tw:w-8 tw:h-8 tw:p-1 tw:inline-block tw:text-center tw:font-bold tw:mr-4 tw:shrink-0">
{num}
</span>
<div className="tw-text-lg tw-grow">{children}</div>
<div className="tw:text-lg tw:grow">{children}</div>
</div>
)