Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 09 Sep 2022 08:18 by ADMIN
Revanth
Created on: 07 Sep 2022 15:26
Category: KendoReact
Type: Feature Request
0
social login and profile controls any provided like below example

Hi Team,

 

While browsing i came across a feature called social control+login+singup in 1 place. Does Kendo react has anything like below

 

import React, { useState } from 'react'
import { FloatingLabel, Form, FormControl, FormGroup, InputGroup } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap';
import { Redirect, useHistory } from 'react-router';
import SignUp from './Signup';
import { SessionService } from "./../../services/Session.service";
import { GoogleLogin } from 'react-google-login';
import AppleLogin from 'react-apple-login';
import { GoogleLoginButton, AppleLoginButton } from 'react-social-login-buttons';
// Singleton for all Service / Classes
export const Injector = {
    session: new SessionService()
}
const onSuccess = (res) => {
    console.log('success:', res);
};
const onFailure = (err) => {
    console.log('failed:', err);
};
function Login({ state, setState }: any) {
    const { session } = state;
    const navigation = useHistory();
    const [globalState, setGlobalState] = useState(Injector);
    const [login, setLogin] = useState({
        emailId: '',
        password: ''
    });
    const updateLogin = (key, val) => {
        setLogin({ ...login, [key]: val })
    }
    const doLogin = async () => {
        if (login.emailId && login.password) {
            try {
                const user = await session.postLogin(login);
                session.user = user;
                setState({ ...state, session });
                const loginRedirect = sessionStorage.getItem(`redirect_after_login`);
                if (loginRedirect) {
                    sessionStorage.removeItem(`redirect_after_login`);
                    navigation.push(loginRedirect);
                }
                else navigation.push('/');
            } catch (e) {
                console.log(e);
                alert('Login Failed. Please try again');
            }
        } else alert('Please enter login details');
    }
    return (
        <>
            {session?.user && <Redirect to="/" />}
            <div className="mt-md-5">
                <div className="row">
                    <div className="col-md-7 ">
                        <h4 className="text-center">
                            {/* Login with Social  */} SignUp
                        </h4>
                        <br/>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Converse about Stocks,Finance,Topics and get answers for your Finance Questions</p>
                        <SignUp state={globalState} setState={setGlobalState} />
                    </div>
                    <div className="col-md-5 border-md-start">
                        <h4 className="text-center">
                            Login
                        </h4>
                        <div className="m-5">
                            <FormGroup className="mb-3">
                                <FloatingLabel controlId="login-email" label="Email" className="mb-3">
                                    <Form.Control type="text" placeholder="Email" required
                                        onChange={(event) => updateLogin('emailId', event.target.value)}
                                    />
                                </FloatingLabel>
                            </FormGroup>
                            <FormGroup className="mb-3">
                                <FloatingLabel controlId="password" label="Password" className="mb-3">
                                    <Form.Control type="password" placeholder="Password" required
                                        onChange={(event) => updateLogin('password', event.target.value)}
                                    />
                                </FloatingLabel>
                            </FormGroup>
                        </div>
                        <div className="text-center">
                            <button className="btn btn-outline-primary" onClick={() => doLogin()}>
                                Login
                            </button>
                            </div>
                            <br />
                        <div className="row">
<p className="col-sm-5 offset-md-1">
                            <GoogleLogin
                                clientId={"254675741531-om2q76vi5b4llcnqif7btlf7hehh7o71.apps.googleusercontent.com"}
                                buttonText="Sign in with Google"
                                render={renderProps => (
                                    <GoogleLoginButton onClick={renderProps.onClick}>Google Signin</GoogleLoginButton>
                                )}
                                onSuccess={onSuccess}
                                onFailure={onFailure}
                                cookiePolicy={'single_host_origin'}
                                isSignedIn={true}
                            />
                            </p>
                            <p className="col-sm-5 offset-md-1">
                            {/* <AppleLogin clientId="com.react.apple.login" redirectURI="https://redirectUrl.com" /> */}
                            <AppleLogin
                                clientId="YOUR_CLIENT_ID"
                                redirectURI="YOUR_REDIRECT_URL"
                                render={renderProps => (
                                    <AppleLoginButton onClick={renderProps.onClick}>Apple Signin</AppleLoginButton>
                                )}
                            // usePopup={true}
                            // callback={this.appleResponse} // Catch the response
                            />
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

exportdefaultLogin

 

 

and profile template like below:

// src/App.js
import React, { useState } from 'react';
import { Tabs, Tab } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
function Profile({ state, setState }) {
    const { session } = state;
    const saveDB = (event) => alert("Yoo please save");
    return (
        <div className="tab-wrapper">
            <div className='container-fluid' >
                <div className="row">
                    <div className="col-md-12">
                        <Tabs defaultActiveKey="profile">
                            <Tab eventKey="PersonalInformation" title="Personal Information">
                                <div className="tab-item-wrapper">
                                <br />
                                    <h5 style={{textAlign:'center'}}><i>Personal Information</i></h5>
                                    <br />
                                    <table className="table table-bordered table-striped mx-auto w-auto">
                                        <tbody>
                                            <tr>
                                                <th scope="row">Name</th>
                                                <th contenteditable="true">@Service Name</th>
                                            </tr>
                                            <tr>
                                                <th scope="row">Email</th>
                                                <th contenteditable="true">@Service</th>
                                            </tr><tr>
                                                <th scope="row">Phone No</th>
                                                <th contenteditable="true">@Service</th>
                                            </tr><tr>
                                                <th scope="row">Location</th>
                                                <th contenteditable="true">@Service</th>
                                            </tr><tr>
                                                <th scope="row">Trading Type &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                                                <th contenteditable="true">@Service</th>
                                            </tr>
                                            <tr>
                                                <th scope="row">Trader Type</th>
                                                <th contenteditable="true">@Service</th>
                                            </tr>
                                            <tr>
                                                <th scope="row">Experience</th>
                                                <th contenteditable="true">@Service</th>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <p className='text-center'>You can click, modify personal information and Save  <br /> <br />
                                        <button type="button" id="saveInfo" onClick={saveDB}>Save</button>
                                    </p>
                                </div>
                            </Tab>
                            <Tab eventKey="YourPosts" title="YourPosts">
                                <div className="tab-item-wrapper">
                                    <h5 style={{textAlign:'center'}}>Your Posts</h5>
                                    <p>At vero eos et accusamus et iusto odio dignissimos</p>
                                </div>
                            </Tab>
                            <Tab eventKey="Notifications" title="Notifications">
                                <br />
                                <div className="tab-item-wrapper">
                                    <br />
                                    <h5 style={{textAlign:'center'}}><i>Enable Notifications of your choice</i></h5>
                                    <br/>
                                    <table className="table table-bordered table-striped mx-auto w-auto">
                                        <thead>
                                            <tr>
                                                <th scope="col"></th>
                                                <th scope="col">Push &nbsp;&nbsp;&nbsp;&nbsp;</th>
                                                <th scope="col">Email &nbsp;&nbsp;&nbsp;&nbsp;</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <th scope="row">Topic</th>
                                                <td>   <div className="form-check form-switch">
                                                    <input className="form-check-input" type="checkbox" role="switch" id="topicPushSwitch" />
                                                </div></td>
                                                <td>   <div className="form-check form-switch">
                                                    <input className="form-check-input" type="checkbox" role="switch" id="topicEmailSwitch" />
                                                </div></td>
                                            </tr>
                                            <tr>
                                                <th scope="row">Question</th>
                                                <td>                                  <div className="form-check form-switch">
                                                    <input className="form-check-input" type="checkbox" role="switch" id="questionPushSwitch" />
                                                </div>
                                                </td>
                                                <td>                                  <div className="form-check form-switch">
                                                    <input className="form-check-input" type="checkbox" role="switch" id="questionEmailSwitch" />
                                                </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th scope="row">Portfolio &nbsp;&nbsp;&nbsp;&nbsp;</th>
                                                <td> <div className="form-check form-switch">
                                                    <input className="form-check-input" type="checkbox" role="switch" id="portfolioPushSwitch" />
                                                </div></td>
                                                <td> <div className="form-check form-switch">
                                                    <input className="form-check-input" type="checkbox" role="switch" id="portfolioEmailSwitch" />
                                                </div></td>
                                            </tr>
                                            <tr>
                                                <th scope="row">Articles</th>
                                                <td> <div className="form-check form-switch">
                                                    <input className="form-check-input" type="checkbox" role="switch" id="articlesPushSwitch" />
                                                </div></td>
                                                <td> <div className="form-check form-switch">
                                                    <input className="form-check-input" type="checkbox" role="switch" id="articlesEmailSwitch" />
                                                </div></td>
                                            </tr>
                                        </tbody>
                                    </table>                            <br />
                                </div>
                            </Tab>
                            <Tab eventKey="Feedback" title="Feedback">
                                <div className="tab-item-wrapper">
                                    <br/>
                                    <div className='row'>
                                        <div className="col-md-9">
                                        <h5 style={{textAlign:'center'}}><i> Feedback Form</i></h5>
                                        </div>
                                        <div className="col-md-2">
                                            <h6><u><i>Suggest StockJabber</i>&nbsp;&nbsp;<i className="bi bi-share-fill"></i></u></h6>
                                        </div>
                                        <div className="col-md-1">
                                            <h6><u><i>RateUs</i>&nbsp;&nbsp; <i className="bi bi-stars"></i></u></h6>
                                        </div>
                                    </div>
                                    <br/>
                                    <p>Please provide your feedback. Your suggestions are valuable to us and we are working relentlessly to make
                                        better Pinstox for your needs. </p>
                                        <br/>
                                        <table className="table table-bordered table-striped mx-auto w-auto">
                                        <tbody>
                                            <tr>
                                                <th scope="row">Name</th>
                                                <th><input type="textbox"></input></th>
                                            </tr>
                                            <tr>
                                                <th scope="row">Feature</th>
                                                <th><input type="textbox"></input></th>
                                            </tr>
                                            <tr>
                                                <th scope="row">Feedback Type</th>
                                                <th>
                                                    <select>
                                                        <option defaultChecked>Select</option>
                                                        <option>Improvement</option>
                                                        <option>Complaint</option>
                                                        <option>Other</option>
                                                    </select>
                                                </th>
                                            </tr>
                                            <tr>
                                                <th scope="row">Details</th>
                                                <th><input type="textarea" style={{minWidth:"500px"}}></input></th>
                                            </tr>
                                        </tbody>
                                    </table>
                                       
                                </div>
                            </Tab>
                        </Tabs>
                    </div>
                </div>
            </div>
        </div>
    );
}
export default Profile;
3 comments
ADMIN
Filip
Posted on: 09 Sep 2022 08:18

Hello, Revanth,

Thank you for the provided feedback.

I am converting this thread to an official feature request.

Regards,
Filip
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Revanth
Posted on: 08 Sep 2022 11:19

Hi Filip,

 

Got it, But it would be great if you provide group components like logon,signup and profile. These are general templates we may expect for each and every application.

 

Sure, I send you some free source code just for your reference. If possible treat my request as a new feature request if applicable.

 

Regards,

Revanth

ADMIN
Filip
Posted on: 08 Sep 2022 10:25

Hello, Revanth,

Currently, the KendoReact suite does not have a log-in and signup component that has the described logic available out of the box, however, we have a Form component that can prove useful when building such an interface:

https://www.telerik.com/kendo-react-ui/components/form/get-started/


I understand that this is not the same as a ready component and that the developer has to write the logic for handling the signup and login, nevertheless, I hope it might prove useful.

I hope this helps.

Regards,
Filip
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Create an account Log In
View
Type
Status
Category