I am building an admin web interface using react-admin and at the moment, I am trying to find a way to add a link under the Login button on react-admin's login page so that I can take the user through the account recovery process.
I have everything in place -- custom routes, custom components, API support for server-side checks and operations, the works. I just need to add that one link component on the login page to integrate the account recovery infrastructure with the rest of the site.
I have been googling for possible solutions and have found a few questions people asked in the past, but most of them were dealing with custom routes etc. and they did not really seem to be related to my issue. I have also looked at the official docs here, but they only talk about changing the background image on the login page.
Has anybody dealt with and solved this problem?
I am using react-admin 3.5.0.
Customizing the login page/form is often not attempted because the react-admin team made it easy to just "adopt" that login page (template) into any app set-up. Thanks, guys!!
Ok, not too fast. But what if I seriously want/need to customize the login page?
I met this challenge when I needed to refactor the login fields.
Let's take a closer look at how the <Login> is rendered:
First, you actually need to pass the loginPage prop to the <Admin/>;
<Admin loginPage={CustomLoginPage} />
Then, within the CustomLoginPage, render the form and include any other relevant info (in this case, your "forgot password" link)
import { Form } from 'react-final-form';
const CustomLoginPage = props => {
// any other logic
return (
<div>
<Form {...props} render={() => (<form>...</form>)} />
<a href='...'>Forgot Password?</a>
</div>
)
};
This code for the react-admin demo login-page will help you understand that last part further.
Related
I am currently doing a project with NextJs about a blog posting application similar to medium.com. However, I am facing a little problem when it comes to dynamic routes.
Background Info: My pages structure looks like this:
pages
|-> profile
|-> [username].tsx
url path example: /profile/[username]
Use case: I am in the profile page of someone (/profile/someone), and in the navbar, which is globally accessible, you have the ability to go into your profile (/profile/yourName). Howerver, if you click View Your Profile, the url does update, but the page does not appear to load and therefore, you cannot see your profile.
Original Code:
<Link href={`/profile/${username}`}>
<button>View Profile</button>
</Link>
Current Solution:
if (router.asPath.includes('profile'))
router.replace({
pathname: '/profile/[username]',
query: { username: username },
}).then(() => router.reload())
else
router.push(`/profile/${username}`)
The solution provided works, but load times significally increases when compared to the "Original Code" block or when asPath does not include 'profile'. I think this is because I am using reload(). I want to know if there is another solution that will improve loading time.
Thank you
I am working on an application using react-admin, where each registered user will have it's own set of resources which are dynamically loaded, we don't know the exact resources upfront. Users register and login using Auth0. The data is fetched from Hasura. The solution is based on the following example to load the resources: https://marmelab.com/react-admin/Admin.html#unplugging-the-admin-using-admincontext-and-adminui
Loading the resources dynamically is working (see snippet below), however i need to refresh the page manually in order to see the resources in the sidebar menu, while the sidebar menu must be updated as soon as the dynamic resources are available. After logging out and logging back in, the resources are again not visible and a refresh is required again.
function AsyncResources() {
...
return (
<AdminUI
title="Hasura Dashboard"
dashboard={Dashboard}
history={history}
loginPage={LoginPage}
layout={Layout}
>
{resources.map(resource => (
<Resource name={resource.name} key={resource.name} options={getOptions(resource.name)} list={getList(resource.name)} />
))}
<Resource /> { /* Without this Resource, the initial page doesn't load */ }
</AdminUI>
);
}
I had a look at the following issues regarding the same topic, but i couldn't find a definite solution to my specific problem: https://github.com/marmelab/react-admin/issues/5177
with answer: "Basically you write components for every resource but only enable what you want." This is not a solution for me because that would mean i have to manually add every single resource of every new registered user.
I already created a custom Menu to see if that would help, but shows the same behaviour as the default Menu.
How can i make sure the dynamic loaded resources are visible in the menu without the user having to refresh the window after logging in?
I am now using the react-admin framework, when the user clicks the Save button on the Edit page. Normally it will go to the List page and show an undo notification at the bottom, but at that time server-side gets validation error (for example, image size, file size). Then all user input at the Edit page is lost.
How can we still remain on the Edit page in case of the server-side error, and go to the List page only if the sever-side returns success?
If I put redirect = false, it will not go to the List page even if the server-side returns success:
const CustomToolbar = props => (
<Toolbar {props} >
<SaveButton redirect={false}/>
</Toolbar>
)
React Admin uses an approach called Optimistic Rendering: when a user fill a form, we are optimistic and render the better result.
This globally improve the user experience by making the results displayed faster, even before the API is reached.
The bad side is that, if the form isn't strictly validated client-side and the API throws an error, the user have to do it again.
From here, I see two solutions to your problem:
Implement a more strict client-side validation of your form
Disable the optimistic rendering by specifying undoable={false}
<Edit {...props} undoable={false}>
{...}
</Edit>
I'm in Registration.vue component. The component contains registration form with email, password, etc.. fields.
I would like to thanks user for successful registering (with instruction that he should go check email).
What is the best solution to do this?
I was thinking about:
redirecting to second component using this.$router.push or this.$router.replace but this will change URL and when somebody go this URL without registering he will see message that he should check email...
replacing current component with other when registering action successful but I dont know how to do this (without URL change, and with good code).
using <component v-bind:is="currentView"> but I am not sure if this is best solution. I need to make three files (for parent component with :is, for form and for thanks). Also i need to emit event from child that registration went well, but on the other hand i should fire vuex registration action and dont expect for response (see the next sequence)
The other thing is that we should not wait for the vuex action to be completed, but i need to know if registration went well - https://github.com/vuejs/vuex/issues/46#issuecomment-174539828
I am using vue.js 2, vue-router, vuex
Thanks
You could use something like Sweet Alert to display a success or error dialog. It supports Ajax requests so you can display a "your registration is processing, please check your email" message while it is being handled.
The first approach is suitable when user successfully registers and then redirected to login page.
Now issue how to check whether user has entered required field? So there comes form validations. You can use vee-validate plugin and it's perfect for all projects. I am using it and it has so many available validations.
With these UI validations, after they are passed successfully then only submit action will be fired or else user will be prompted for entering required field.
You can see basic example here - http://vee-validate.logaretm.com/index.html#basic-example
When action is performed,
///main.js
...
Vue.use(VeeValidate)
...
// register.vue
this.$validator.validateAll().then((result) => {
if (result) {
//done
this.$router.replace( '/login' );
}
else{
// throw error
}
Simple as that.
Try this approach if you want the UI validations on the form.
I've been struggling to find out about user authentication using your own form elements.
In order to make it clear, heres what i want to do.
I'm going to have a button which is going to redirect to a page.
Now, this page can be redirected to in the following ways.
A popup opens where the user needs to enter their email address and password.
My form is like this
<form action="userlogin.php" method="post">
<ul>Email
<li><input type="text" id="email" name="email" /></li>
</ul>
<ul>Password
<li><input type="password" id="pass" name="pass" /> </li>
</ul>
</form>
The user clicks the submit button and if the email address and password exist then we have a successful login and if they dont then we add that user in the database and then redirect.
I dont understand how to authenticate user login using this form i've mentioned about. Which file do i have to post it to and how can it work like a normal joomla login.
Please do help.
Thanks.
You can write your own authentication routine relatively easily in two steps.
Authentication Logic
For the authentication logic, in the plugins folder, there is another folder called "authentication". Aside from the default joomla authentication, there is another called "example.php", which you can clone and work on from there. These are the plugins that you can enable/disable in the plugins manager in your Joomla Administrator, so you can look at them and see the different ways that they authenicate (gmail, openid, etc.).
Be sure to scan/replace all the naming used in the copied file (it's not very big), and when you're happy with it, make an entry in table jos_plugins so that you can enable it in the Joomla administrator.
Your Form (using template atomic as the example, and assuming you're using mod_login)
Within /templates/atomic/html/mod_login you should have, a file called default.php. This is where you change the form to suit your needs, and incorporate into the authentication logic your wrote in the plugin.
Popup Approach
That will depend on the template you're using, and how it, or you, generally handle popups. Rockettheme have many popup modules (some being free) which demonstrate how you could do it that way, or jquery if you're comfortable with that, the list goes on....
You could override the existing login form and open this in a modal popup?