Doormile/Doormilexpress_console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates on the design

Browse Source
This commit is contained in:
dharaneesh-r
2026-07-29 18:44:19 +05:30
parent 7d672139b5
commit c17057f693
5 changed files with 162 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/pages/nearle/login.js
View File

@@ -29,6 +29,7 @@ import { Text } from '@astryxdesign/core/Text';
import { TextInput } from '@astryxdesign/core/TextInput';
import { Button } from '@astryxdesign/core/Button';
import { Link } from '@astryxdesign/core/Link';
import { Divider } from '@astryxdesign/core/Divider';
import { doormileTheme } from 'themes/astryx';
const brandPanelStyle = {
@@ -246,100 +247,108 @@ const Login = () => {
{/* ---- Right form panel ---- */}
<Center axis="both" width="54%" height="100vh">
<VStack width="100%" maxWidth={420} gap={3} padding={3}>
<Card padding={4} elevation="low">
<VStack gap={0.5} hAlign="center" padding={0}>
<img src={logo} alt="Doormile" style={formLogoStyle} />
<Heading level={2}>Welcome back</Heading>
<Text type="supporting">Sign in to the Doormile Express console</Text>
</VStack>
<form noValidate onSubmit={handleSubmit}>
<VStack gap={3} padding={0}>
<TextInput
hasAutoFocus
label="E-mail Address"
type="email"
isRequired
value={username}
onChange={(value) => setUsername(value.toLocaleLowerCase())}
isDisabled={!!passwordStatus}
/>
{/* Setup Password */}
{passwordStatus == 1 && (
<VStack gap={3} padding={0}>
<Heading level={4}>Setup Password</Heading>
<TextInput
hasAutoFocus
label="Enter New Password"
type="password"
isRequired
value={password}
onChange={(value) => setPassword(value)}
/>
<TextInput
label="Re-Enter Password"
type="password"
isRequired
value={confirmPassword}
onChange={(value) => setConfirmPassword(value)}
status={
confirmPassword !== '' && password !== confirmPassword
? { type: 'error', message: 'Passwords do not match' }
: undefined
}
/>
</VStack>
)}
{/* Enter Password */}
{passwordStatus == 2 && (
<VStack gap={3} padding={0}>
<Heading level={4}>Enter Password</Heading>
<TextInput
hasAutoFocus
label="Enter Password"
type="password"
isRequired
value={password}
onChange={(value) => setPassword(value)}
/>
</VStack>
)}
{/* OTP / retry */}
{isPassword && (
<VStack gap={1.5} padding={0}>
<HStack justify="between">
<Text type="label">Enter Password</Text>
<Link
onClick={() => {
setOtp('');
loginsend();
}}
>
Retry
</Link>
</HStack>
<TextInput label="Password" type="password" value={password} onChange={(value) => setPassword(value)} isLabelHidden />
</VStack>
)}
<Button label="Continue" type="submit" variant="primary" size="lg" width="100%" />
<VStack width="100%" maxWidth={440} gap={4} padding={3}>
<Card padding={8} elevation="med">
<VStack gap={6} padding={0}>
<VStack gap={1.5} hAlign="center" padding={0}>
<img src={logo} alt="Doormile" style={formLogoStyle} />
<Heading level={2}>Welcome back</Heading>
<Text type="supporting">Sign in to the Doormile Express console</Text>
</VStack>
</form>
<Divider />
<form noValidate onSubmit={handleSubmit}>
<VStack gap={4} padding={0}>
<TextInput
hasAutoFocus
label="E-mail Address"
type="email"
size="lg"
isRequired
value={username}
onChange={(value) => setUsername(value.toLocaleLowerCase())}
isDisabled={!!passwordStatus}
/>
{/* Setup Password */}
{passwordStatus == 1 && (
<VStack gap={4} padding={0}>
<Divider label="Setup Password" />
<TextInput
hasAutoFocus
label="Enter New Password"
type="password"
size="lg"
isRequired
value={password}
onChange={(value) => setPassword(value)}
/>
<TextInput
label="Re-Enter Password"
type="password"
size="lg"
isRequired
value={confirmPassword}
onChange={(value) => setConfirmPassword(value)}
status={
confirmPassword !== '' && password !== confirmPassword
? { type: 'error', message: 'Passwords do not match' }
: undefined
}
/>
</VStack>
)}
{/* Enter Password */}
{passwordStatus == 2 && (
<VStack gap={4} padding={0}>
<Divider label="Enter Password" />
<TextInput
hasAutoFocus
label="Enter Password"
type="password"
size="lg"
isRequired
value={password}
onChange={(value) => setPassword(value)}
/>
</VStack>
)}
{/* OTP / retry */}
{isPassword && (
<VStack gap={1.5} padding={0}>
<HStack justify="between">
<Text type="label">Enter Password</Text>
<Link
onClick={() => {
setOtp('');
loginsend();
}}
>
Retry
</Link>
</HStack>
<TextInput label="Password" type="password" value={password} onChange={(value) => setPassword(value)} isLabelHidden />
</VStack>
)}
<Button label="Continue" type="submit" variant="primary" size="lg" width="100%" />
</VStack>
</form>
</VStack>
</Card>
{/* footer */}
<HStack justify="center" wrap="wrap" gap={2}>
<Link href="https://nearle.in" target="_blank" isExternalLink>
<Link href="https://nearle.in" target="_blank" isExternalLink type="supporting">
&copy; All rights reserved
</Link>
<Link href="https://nearle.in/terms" target="_blank" isExternalLink>
<Link href="https://nearle.in/terms" target="_blank" isExternalLink type="supporting">
Terms and Conditions
</Link>
<Link href="https://nearle.in/privacy" target="_blank" isExternalLink>
<Link href="https://nearle.in/privacy" target="_blank" isExternalLink type="supporting">
Privacy Policy
</Link>
</HStack>