I am working on an Application that will be using an Authentication method to login specific users. I am looking to have a page directly after login, where it will say "Welcome back, (Insert users name here). I understand that Firebase does not incorporate any sort of Name with a login.
How would you recommend I accomplish this?
LoginForm.js
<Card style={{ marginBottom: 200 }}>
<CardSection style={styles.inputStyle}>
<Input
label="Email"
placeholder="Username"
onChangeText={this.onEmailChange.bind(this)}
value={this.props.email}
/>
</CardSection>
<CardSection style={styles.inputStyle}>
<Input
secureTextEntry
label="Password"
placeholder="Password"
onChangeText={this.onPasswordChange.bind(this)}
value={this.props.password}
/>
</CardSection>
{this.renderError()}
<CardSection style={styles.inputStyle}>
{this.renderButton()}
</CardSection>
</Card>
Related
I have created a custom sign up page that i am trying to access from a custom login screen. I am using the firebase connecters for authProvider. How can I allow the page to go to the sign up page without being authenticated?
Here is the app.tsx:
function App() {
return (
<Admin
authProvider={firebaseAuthProvider}
dataProvider={firebaseDataProvider}
i18nProvider={i18nProvider}
loginPage={LoginPage}
>
<Resource name="researchers" list={ListGuesser} />
<CustomRoutes noLayout>
<Route path="/signup" element={<SignUpPage />} />
</CustomRoutes>
</Admin>
);
}
And the login page:
import React from "react";
import {
Stack,
Card,
CardContent,
Typography,
TextField,
Button,
Link,
} from "#mui/material";
import { Title, useTranslate } from "react-admin";
export const LoginPage = () => {
const t = useTranslate();
const handleSubmit = () => {};
return (
<Card>
<Title title="Sign Up!" />
<CardContent>
<Stack>
<Stack alignItems="center">
<Typography>{t("login.login")}</Typography>
</Stack>
<Stack component="form" onSubmit={handleSubmit}>
<TextField
margin="normal"
required
fullWidth
id="email"
label={t("email")}
name="email"
autoComplete="email"
autoFocus
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label={t("password")}
type="password"
id="password"
autoComplete="current-password"
/>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
>
{t("login.signin")}
</Button>
</Stack>
<Typography>{t("login.or")}</Typography>
<Link href="/signup">{t("signup.signup")}</Link>
</Stack>
</CardContent>
</Card>
);
};
The link on the login page is where the problem is.
I faced the same problem and kind of sorted it out. I think it's a problem with RAF. By default you don't need to write extra codes to make it work.
I have posted here.
Not sure if this is some CSS issue that I can fix, but I am trying to use a <Stack /> from Material UI to construct a vertical list of checkboxs with labels.
I've attempted the following in the sandbox here (see demo.tsx): https://codesandbox.io/embed/basicstack-material-demo-forked-q8kb4q?fontsize=14&hidenavigation=1&theme=dark
With the code here
export default function BasicStack() {
return (
<Box sx={{ width: "100%" }}>
<Stack spacing={2}>
<FormControlLabel control={<Checkbox />} label="Test1" />
<FormControlLabel control={<Checkbox />} label="Test2" />
<FormControlLabel control={<Checkbox />} label="Test3" />
</Stack>
</Box>
);
}
As you can see in the demo, ONLY the first child component isn't lined up correctly so a temporary solution is to add a sx={{marginLeft: 0.1}} only to the first <FormControlLabel /> which I think isn't a great practice. Does anyone know why this misalignment happens? And if there is a more elegant way of fixing it?
I think the problem is on the spacing=2, you can try to remove it, and then the indented will correct.
<Stack>
<FormControlLabel control={<Checkbox />} label="Test1" />
<FormControlLabel control={<Checkbox />} label="Test2" />
<FormControlLabel control={<Checkbox />} label="Test3" />
</Stack>
I am working with Antd Form Item and I have to put an icon with tooltip like this:
And here is my code:
<Item label={'Password'} name={'password'} className={'password'} rules={[{ required: true, message: t('Feld ist erforderlich') }]}>
<Password size="large" />
<PasswordStrength password={password} />
</Item>
Any idea? Please help! Thank you!
Solution 1: You can custom label in Form item, follow my code
<Item
label={
<div>
Label a{" "}
<Tooltip title="Tooltip with customize">
<InfoCircleOutlined />
</Tooltip>
</div>
}
>
<Input placeholder="input placeholder" />
</Item>
Solution 2: you can upgrade new version Antd, and use property tooltip
I hope it useful for you.
I got same problem and work around by below solution:
I don't set label attribute for Form.Item, then add a Row on top of Form Item including label and tooltip icon
<Row justify="space-between">
<Col>
<span>Mật Khẩu</span>
</Col>
<Col>
<Tooltip title='tooltip text'>
<ExclamationCircleOutlined />
</Tooltip>
</Col>
</Row>
<Form.Item>
<Input.Password />
</Form.Item>
I am new to Xamarin Forms.
I want to know how to hide a button if a specific condition is false.
ex: I need to hide the submit button until the text field has a value.
(if the text field is null, cannot click the submit button)
this is my .xaml code
<Entry Grid.Row="0"
Margin="10,10,10,20"
x:Name="ground_area"
Grid.Column="1"
MaxLength="5"
HorizontalOptions="Center"
Placeholder="area"
FontSize="18"/>
<Button x:Name="avg_nut"
Text="Submit"
Grid.Row="5"
VerticalOptions="Center"
Margin="40,0,20,50"
Style="{StaticResource buttonStyle}"
Clicked="submit_click">
</Button>
Hey you can use the property of the button IsEnabled="{Binding booleanProperty}" and in your view model you can manipulate the value of this property depending in what you want
I recommended you to use View Model instead of Code Behind is not that hard learn how works MVVM (Model View ViewModel)
That's my advice.
I hope this can solve your problem
Use Trigger:
<Entry x:Name="ground_area"/>
<Button Text="Submit">
<Button.Triggers>
<DataTrigger TargetType="Button" Binding="{Binding Text.Length, Source={Reference ground_area}, FallbackValue=0}" Value="0">
<Setter Property="IsVisible" Value="False"/>
</DataTrigger>
</Button.Triggers>
</Button>
Also, check IsEnabled property, it's better than hiding the control.
I have created a Button with the following trigger:
<Button Content="Test>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<cal:ActionMessage MethodName="SetViewModelToOpen">
<cal:Parameter Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadButton}},Path=Content}" />
</cal:ActionMessage>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
Now I have several button like this one and want this trigger to be applied to every button.
How to do this?
You need to use styles, in your case:
<Style x:Key="ButtonWithTriggers" TargetType="Button">
<Style.Triggers>
<Trigger Property="IsPressed" Value="true">
<[Place your actions here]>
</Trigger>
</Style.Triggers>
</Style>
Then your button declaration:
<Button Content="Test" Style="{StaticResource ButtonWithTriggers}" />