react-google-login#GoogleLogin JavaScript Examples
The following examples show how to use
react-google-login#GoogleLogin.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: login.jsx From MERN-Gurujii-dev with MIT License | 6 votes |
|
render() {
return (
<div>
<GoogleLogin
clientId={clientId}
buttonText='Signin with Google'
theme='dark'
onSuccess={this.onSuccess}
onFailure={this.onFailure}
cookiePolicy={'single_host_origin'}
style={{ marginTop: '100px' }}
isSignedIn={true}
/>
</div>
);
}
Example #2
| Source File: Login.js From react-google-authentication with MIT License | 6 votes |
|
function Login() {
const onSuccess = (res) => {
console.log('Login Success: currentUser:', res.profileObj);
alert(
`Logged in successfully welcome ${res.profileObj.name} ?. \n See console for full profile object.`
);
refreshTokenSetup(res);
};
const onFailure = (res) => {
console.log('Login failed: res:', res);
alert(
`Failed to login. ? Please ping this to repo owner twitter.com/sivanesh_fiz`
);
};
return (
<div>
<GoogleLogin
clientId={clientId}
buttonText="Login"
onSuccess={onSuccess}
onFailure={onFailure}
cookiePolicy={'single_host_origin'}
style={{ marginTop: '100px' }}
isSignedIn={true}
/>
</div>
);
}
Example #3
| Source File: SignupMenuModal.js From airdnd-frontend with MIT License | 5 votes |
|
SignupMenuModal = ({
modalVisible,
openLoginModal,
openSignupEmailModal,
closeModal,
onSuccessGoogle,
onFailureGoogle,
}) => {
return (
<StSignupMenuModal
modalState={modalVisible}
header
title="회원가입"
width="570px"
height="380px"
setModalState={closeModal}
>
<StSignupFormWrapper>
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_LOGIN_API_KEY}
cookiePolicy={'single_host_origin'}
onSuccess={onSuccessGoogle}
onFailure={onFailureGoogle}
render={renderProps => (
<StFacebookButton onClick={renderProps.onClick}>
<FaFacebookF />
<StButtonText>페이스북 계정으로 회원 가입</StButtonText>
</StFacebookButton>
)}
></GoogleLogin>
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_LOGIN_API_KEY}
cookiePolicy={'single_host_origin'}
onSuccess={onSuccessGoogle}
onFailure={onFailureGoogle}
render={renderProps => (
<StGoogleButton onClick={renderProps.onClick}>
<FcGoogle />
<StButtonText>구글 계정으로 회원 가입</StButtonText>
</StGoogleButton>
)}
></GoogleLogin>
<StDividerLine />
<StDividerText>또는</StDividerText>
<StEmailButton onClick={openSignupEmailModal}>
<AiOutlineMail />
<StButtonText>이메일로 회원 가입</StButtonText>
</StEmailButton>
<StDividerLine />
<StLoginButtonWrapper>
<StLoginText>이미 에어비앤비 계정이 있나요?</StLoginText>
<StLoginButton btnType="color" onClick={openLoginModal}>
로그인
</StLoginButton>
</StLoginButtonWrapper>
</StSignupFormWrapper>
</StSignupMenuModal>
);
}
Example #4
| Source File: GoogleAuth.js From devagram with GNU General Public License v3.0 | 5 votes |
|
GoogleAuth = (props) => {
const successResponse = (response) => {
/**
* This will return google data of user like emailId, name, fullname, profileUrl, GoogleId idToken etc.
* Make backend api call according and add authType as google
*/
console.log(response);
};
const failureResponse = (response) => {
/**
* Return error if something went wrong
* Handle error accordingly
*/
console.log(response);
};
return (
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_OAUTH_CLIENT_ID}
buttonText="SignIn wih google"
onSuccess={successResponse}
onFailure={failureResponse}
cookiePolicy={"single_host_origin"}
theme={"dark"}
render={(props) => (
<Button
type="button"
btnType="Google"
disabled={props.disabled}
onClick={props.onClick}
>
<FaGoogle style={{ marginRight: "0.2rem" }} />
Login with Google
</Button>
)}
/>
);
}
Example #5
| Source File: GoogleLoginModal.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
GoogleLoginModal = ({
show,
onHide,
googleClassRoomLogin,
googleClassRoomLoginFailure,
googleClassRoomCourseTopics,
projectId,
playlistId,
activityId,
}) => {
const dataRedux = useSelector((state) => state);
const [tokenTemp, setTokenTemp] = useState('');
const [showForm, setShowForm] = useState(false);
const [courses, setCourses] = useState([]);
const [topics, setTopics] = useState([]);
const [loading, setLoading] = useState(true);
const [isShowPlaylistSelector, setIsShowPlaylistSelector] = useState(false);
const [shareType, setShareType] = useState('Project');
useEffect(() => {
if (dataRedux.share.googleShare === true) {
setShowForm(true);
} else if (dataRedux.share.googleShare === false) {
setShowForm(false);
} else if (dataRedux.share.googleShare === 'close') {
onHide();
}
if ((typeof playlistId == 'undefined') && (typeof activityId == 'undefined')) {
setShareType('Project');
}
else if (playlistId != 0 && activityId != 0) {
setShareType('Activity');
}
else if (playlistId != 0 && activityId == 0) {
setShareType('Playlist');
}
}, [dataRedux, onHide]);
useEffect(() => {
if (dataRedux.share.courses) {
setCourses(dataRedux.share.courses);
setLoading(false);
}
}, [dataRedux.share.courses]);
useEffect(() => {
if (dataRedux.share.topics) {
setTopics(dataRedux.share.topics);
setLoading(false);
}
}, [dataRedux.share.topics]);
const onCourseChange = (e) => {
googleClassRoomCourseTopics(e.target.value);
setIsShowPlaylistSelector(true);
};
const callPublishingMethod = (params) => {
if ((typeof params.playlistId == 'undefined' && typeof params.activityId == 'undefined') ||
(params.playlistId === 0 && params.activityId === 0)) {
if (params.values.course === 'Create a new class') {
copyProject(params.projectId, null, params.tokenTemp);
} else {
copyProject(params.projectId, params.values.course, params.tokenTemp);
}
}
else if (params.playlistId != 0 && params.activityId != 0){
if (typeof params.values.course == 'undefined') {
publistActivity(params.projectId, null, null, params.playlistId, params.activityId, params.tokenTemp);
} else if ((typeof params.values.course == 'undefined') && (typeof params.values.playlist == 'undefined')) {
publistActivity(params.projectId, params.values.course, null, params.playlistId, params.activityId, params.tokenTemp);
} else {
publistActivity(params.projectId, params.values.course, params.values.playlist, params.playlistId, params.activityId, params.tokenTemp);
}
}
else if (params.playlistId != 0 && params.activityId == 0)
{
if (typeof params.values.course == 'undefined') {
publishPlaylist(params.projectId, null, null, params.playlistId, params.tokenTemp);
} else if ((typeof params.values.course == 'undefined') && (typeof params.values.playlist == 'undefined')) {
publishPlaylist(params.projectId, params.values.course, null, params.playlistId, params.tokenTemp);
} else {
publishPlaylist(params.projectId, params.values.course, params.values.playlist, params.playlistId, params.tokenTemp);
}
}
}
return (
<Modal
open={show}
onClose={onHide}
center
styles={{borderRadius:"8px", height:"310px", width:"640px"}}
>
<div className="model-box-google model-box-view">
<div style={{textAlign: "center", margin: "32px 146.38px 0 146.38px"}}>
<img src={logo} alt="" />
</div>
<div className="model-body" style={{ maxWidth: '500px' }}>
<div className="sign-in-google">
<br />
{!showForm ? (
<div className="content-authorization" style={{textAlign:"center"}}>
<div className="alert alert-warning" style={{borderRadius:"8px"}}>
With CurrikiStudio you can publish your {shareType} as a new Google Classroom course.
</div>
<p>To start, please log into your Google account.</p>
<div style={{marginBottom:"32px"}}>
<GoogleLogin
clientId={global.config.gapiClientId}
render={renderProps => (
<button onClick={renderProps.onClick}
style={{width:"240px",height:"32px",borderRadius:"16px",background: "#FFFFFF", border: "1px solid #959595", boxShadow: "0px 2px 8px 1px rgba(81, 81, 81, 0.16)",padding:"6px 0"}}
disabled={renderProps.disabled}>
<img src={btnLogo} alt="" style={{padding: "0px 6px 2px 0px"}}/>
Login with Google
</button>
)}
onSuccess={(data) => {
googleClassRoomLogin(data);
setTokenTemp(JSON.stringify(data.tokenObj));
}}
// onFailure={googleClassRoomLoginFailure}
scope="https://www.googleapis.com/auth/classroom.courses.readonly https://www.googleapis.com/auth/classroom.courses https://www.googleapis.com/auth/classroom.topics https://www.googleapis.com/auth/classroom.coursework.me https://www.googleapis.com/auth/classroom.coursework.students"
cookiePolicy="single_host_origin"
>
</GoogleLogin>
</div>
</div>
) : (
<div className="classroom-form">
<div>
<h1>Are you sure you want to share this {shareType} to Google Classroom?</h1>
{loading && (
<p className="loading-classes">Loading Classes....</p>
)}
<Formik
initialValues={{
course: undefined,
heading: 'test',
description: 'test',
room: 'test',
}}
onSubmit={(values) => {
callPublishingMethod({ tokenTemp, values, projectId, playlistId, activityId })
setLoading(false);
onHide();
}}
>
{({
values,
// errors,
// touched,
handleChange,
handleBlur,
handleSubmit,
// isSubmitting,
/* and other goodies */
}) => (
<form onSubmit={handleSubmit}>
<select
className="form-control select-dropdown"
name="course"
value={values.course}
onChange={(e)=>{
handleChange(e);
onCourseChange(e);
}}
onBlur={handleBlur}
>
<option>Create a new class</option>
{!!courses && courses.map((item) => (
<option key={item.id} value={item.id}>{item.name}</option>
))}
</select>
{isShowPlaylistSelector && playlistId > 0 && (
<select
className="form-control select-dropdown"
name="playlist"
value={values.playlist}
onChange={handleChange}
onBlur={handleBlur}
>
<option>Create a new topic</option>
{!!topics && topics.map((topic) => (
<option key={topic.topicId} value={topic.topicId}>{topic.name}</option>
))}
</select>
)}
{/* <input
type="text"
name="course"
class="form-control"
onChange={handleChange}
onBlur={handleBlur}
value={values.course}
placeholder="Course Name"
/> */}
{/* {errors.course && touched.course && (
<div className="form-error">{errors.course}</div>
)} */}
{/* <select
class="form-control"
name="room"
onChange={handleChange}
onBlur={handleBlur}
value={values.room}
placeholder="Course Name"
>
<option>Select your room</option>
{rooms.map((data) => (
<option key={data.id}>{data}</option>
))}
</select> */}
{/* {errors.room && touched.room && (
<div className="form-error">{errors.room}</div>
)} */}
{/* <input
type="text"
name="heading"
class="form-control"
onChange={handleChange}
onBlur={handleBlur}
value={values.heading}
placeholder="Heading"
/> */}
{/* {errors.heading && touched.heading && (
<div className="form-error">{errors.heading}</div>
)} */}
{/* <textarea
class="form-control"
rows="5"
type="text"
name="description"
onChange={handleChange}
onBlur={handleBlur}
value={values.description}
placeholder="Description"
/> */}
{/* {errors.description && touched.description && (
<div className="form-error">{errors.description}</div>
)} */}
{/*
<p>
Are you sure you want to share this Project to Google Classroom?
</p>
*/}
{!loading && (
<button type="submit">Confirm</button>
)}
</form>
)}
</Formik>
</div>
</div>
)}
</div>
</div>
</div>
</Modal>
);
}
Example #6
| Source File: LoginPage.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { email, password, rememberMe, error, clicked, activeTab, showPassword } = this.state;
const { isLoading, domain } = this.props;
console.log('domain', domain);
return (
<div className="auth-page">
<Logo />
{!clicked ? (
<div className="auth-container">
<div className="d-flex align-items-center justify-content-between">
<h1 className="auth-title ">Welcome to {window.__RUNTIME_CONFIG__.REACT_APP_INSTANT_NAME || 'Curriki'}</h1>
{/* <strong>OR</strong> */}
{/* <button
type="button"
className="btn btn-outline-primary text-uppercase"
onClick={this.goToRegister}
>
Sign Up
</button> */}
</div>
{/* <h2 className="auth-subtitle">Powering the creation of the world’s Most Immersive Learning Experience</h2> */}
<p className="auth-Pdescrip">Sign Up and start making a difference in the way learning experiences are created.</p>
<form onSubmit={this.onSubmit} autoComplete="off" className="auth-form">
<div className="form-group text-center mb-0">
<GoogleLogin
clientId={global.config.gapiClientId}
theme="dark"
render={(renderProps) => (
<button type="button" className="google-button" onClick={renderProps.onClick} disabled={renderProps.disabled}>
<img src={googleIcon} alt="googleIcon" style={{ float: 'left', paddingRight: '19.23px' }} />
Continue with Google
</button>
)}
onSuccess={this.onGoogleLoginSuccess}
onFailure={this.onGoogleLoginFailure}
cookiePolicy="single_host_origin"
/>
</div>
{window.__RUNTIME_CONFIG__.REACT_APP_STEMULI === 'true' && (
<div className="form-group text-center mb-4">
<button
type="button"
className="email-button"
onClick={() => {
window.location.href = `${window.__RUNTIME_CONFIG__.REACT_APP_API_URL}/oauth/stemuli/redirect`;
}}
>
<img src={stemuliIcon} alt="stemuli icon" style={{ float: 'left', paddingRight: '19.23px' }} />
<span>Continue with Stemuli</span>
</button>
</div>
)}
<div className="form-group text-center mb-0">
<button
type="button"
className="email-button"
onClick={() =>
this.setState({
clicked: true,
})
}
>
<img src={emailIcon} alt="email icon" style={{ float: 'left', paddingRight: '19.23px' }} />
<span>Continue with Email</span>
</button>
</div>
</form>
<p className="auth-description">
New to Curriki?
<a onClick={this.goToRegister}>Sign up</a>
</p>
<p className="auth-p2-descrip">
By clicking the Sign Up button, you are creating a CurrikiStudio account, and you agree to Currikis
<a href="/" target="_blank">
Terms of Use
</a>
and
<a href="/" target="_blank">
Privacy Policy.
</a>
</p>
</div>
) : (
<div className="auth-container">
<div className="d-flex align-items-center justify-content-between">
<h1 className="auth-title">Welcome to {window.__RUNTIME_CONFIG__.REACT_APP_INSTANT_NAME || 'Curriki'}</h1>
</div>
<p className="auth-Pdescrip">Start making a difference in the way learning experiences are created.</p>
<div className="content-section">
<Tabs
defaultActiveKey={activeTab}
activeKey={activeTab}
id="uncontrolled-tab-example"
onSelect={(key) => {
this.setState({ activeTab: key });
if (key === 'Sign up') this.goToRegister();
}}
>
<Tab eventKey="Log in" title="Log in">
<div className="module-content">
<form onSubmit={this.onSubmit} autoComplete="off" className="auth-form">
<div className="form-group">
{/* <FontAwesomeIcon icon="envelope" /> */}
<span>Email</span>
<input
autoFocus
className="input-box"
// type="email"
name="email"
required
value={email}
onChange={this.onChangeField}
/>
</div>
<div className="form-group">
{/* <FontAwesomeIcon icon="lock" /> */}
<span style={{ display: 'flex', justifyContent: 'space-between' }}>
Password
<div className="show-password" onClick={() => this.setState({ showPassword: !showPassword })}>
<img src={eye} alt="show-password" />
Show
</div>
</span>
<input
className="password-box"
type={showPassword ? 'text' : 'password'}
name="password"
placeholder="********"
required
value={password}
onChange={this.onChangeField}
/>
</div>
<div className="form-group remember-me">
<label>
<input type="checkbox" name="rememberMe" value={rememberMe} onChange={this.onChangeField} />
Keep me logged in.
</label>
<div className="forgot-password-box">
<Link to="/forgot-password">Forgot Password ?</Link>
</div>
</div>
<div className="form-group">
<Error error={error} />
</div>
<div className="form-button">
<button type="submit" className="btn btn-primary submit" disabled={isLoading || this.isDisabled()}>
{isLoading ? <img src={loader} alt="" /> : 'Log in'}
</button>
</div>
{true ? (
<>
{/* <div className="vertical-line">
<div className="line" />
<p className="line-or">or</p>
<div className="line" />
</div> */}
{/* <p className="auth-description text-center">
New to Curriki?
<a onClick={this.goToRegister}>
Sign up
</a>
</p> */}
<div className="form-group text-center mb-0">
<GoogleLogin
clientId={global.config.gapiClientId}
theme="dark"
render={(renderProps) => (
<button type="button" className="google-button" onClick={renderProps.onClick} disabled={renderProps.disabled}>
<img src={googleIcon} alt="googleIcon" />
<div>Log in with Google</div>
</button>
)}
onSuccess={this.onGoogleLoginSuccess}
onFailure={this.onGoogleLoginFailure}
cookiePolicy="single_host_origin"
/>
</div>
</>
) : null}
<div className="termsandcondition">
By clicking the "Login" button, you agree to Curriki' s{' '}
<a
target="_blank"
href={domain?.tos_type == 'URL' || domain?.tos_url != null ? domain?.tos_url : `/org/${domain?.domain}/terms-policy-content/tos_content`}
>
Terms of Use
</a>{' '}
and{' '}
<a
target="_blank"
href={
domain?.privacy_policy_type == 'URL' || domain?.privacy_policy_url != null
? domain?.privacy_policy_url
: `/org/${domain?.domain}/terms-policy-content/privacy_policy_content`
}
>
Privacy Policy.
</a>
</div>
</form>
</div>
</Tab>
{domain?.self_registration === true && <Tab eventKey="Sign up" title="Sign up" />}
</Tabs>
</div>
</div>
)}
{/* <img src={bg} className="bg1" alt="" /> */}
{/* <img src={bg1} className="bg2" alt="" /> */}
</div>
);
}
Example #7
| Source File: RegisterPage.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { firstName, lastName, email, password, organization_name, job_title, error, organization_type, clicked, activeTab, stepper, googleResponse, showPassword } = this.state;
const { isLoading, organizationTypes, domain } = this.props;
return (
<>
{domain?.self_registration === true && (
<div className="auth-page">
<Logo />
<div className="auth-container">
<div className="d-flex align-items-center justify-content-between">
<h1 className="auth-title mb2">
Welcome
{!clicked ? ` to ${window.__RUNTIME_CONFIG__.REACT_APP_INSTANT_NAME || 'Curriki'}` : `, ${firstName}`}
</h1>
{/* <strong>OR</strong> */}
{/* <button
type="button"
className="btn btn-outline-primary text-uppercase"
onClick={this.goToLogin}
>
Login
</button> */}
</div>
<p className="auth-Pdescrip text-left">
{!clicked
? 'Start making a difference in the way learning experiences are created.'
: 'Before start creating awesome content, please let us know the usage your are giving to Curriki. '}
</p>
<div className="content-section">
<Tabs
defaultActiveKey={activeTab}
activeKey={activeTab}
id="uncontrolled-tab-example"
style={{ display: stepper ? 'none' : 'flex' }}
onSelect={(key) => {
this.setState({ activeTab: key });
if (key === 'Log in') this.goToLogin();
}}
>
<Tab eventKey="Log in" title="Log in" />
<Tab eventKey="Sign up" title="Sign up" style={{ display: stepper ? 'none' : 'flex' }}>
<form onSubmit={this.onSubmit} autoComplete="off" className="auth-form">
{!clicked && (
<>
<div className="form-group text-center mb-2">
<GoogleLogin
clientId={global.config.gapiClientId}
theme="dark"
render={(renderProps) => (
<button type="button" className="google-button" onClick={renderProps.onClick} disabled={renderProps.disabled}>
<img src={googleIcon} alt="googleIcon" />
<div>Sign up with Google</div>
</button>
)}
onSuccess={async (response) => {
const emailCheckResponse = await authService.checkEmail(response.profileObj.email);
if (emailCheckResponse?.exists === true) return this.setState({ error: emailCheckResponse.message });
return this.setState({ stepper: true, googleResponse: response });
// this.onGoogleLoginSuccess(response);
}}
onFailure={this.onGoogleLoginFailure}
cookiePolicy="single_host_origin"
/>
</div>
<div className="hr-spacer">
<span>OR</span>
</div>
<div className="form-group d-flex">
<div className="input-wrapper">
<span>Name</span>
<input autoFocus className="input-box" name="firstName" required maxLength="50" value={firstName} onChange={this.onChangeField} />
</div>
<div className="input-wrapper">
<span>Last name</span>
<input className="input-box" name="lastName" required maxLength="50" value={lastName} onChange={this.onChangeField} />
</div>
</div>
<div className="form-group">
<span>Email</span>
<input
className="input-box"
// type="email"
name="email"
required
maxLength="250"
disabled={query?.email && true}
value={email}
onChange={this.onChangeField}
/>
</div>
<div className="form-group">
<span style={{ display: 'flex', justifyContent: 'space-between' }}>
Password
<div className="show-password" onClick={() => this.setState({ showPassword: !showPassword })}>
<img src={eye} alt="show-password" />
Show
</div>
</span>
<input
className="password-box"
type={showPassword ? 'text' : 'password'}
name="password"
required
maxLength="250"
value={password}
onChange={this.onChangeField}
/>
</div>
<div className="form-group">
<Error error={error} />
</div>
<div className="form-group mb-0" style={{ marginTop: '48px' }}>
<button
type="button"
className="signUp-btn submit"
onClick={() => {
const passwordValidator = this.validatePassword(password);
const emailValidator = validator.isEmail(email.trim());
if (passwordValidator && emailValidator) {
this.setState({
clicked: true,
error: null,
stepper: true,
});
} else if (!passwordValidator) {
this.setState({
error: 'Password must be 8 or more characters long,should contain at least 1 Uppercase, 1 Lowercase and 1 Numeric character.',
});
} else if (!emailValidator) {
this.setState({
error: 'Please input valid email.',
});
}
}}
disabled={isLoading || this.isDisabledSignUp()}
>
{isLoading ? <img src={loader} alt="" /> : 'Sign up with Email'}
</button>
</div>
{/* <div className="vertical-line">
<div className="line" />
<p className="line-or">or</p>
<div className="line" />
</div> */}
{/* <p className="auth-description text-center">
Back to Curriki?
<a onClick={this.goToLogin}>
Login
</a>
</p> */}
<div className="termsandcondition">
By clicking the "Sign Up" button, you are creating a CurrikiStudio account, and you agree to Curriki's{' '}
<a
target="_blank"
href={domain?.tos_type == 'URL' || domain?.tos_url != null ? domain?.tos_url : `/org/${domain?.domain}/terms-policy-content/tos_content`}
>
Terms of Use
</a>{' '}
and{' '}
<a
target="_blank"
href={
domain?.privacy_policy_type == 'URL' || domain?.privacy_policy_url != null
? domain?.privacy_policy_url
: `/org/${domain?.domain}/terms-policy-content/privacy_policy_content`
}
>
Privacy Policy.
</a>
</div>
</>
)}
</form>
</Tab>
</Tabs>
</div>
{stepper && (
<>
<div className="form-group">
<div className="bkbtn">
{/* <button type="button" onClick={() => this.setState({ clicked: false, stepper: false })}> */}
<img src={leftArrow} alt="arrow-left" />
<a onClick={() => this.setState({ clicked: false, stepper: false })}> Back </a>
{/* </button> */}
</div>
</div>
<div className="form-group">
<div className="using-curriki">
<div className="curriki-line">You are using Curriki for:</div>
<div className="line-horizontal" />
</div>
</div>
<div className="form-group ">
<select
className="input-box organization-type"
name="organization_type"
placeholder="Organization Type*"
value={organization_type}
onChange={this.onChangeField}
>
<option selected value="">
Select an Organization Type
</option>
{organizationTypes.map((type) => (
<option value={type.label}>{type.label}</option>
))}
</select>
</div>
<div className="form-group">
<span>Organization name</span>
<input className="input-box" name="organization_name" maxLength="50" value={organization_name} onChange={this.onChangeField} />
</div>
<div className="form-group">
<span>Job title</span>
<input className="input-box" name="job_title" maxLength="50" value={job_title} onChange={this.onChangeField} />
</div>
<div className="form-group">
<Error error={error} />
</div>
<div className="form-group mb-0" style={{ marginTop: '50px' }}>
<button
type="submit"
className="btn-primary submit get-started-btn"
onClick={(e) => {
this.setState({ clicked: true });
this.onSubmit(e);
}}
disabled={isLoading || (googleResponse ? this.isDisabledGoogle() : this.isDisabled())}
>
{isLoading ? <img src={loader} alt="" /> : 'Complete Registration'}
</button>
</div>
</>
)}
</div>
<img src={bg} className="bg1" alt="" />
<img src={bg1} className="bg2" alt="" />
</div>
)}
</>
);
}
Example #8
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function GclassActivityPage(props) {
const {
match,
student,
courses,
setStudentAuth,
refreshStudentAuthToken,
getStudentCourses,
submissionError,
// orientation,
} = props;
const { activityId, courseId } = match.params;
const [authorized, setAuthorized] = useState(null);
const [isTeacher, setIsTeacher] = useState(null);
const [activeCourse, setActiveCourse] = useState(null);
// Gets student courses
useEffect(() => {
if (student === null) return;
getStudentCourses(student.auth.accessToken);
}, [student]);
// Checks user membership in the course
useEffect(() => {
if (courses === null) return;
let found = false;
let teacher = false;
// eslint-disable-next-line no-restricted-syntax
for (const i in courses) {
if (courses[i].id === courseId) {
found = true;
setActiveCourse(courses[i]);
if (courses[i].ownerId === student.auth.googleId) {
teacher = true;
}
}
}
setAuthorized((found && !teacher && !submissionError));
setIsTeacher(teacher);
}, [courses, courseId, submissionError]);
const handleLogin = (data) => {
if (!data) return;
setStudentAuth(data);
// Refresh token in less than half an hour
setInterval(() => {
data.reloadAuthResponse().then((newData) => {
refreshStudentAuthToken(newData);
});
}, 1000 * 60 * 15);
};
return (
<>
<div className="gclass-activity-container">
<section className="main-page-content preview iframe-height-resource-shared defaultcontainer">
<Helmet>
<script
src="https://dev.currikistudio.org/api/storage/h5p/h5p-core/js/h5p-resizer.js"
charset="UTF-8"
/>
</Helmet>
<div className="flex-container previews">
<div className="activity-bg left-vdo">
<div className="main-item-wrapper desktop-view">
<div className="item-container">
{authorized && <Activity activityId={activityId} activeCourse={activeCourse} />}
{!authorized && (
<div className="container">
<div className="row">
<div className="col text-center">
<img className="curriki-logo" src={logo} alt="" />
</div>
</div>
{authorized === false && (
<div className="row m-4">
<div className="col text-center">
<Alert variant="warning">
You don't seem to be authorized to take this
activity.
</Alert>
</div>
</div>
)}
{isTeacher === true && (
<div className="row m-4">
<div className="col text-center">
<Alert variant="warning">
You are the teacher for this activity. Please login as a student to take the activity.
</Alert>
</div>
</div>
)}
{submissionError && (
<div className="row m-4">
<div className="col text-center">
<Alert variant="warning">
{submissionError}
</Alert>
</div>
</div>
)}
<div className="row m-4">
<div className="col text-center">
<h2>Please log in to take this activity.</h2>
<GoogleLogin
clientId={global.config.gapiClientId}
buttonText="Login"
onSuccess={handleLogin}
onFailure={handleLogin}
isSignedIn
scope="
https://www.googleapis.com/auth/classroom.courses.readonly
https://www.googleapis.com/auth/classroom.courses
https://www.googleapis.com/auth/classroom.topics
https://www.googleapis.com/auth/classroom.coursework.me
https://www.googleapis.com/auth/classroom.coursework.students
https://www.googleapis.com/auth/classroom.rosters.readonly
"
cookiePolicy="single_host_origin"
/>
</div>
</div>
</div>
)}
</div>
</div>
</div>
</div>
</section>
</div>
{/* {(orientation >= 90)
&& (
<div className="coverallareas">
<Alert variant="warning">Please use Portrait mode!</Alert>
</div>
)} */}
</>
);
}
Example #9
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function GclassSummaryPage(props) {
const {
match,
student,
teacher,
errors,
summaryError,
getSummaryAuth,
} = props;
const studentName = (student) ? student.name : 'your student';
const handleLogin = (data) => {
getSummaryAuth(data, match.params.courseId, match.params.gClassworkId, match.params.submissionId);
};
return (
<div className="gclass-activity-container">
<section className="main-page-content preview iframe-height-resource-shared">
<Helmet>
<script
src="https://dev.currikistudio.org/api/storage/h5p/h5p-core/js/h5p-resizer.js"
charset="UTF-8"
/>
</Helmet>
<div className="container">
<div className="row">
<div className="col">
{student && !errors && <ActivitySummary /> }
{(!student || errors || summaryError) && (
<div className="auth-container">
<div className="row">
<div className="col text-center">
<img className="curriki-logo" src={logo} alt="" />
</div>
</div>
{errors && errors[0].code !== 3 && (
<div className="row m-4">
<div className="col text-center">
<Alert variant="warning">
<p>
{errors[0].msg}
</p>
</Alert>
</div>
</div>
)}
{summaryError && (
<div className="row m-4">
<div className="col text-center">
<Alert variant="warning">
<p>
{summaryError}
</p>
</Alert>
</div>
</div>
)}
{errors && errors[0].code === 3 && teacher === false && (
<div className="row m-4">
<div className="col text-center">
<Alert variant="warning">
<h4>
{`Oops! It looks like your submission isn't available at ${window.location.hostname}.`}
</h4>
<p>
To resubmit your assigment follow these steps:
<ul>
<li>Unsubmit the assignment in Google Classroom.</li>
<li>Resume your assignment as usual.</li>
<li>If the problem persists, please contact your teacher or one of our support channels.</li>
</ul>
</p>
</Alert>
</div>
</div>
)}
{errors && errors[0].code === 3 && teacher && (
<div className="row m-4">
<div className="col text-center">
<Alert variant="warning">
<h4>
{`Oops! It looks like the submission for ${studentName} is not available at ${window.location.hostname}.`}
</h4>
<p>
{`You can return the assignment without a grade in the google classroom interface, so that ${studentName} can resume the assignment.`}
</p>
<p>
{`Consider sending a message to ${studentName} about resubmitting the assignment.`}
</p>
<p>
For further assistance use our support channels.
</p>
</Alert>
</div>
</div>
)}
<div className="row m-4">
<div className="col text-center">
<h2>Please log in to view this summary.</h2>
<GoogleLogin
clientId={global.config.gapiClientId}
buttonText="Login"
onSuccess={handleLogin}
onFailure={handleLogin}
scope="
https://www.googleapis.com/auth/classroom.courses.readonly
https://www.googleapis.com/auth/classroom.courses
https://www.googleapis.com/auth/classroom.topics
https://www.googleapis.com/auth/classroom.coursework.me
https://www.googleapis.com/auth/classroom.coursework.students
https://www.googleapis.com/auth/classroom.rosters.readonly
"
cookiePolicy="single_host_origin"
/>
</div>
</div>
</div>
)}
</div>
</div>
</div>
</section>
</div>
);
}
Example #10
| Source File: LogReg.jsx From Frontend with Apache License 2.0 | 4 votes |
|
LogReg = () => {
//states and handler for register
const [emailR, setEmailR] = useState('')
const [usernameR, setUsernameR] = useState('')
const [passwordR, setPassWordR] = useState('')
const [msgR, setmsgR] = useState('')
const [togR, setTogR] = useState(true)
const [loaderR, setLoaderR] = useState(false)
let err = localStorage.getItem('err')
localStorage.removeItem('err')
async function Register(e) {
e.preventDefault()
if (passwordR.length < 1 || usernameR.length < 1 || emailR.length < 1) {
alert('Fields should not remain blank')
return
}
setLoaderR(true)
const data = await register(emailR, usernameR, passwordR)
//console.log(data)
if (data.status === 'OK') {
setmsgR('Successful, verify your email')
} else if (data.status == 'FAILED') {
setmsgR(data.error)
} else {
let msg = ''
if (data.email) {
msg = msg + ' email:' + data.email[0] + '\n'
}
if (data.username) {
msg = msg + ' username :' + data.username[0] + '\n'
}
if (data.password) {
msg = msg + ' password :' + data.password[0]
}
setmsgR(msg)
}
setLoaderR(false)
}
async function handleGoogleSuccess(response) {
// console.log("onSuccess");
const c = await response.tokenId
// console.log(c);
const resp = await fetch(
'https://api.codedigger.tech/social_auth/google/',
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
auth_token: c,
}),
}
)
const data = await resp.json()
//console.log(data);
if (resp.status !== 200) {
alert(data.detail)
} else {
localStorage.setItem(
'creds',
JSON.stringify({
access: data.tokens.access,
refresh: data.tokens.refresh,
first: data.first_time,
username: data.username,
})
)
if (data.first_time === true) {
window.location = '/profile/:id'
} else {
window.location = '/home'
}
//console.log(c);
}
}
function handleGoogleFail(response) {
// console.log(response)
alert('failed')
}
async function Sendagain(e) {
e.preventDefault()
setLoaderR(true)
const data = await sendVerEmail(emailR)
// console.log(data);
setLoaderR(false)
setmsgR(data.result)
}
//states and handler for login
const [usernameL, setUserNameL] = useState('')
const [passwordL, setpasswordL] = useState('')
const [msgL, setmsgL] = useState('')
const [first, setFirst] = useState(false)
const [togL, setTogL] = useState(true)
const [loaderL, setLoaderL] = useState(false)
async function Login(e) {
e.preventDefault()
if (usernameL.length < 1 || passwordL.length < 1) {
alert('Fields should not remain blank')
return
}
setLoaderL(true)
const data = await login(usernameL, passwordL)
// console.log(data);
if (data.status == 'FAILED') {
setmsgL(data.error)
} else if (data.tokens) {
setmsgL(`Hello, ${usernameL}`)
localStorage.setItem(
'creds',
JSON.stringify({
access: data.tokens.access,
refresh: data.tokens.refresh,
first: data.first_time_login,
username: usernameL,
})
)
if (data.first_time_login === true) {
window.location = '/profile/:id'
} else {
window.location = '/home'
}
} else if (data.password) {
setmsgL('Password :' + data.password[0])
} else if (data.username) {
setmsgL('Username :' + data.username[0])
}
setLoaderL(false)
}
const switchers = [...document.querySelectorAll('.switcher')]
const [show, setShow] = useState(true)
switchers.forEach((item) => {
item.addEventListener('click', function () {
switchers.forEach((item) =>
item.parentElement.classList.remove('is-active')
)
this.parentElement.classList.add('is-active')
})
})
setTimeout(() => {
setShow(false)
}, 1000)
return (
<>
<Navbar />
<br></br>
<br></br>
<br></br>
{err ? (
<Popup open={true}>
<div
style={{ color: 'white', backgroundColor: 'black', padding: '4px' }}
>
{err}
</div>
</Popup>
) : (
<></>
)}
<div>
{show ? (
<Loading />
) : (
<>
{/**start */}
<div
style={{
alignItems: 'center',
float: 'left',
width: '40%',
paddingLeft: '60px',
}}
>
<img
src={leftlowerIcon}
style={{
marginLeft: '50px',
width: '480px',
height: '480px',
marginTop: '65px',
}}
></img>
</div>
<div className="ContBody">
<section className="forms-section">
<div className="forms">
<div className="form-wrapper is-active">
<button type="button" className="switcher switcher-login">
Login
<span className="underline"></span>
</button>
<form className="form form-login">
<fieldset>
<legend>
Please, enter your email and password for login.
</legend>
<div className="input-block">
<label for="login-email">Username</label>
<input
required
onChange={(e) => setUserNameL(e.target.value)}
id="login-email"
type="text"
required
/>
</div>
<div className="input-block">
<label for="login-password">Password</label>
<input
required
onChange={(e) => setpasswordL(e.target.value)}
id="login-password"
type={togL ? 'password' : 'text'}
required
></input>
<span class="field-icon toggle-password">
<img
style={{ marginRight: '4px' }}
src={Eye}
onClick={(e) => {
e.preventDefault()
setTogL(!togL)
}}
className="eye"
></img>
</span>
</div>
</fieldset>
{msgL.length > 0 ? (
<Popup open={true}>
<div
style={{
color: 'white',
backgroundColor: 'black',
padding: '4px',
}}
>
{msgL}
</div>
</Popup>
) : (
<></>
)}
<button
onClick={Login}
type="submit"
className="btn-login"
>
{loaderL ? 'Processing..' : 'Login'}
</button>
{loaderL ? (
<Spinner
className="loading-animation"
animation="border"
/>
) : (
<></>
)}
<div className="loginops">
<img
style={{
width: '35px',
height: '35px',
'margin-top': '4px',
}}
src={GoogleIcon}
></img>
<GoogleLogin
clientId={process.env.REACT_APP_CLIENTID}
buttonText="Login with Google"
onSuccess={handleGoogleSuccess}
//onFailure={handleGoogleFail}
cookiePolicy={'single_host_origin'}
icon={false}
/>
</div>
<br></br>
<div
style={{
display: 'block',
'text-align': 'center',
'font-size': '16px',
}}
>
<a href="/ForgPass">Forgot Password ?</a>
</div>
</form>
</div>
<div class="form-wrapper">
<button
type="button"
className="switcher switcher-signup"
onClick={() => {
const switchers = [
...document.querySelectorAll('.switcher'),
]
switchers.forEach((item) => {
item.addEventListener('click', function () {
switchers.forEach((item) =>
item.parentElement.classList.remove('is-active')
)
this.parentElement.classList.add('is-active')
})
})
}}
>
Register
<span className="underline"></span>
</button>
<form className="form form-signup">
{msgR === '' ||
msgR !== 'Successful, verify your email' ? (
<>
<fieldset>
<legend>
Please, enter your email, username and password
for sign up.
</legend>
<div className="input-block">
<label for="signup-email">E-mail</label>
<input
value={emailR}
onChange={(e) => setEmailR(e.target.value)}
id="signup-email"
type="email"
required
/>
</div>
<div className="input-block">
<label for="username">Username</label>
<input
value={usernameR}
onChange={(e) => setUsernameR(e.target.value)}
id="username"
type="text"
required
/>
</div>
<div className="input-block">
<label for="signup-password">Password</label>
<input
value={passwordR}
onChange={(e) => {
setPassWordR(e.target.value)
}}
id="signup-password"
type={togR ? 'password' : 'text'}
required
/>
<span class="field-icon toggle-password">
<img
style={{ marginRight: '4px' }}
src={Eye}
onClick={(e) => {
e.preventDefault()
setTogR(!togR)
}}
className="eye"
></img>
</span>
</div>
</fieldset>
{msgR.length > 0 ? (
<Popup open={true}>
<div
style={{
color: 'white',
backgroundColor: 'black',
padding: '4px',
}}
>
{msgR}
</div>
</Popup>
) : (
<></>
)}
<button
onClick={Register}
type="submit"
disable={loaderR}
className="btn-signup"
>
{' '}
{loaderR ? 'Processing..' : 'Register'}
</button>
{loaderR ? (
<Spinner
className="loading-animation"
animation="border"
/>
) : (
<></>
)}
</>
) : (
<>
<h7 className="goodmsgs">{`We have sent you a verification link on ${emailR} (Please check your spam folder too!).`}</h7>
<br></br>
<h7 className="goodmsgs">{`Please verify your email and move to login. \n If you haven't recieved any mail regarding this, click here to send again.`}</h7>
<button className="goodmsgs" onClick={Sendagain}>
Send again
</button>
</>
)}
</form>
</div>
</div>
</section>
</div>
<FooterSmall />
</>
)}
</div>
</>
)
}
Example #11
| Source File: LoginModal.js From airdnd-frontend with MIT License | 4 votes |
|
LoginModal = ({
modalVisible,
form,
invalid,
refObj,
loading,
result,
isPwdShown,
onFormChange,
cleanupModal,
openSignupMenuModal,
closeModal,
onToggleShowPwd,
handleSubmit,
}) => {
const { email, pwd } = form;
const { emailRef, pwdRef } = refObj;
return (
<StLoginModal
modalState={modalVisible}
header
width="570px"
height="545px"
title="로그인"
setModalState={closeModal}
cleanup={cleanupModal}
>
<StLoginModalWrapper>
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_LOGIN_API_KEY}
cookiePolicy={'single_host_origin'}
onSuccess={res => console.log(res)}
onFailure={res => console.log(res)}
render={() => (
<StFacebookButton>
<FaFacebookF />
<StButtonText>페이스북 계정으로 로그인</StButtonText>
</StFacebookButton>
)}
></GoogleLogin>
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_LOGIN_API_KEY}
cookiePolicy={'single_host_origin'}
onSuccess={res => console.log(res)}
onFailure={res => console.log(res)}
render={() => (
<StGoogleButton>
<FcGoogle />
<StButtonText>구글 계정으로 로그인</StButtonText>
</StGoogleButton>
)}
></GoogleLogin>
<StDividerLine />
<StDividerText>또는</StDividerText>
<StLoginForm onSubmit={handleSubmit}>
{result && result !== 'Success' && (
<StResultWrapper result={result}>
<StErrorWrapper>
<AiOutlineWarning></AiOutlineWarning>
</StErrorWrapper>
<StResultTextWrapper>
{result === 'NoId' && (
<StResultText>
이 이메일 주소와 연결된 계정이 없습니다. 다른 이메일 주소를
사용해 보세요.
</StResultText>
)}
{result === 'WrongPwd' && (
<StResultText>비밀번호가 틀립니다.</StResultText>
)}
</StResultTextWrapper>
</StResultWrapper>
)}
<StInputWrapper>
<StInput
value={email}
onChange={({ target: { value } }) => onFormChange('email', value)}
focusBorderColor
placeholder="이메일 주소"
ref={emailRef}
isInvalid={invalid.email}
></StInput>
<RiMailLine />
{email.length === 0 && invalid.email && (
<StValidationText isInvalid={invalid.email}>
이메일을 입력하세요.
</StValidationText>
)}
{email.length > 0 && invalid.email && (
<StValidationText isInvalid={invalid.email}>
이메일 형식이 맞지 않습니다.
</StValidationText>
)}
</StInputWrapper>
<StInputWrapper name="password">
<StInput
type={isPwdShown ? 'text' : 'password'}
value={pwd}
onChange={({ target: { value } }) => onFormChange('pwd', value)}
focusBorderColor
placeholder="비밀번호"
ref={pwdRef}
isInvalid={invalid.pwd}
></StInput>
<RiLock2Line />
{pwd.length === 0 && invalid.pwd && (
<StValidationText isInvalid={invalid.pwd}>
비밀번호를 입력하세요.
</StValidationText>
)}
{pwd.length > 0 && invalid.pwd && (
<StValidationText isInvalid={invalid.pwd}>
비밀번호는 최소 8글자 이상이어야 합니다. 다시 시도해 주세요.
</StValidationText>
)}
</StInputWrapper>
<StShowPwdButtonWrapper>
<StShowPwdButton onClick={onToggleShowPwd}>
{isPwdShown ? '비밀번호 숨기기' : '비밀번호 보이기'}
</StShowPwdButton>
</StShowPwdButtonWrapper>
<StSubmitButton border="none" type="submit" disabled={loading}>
{loading ? <StSubmitLoader /> : '로그인하기'}
</StSubmitButton>
</StLoginForm>
<StDividerLine />
<StSignupButtonWrapper>
<StSignupText>에어비앤비 계정이 없으세요? </StSignupText>
<StSignupButton btnType="color" onClick={openSignupMenuModal}>
회원가입하기
</StSignupButton>
</StSignupButtonWrapper>
</StLoginModalWrapper>
</StLoginModal>
);
}
Example #12
| Source File: index.js From community-front-end with MIT License | 4 votes |
|
SignupForm = () => {
const [verified, setVerified] = useState(false);
const [showmessage, setmessage] = useState(" ");
const responseSuccessGoogle = (response) => {
axios({
method: 'POST',
url: 'http://localhost:8080/api/googlelogin',
data: {tokenId: response.tokenId}
})
.then(response => {
setVerified(response.data.status)
})
}
console.log(verified)
const { setAuthState } = useContext(AuthContext)
const { setIsComponentVisible } = useContext(ModalContext)
const [loading, setLoading] = useState(false)
return (
<Formik
initialValues={{ username: '', password: '', passwordConfirmation: '' }}
onSubmit={async (values, { setStatus, resetForm }) => {
setLoading(true)
try {
const { data } = await publicFetch.post('signup', values)
const { token, expiresAt, userInfo } = data
setAuthState({ token, expiresAt, userInfo })
resetForm({})
setIsComponentVisible(false)
} catch (error) {
setStatus(error.response.data.message)
}
setLoading(false)
}}
validationSchema={Yup.object({
username: Yup.string()
.required('Required')
.max(16, 'Must be at most 16 characters long')
.matches(/^[a-zA-Z0-9_-]+$/, 'Contains invalid characters'),
password: Yup.string()
.required('Required')
.min(6, 'Must be at least 6 characters long')
.max(50, 'Must be at most 50 characters long'),
passwordConfirmation: Yup.string().oneOf(
[Yup.ref('password'), null],
'Passwords must match'
)
})}
>
{({
values,
errors,
touched,
status,
handleChange,
handleBlur,
handleSubmit,
isSubmitting
}) => (
<form onSubmit={handleSubmit} className={styles.form}>
<div style={{textAlign: "center"}}>
<GoogleLogin
clientId={googleOAuth}
buttonText={verified ? (<div style={{color:"#5CDB95",fontWeight:"bold",fontFamily:"Comic Sans"}}>
<h3>College Email verified!</h3></div>) :
(<div style={{color:"#F64C72",fontWeight:"bold",fontFamily:"Comic Sans"}}>
<h3>Verify your college email Id</h3></div>)}
disabled={verified}
onSuccess={responseSuccessGoogle}
cookiePolicy={'single_host_origin'}
className={styles.submitButton}
/>
</div>
<FormInput
label="Username"
type="text"
name="username"
autoComplete="off"
value={values.username}
onChange={handleChange}
onBlur={handleBlur}
hasError={touched.username && errors.username}
errorMessage={errors.username && errors.username}
/>
<FormInput
label="Password"
type="password"
name="password"
autoComplete="off"
value={values.password}
onChange={handleChange}
onBlur={handleBlur}
hasError={touched.password && errors.password}
errorMessage={errors.password && errors.password}
/>
<FormInput
label="Password Confirm"
type="password"
name="passwordConfirmation"
autoComplete="off"
value={values.passwordConfirmation}
onChange={handleChange}
onBlur={handleBlur}
hasError={
touched.passwordConfirmation && errors.passwordConfirmation
}
errorMessage={
errors.passwordConfirmation && errors.passwordConfirmation
}
/>
<p className={styles.status}>{status}</p>
<Button
full
primary
className={styles.submitButton}
disabled={(!verified) && isSubmitting}
isLoading={loading}
type="submit"
>
Sign up
</Button>
</form>
)}
</Formik>
)
}
Example #13
| Source File: login.js From ibutsu-server with MIT License | 4 votes |
|
render() {
const socialMediaLoginContent = (
<React.Fragment>
{this.state.externalLogins.keycloak &&
<LoginMainFooterLinksItem onClick={this.onKeycloakLogin} href="#" linkComponentProps={{ 'aria-label': `Login with ${this.getKeycloakName()}`, 'title': `Login with ${this.getKeycloakName()}` }}>
{this.getKeycloakIcon()}
</LoginMainFooterLinksItem>
}
{this.state.externalLogins.google &&
<GoogleLogin
clientId={this.state.externalLogins.google.client_id}
scope={this.state.externalLogins.google.scope}
redirectUri={this.state.externalLogins.google.redirect_uri}
onSuccess={this.onGoogleLogin}
onFailure={(response) => console.error(response)}
render={renderProps => (
<LoginMainFooterLinksItem onClick={renderProps.onClick} href="#" linkComponentProps={{ 'aria-label': 'Login with Google', 'title': 'Login with Google' }}>
<GoogleIcon size="lg" />
</LoginMainFooterLinksItem>
)}
/>
}
{this.state.externalLogins.github &&
<OAuth2Login
isCrossOrigin={true}
authorizationUrl={this.state.externalLogins.github.authorization_url}
responseType="code"
clientId={this.state.externalLogins.github.client_id}
redirectUri={this.state.externalLogins.github.redirect_uri}
scope={this.state.externalLogins.github.scope}
onSuccess={this.onOAuth2Success}
onFailure={(response) => console.error(response)}
render={renderProps => (
<LoginMainFooterLinksItem onClick={renderProps.onClick} href="#" linkComponentProps={{ 'aria-label': 'Login with GitHub', 'title': 'Login with GitHub' }}>
<GithubIcon size="lg" />
</LoginMainFooterLinksItem>
)}
/>
}
{this.state.externalLogins.facebook &&
<FacebookLogin
appId={this.state.externalLogins.facebook.app_id}
onSuccess={this.onFacebookLogin}
onFail={(response) => console.error(response)}
// useRedirect={true}
dialogParams={{redirect_uri: this.state.externalLogins.facebook.redirect_uri, response_type: 'code'}}
render={(renderProps) => (
<LoginMainFooterLinksItem onClick={renderProps.onClick} href="#" linkComponentProps={{ 'aria-label': 'Login with Facebook' }}>
<FacebookIcon size="lg" />
</LoginMainFooterLinksItem>
)}
/>
}
{this.state.externalLogins.gitlab &&
<OAuth2Login
isCrossOrigin={true}
authorizationUrl={this.state.externalLogins.gitlab.authorization_url}
responseType="code"
clientId={this.state.externalLogins.gitlab.client_id}
redirectUri={this.state.externalLogins.gitlab.redirect_uri}
scope={this.state.externalLogins.gitlab.scope}
onSuccess={this.onOAuth2Success}
onFailure={(response) => console.error(response)}
render={renderProps => (
<LoginMainFooterLinksItem onClick={renderProps.onClick} href="#" linkComponentProps={{ 'aria-label': 'Login with GitLab', 'title': 'Login with GitLab' }}>
<GitlabIcon size="lg" />
</LoginMainFooterLinksItem>
)}
/>
}
</React.Fragment>
);
const signUpForAccountMessage = (
<LoginMainFooterBandItem>
Need an account? <NavLink to="/sign-up">Sign up.</NavLink>
</LoginMainFooterBandItem>
);
const forgotCredentials = (
<LoginMainFooterBandItem>
<NavLink to="/forgot-password">Forgot username or password?</NavLink>
</LoginMainFooterBandItem>
);
const loginWithUserDescription = 'Please use your e-mail address and password, or login via one of the icons below the Log In button.';
const loginWithoutUserDescription = 'Log in via one of the icons below.';
const backgroundImages = {
lg: '/images/pfbg_1200.jpg',
sm: '/images/pfbg_768.jpg',
sm2x: '/images/[email protected]',
xs: '/images/pfbg_576.jpg',
xs2x: '/images/[email protected]'
};
return (
<LoginPage
footerListVariants="inline"
brandImgSrc="/images/ibutsu-wordart-164.png"
brandImgAlt="Ibutsu"
backgroundImgSrc={backgroundImages}
backgroundImgAlt="Background image"
textContent="Ibutsu is an open source test result aggregation tool. Collect and display your test results, view artifacts, and monitor tests."
loginTitle="Log in to your account"
loginSubtitle={this.state.loginSupport.user ? loginWithUserDescription : loginWithoutUserDescription}
socialMediaLoginContent={socialMediaLoginContent}
signUpForAccountMessage={this.state.loginSupport.user ? signUpForAccountMessage : ''}
forgotCredentials={this.state.loginSupport.user ? forgotCredentials : ''}
>
{this.state.loginSupport.user &&
<Form>
<FormAlert>
{this.state.alert && this.state.alert.message &&
<Alert
variant={this.state.alert.status || 'info'}
title={this.state.alert.message}
aria-live="polite"
isInline
/>
}
</FormAlert>
<FormGroup
label="Email address"
isRequired
fieldId="email"
validated={this.state.isValidEmail ? 'default' : 'error'}
>
<TextInput
isRequired
type="email"
id="email"
name="email"
validated={this.state.isValidEmail ? 'default' : 'error'}
aria-describedby="email-helper"
value={this.state.emailValue}
onChange={this.onEmailChange}
onKeyPress={this.onEnterKeyPress}
/>
</FormGroup>
<FormGroup
label="Password"
isRequired
fieldId="password"
validated={this.state.isValidPassword ? 'default' : 'error'}
>
<InputGroup>
{!this.state.isPasswordVisible &&
<TextInput
isRequired
type="password"
id="password"
name="password"
validated={this.state.isValidPassword ? 'default' : 'error'}
aria-describedby="password-helper"
value={this.state.passwordValue}
onChange={this.onPasswordChange}
onKeyPress={this.onEnterKeyPress} />
}
{this.state.isPasswordVisible &&
<TextInput
isRequired
type="text"
id="password"
name="password"
validated={this.state.isValidPassword ? 'default' : 'error'}
aria-describedby="password-helper"
value={this.state.passwordValue}
onChange={this.onPasswordChange}
onKeyPress={this.onEnterKeyPress} />
}
<Button variant="control" aria-label="Show password" onClick={this.onPasswordVisibleClick}>
{!this.state.isPasswordVisible && <EyeIcon/>}
{this.state.isPasswordVisible && <EyeSlashIcon/>}
</Button>
</InputGroup>
</FormGroup>
<ActionGroup>
<Button
variant="primary"
isBlock
isLoading={this.state.isLoggingIn}
isDisabled={this.state.isLoggingIn}
onClick={this.onLoginButtonClick}
>
{this.state.isLoggingIn ? 'Logging in...' : 'Log In'}
</Button>
</ActionGroup>
</Form>
}
</LoginPage>
);
}
Example #14
| Source File: NavBar.js From talk4free with MIT License | 4 votes |
|
render() {
const checkLogin = () => {
if (this.state.isSignedIn) {
return (
<React.Fragment>
<Dropdown>
<Dropdown.Toggle
className="ml-5"
variant="primary"
id="dropdown-basic"
>
{this.state.userName}
{this.state.isSignedIn ? (
<Image
src={this.state.imageUrl}
style={{ width: "35px" }}
roundedCircle
/>
) : (
""
)}
</Dropdown.Toggle>
<Dropdown.Menu className="ml-5">
<Dropdown.Item>
{" "}
<GoogleLogout
clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
render={renderProps => (
<Button
variant="secondary"
onClick={renderProps.onClick}
disabled={renderProps.disabled}
>
{" "}
Logout
</Button>
)}
buttonText="Logout"
onLogoutSuccess={this.logout}
></GoogleLogout>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</React.Fragment>
);
} else {
return (
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
render={renderProps => (
<React.Fragment>
<Button
variant="primary"
className="ml-5"
id="signInBtn"
onClick={renderProps.onClick}
disabled={renderProps.disabled}
>
{this.state.isSignedIn ? this.state.userName : "Sign In"}
<FaSignInAlt />
</Button>
</React.Fragment>
)}
buttonText="Login"
onSuccess={this.responseGoogle}
onFailure={this.responseGoogle}
isSignedIn={true}
cookiePolicy={"single_host_origin"}
/>
);
}
};
return (
<Navbar bg="dark" variant="dark" fixed="top">
<Container>
<Navbar.Brand href="#home">
<Image src={require("./logo5x5.png")} />
Talk4Free
</Navbar.Brand>
<Nav className="ml-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Rooms</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
</Nav>
{checkLogin()}
</Container>
</Navbar>
);
}
Example #15
| Source File: Login.js From google-forms with MIT License | 4 votes |
|
function Login(props){
const classes = useStyles();
let history = useHistory();
const [isLogined , setIsLogined] = React.useState(false);
const { from } = props.location.state || { from: { pathname: '/' } }
React.useEffect(()=>{
setIsLogined(authService.isAuthenticated())
}, [])
const loginGoogle = (response)=>{
console.log(response);
authService.loginWithGoogle(response)
.then(() => {
console.log(from.pathname);
if(from.pathname == "/login"){
history.push("/");
}else{
history.push(from.pathname);
}
},
error => {
const resMessage =
(error.response &&
error.response.data &&
error.response.data.message) ||
error.message ||
error.toString();
console.log(resMessage);
}
);
}
const loginAsGuest = ()=>{
authService.loginAsGuest()
history.push(from.pathname);
}
const handleLoginFailure = (response)=>{
console.log('Failed to log in');
}
const handleLogoutFailure = (response)=>{
console.log('Failed to log out');
}
const logout = (response)=>{
authService.logout();
setIsLogined(false);
}
return(
<div>
<CssBaseline />
<div style={{display: 'flex', flexGrow: 1, textAlign: 'start'}}>
<AppBar position="relative" style={{backgroundColor: 'teal'}}>
<Toolbar>
<ViewListIcon className={classes.icon} onClick={()=>{history.push('/')}} />
<Typography variant="h6" color="inherit" noWrap className={classes.title}>
Velocity Forms
</Typography>
</Toolbar>
</AppBar>
</div>
<br></br>
<main>
<Typography component="h1" variant="h5">
Login
</Typography>
<br></br>
<br></br>
<div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center'}}>
{isLogined ?
"":
<GoogleLogin
clientId={CLIENT_ID}
render={renderProps => (
<GoogleButton onClick={renderProps.onClick} disabled={renderProps.disabled} style={{textAlign: 'center', alignSelf: 'center'}} />
)}
buttonText='Login'
onSuccess={loginGoogle}
onFailure={handleLoginFailure}
cookiePolicy={ 'single_host_origin' }
responseType='code,token'
/>
}
<br></br>
<br></br>
<div>
{ isLogined ? (<div>
<p>Already logged in. Want to logout?</p>
<button onClick={logout}>Logout </button>
</div>) : (
<Button
onClick={loginAsGuest}
variant="contained"
style={{textTransform: "none"}}
startIcon={<Avatar src={"https://static.thenounproject.com/png/3244607-200.png"}/> } >
Login as Guest(Anonymous)
</Button>
)
}
</div>
</div>
</main>
</div>
)
}
