Andal.LND/frontend-app-account
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'hack/log' of github.com:edx/frontend-app-account into hack/log

Browse Source
This commit is contained in:
julianajlk
2020-02-12 21:54:24 -05:00
parent 68428f7f98 7883ba5c77
commit 563bbc524a
2 changed files with 67 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/registration/LoginPage.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { Input } from '@edx/paragon';
import { Button, Input } from '@edx/paragon';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFacebookF, faGoogle, faMicrosoft } from '@fortawesome/free-brands-svg-icons';
@@ -23,45 +23,48 @@ export default class LoginPage extends React.Component {
render() {
return (
<div className="d-flex align-items-center flex-column">
<div className="d-flex flex-row" style={{ width: '300px' }}>
<p>First time here?</p>
<a className="ml-2" href="/registration">Create an account!</a>
</div>
<form>
<div className="form-group" style={{ width: '400px' }}>
<h2>Sign In</h2>
<div className="d-flex flex-column align-items-start">
<label htmlFor="loginUsername" className="h6 mr-1">Username</label>
<Input
name="Username"
id="loginUsername"
type="email"
placeholder="username@domain.com"
value={this.state.username}
onChange={this.handleUsernameChange}
/>
</div>
<p className="mb-4">The email address you used to register with edX.</p>
<div className="d-flex flex-column align-items-start">
<label htmlFor="loginUsername" className="h6 mr-1">Password</label>
<Input
name="Password"
id="loginPassword"
type="Password"
value={this.state.password}
onChange={this.handlePasswordChange}
/>
</div>
<div className="d-flex justify-content-center">
<div className="d-flex flex-column" style={{ width: '400px' }}>
<div className="d-flex flex-row">
<p>First time here?</p>
<a className="ml-2" href="/registration">Create an account!</a>
</div>
<form className="m-0">
<div className="form-group">
<h2>Sign In</h2>
<div className="d-flex flex-column align-items-start">
<label htmlFor="loginUsername" className="h6 mr-1">Username</label>
<Input
name="Username"
id="loginUsername"
type="email"
placeholder="username@domain.com"
value={this.state.username}
onChange={this.handleUsernameChange}
/>
</div>
<p className="mb-4">The email address you used to register with edX.</p>
<div className="d-flex flex-column align-items-start">
<label htmlFor="loginUsername" className="h6 mr-1">Password</label>
<Input
name="Password"
id="loginPassword"
type="Password"
value={this.state.password}
onChange={this.handlePasswordChange}
/>
</div>
</div>
<Button className="btn-primary">Sign in</Button>
</form>
<div className="section-heading-line mb-4">
<h3>or sign in with</h3>
</div>
<div className="row text-center d-block mb-4">
<button className="btn-social facebook"><FontAwesomeIcon className="mr-2" icon={faFacebookF} />Facebook</button>
<button className="btn-social google"><FontAwesomeIcon className="mr-2" icon={faGoogle} />Google</button>
<button className="btn-social microsoft"><FontAwesomeIcon className="mr-2" icon={faMicrosoft} />Microsoft</button>
</div>
</form>
<div>
<h3>or sign in with</h3>
</div>
<div className="row text-center d-block mb-4">
<button className="btn-social facebook"><FontAwesomeIcon className="mr-2" icon={faFacebookF} />Facebook</button>
<button className="btn-social google"><FontAwesomeIcon className="mr-2" icon={faGoogle} />Google</button>
<button className="btn-social microsoft"><FontAwesomeIcon className="mr-2" icon={faMicrosoft} />Microsoft</button>
</div>
</div>
);

25
src/registration/_style.scss
View File

@@ -37,3 +37,28 @@
display: inherit;
margin: 0 auto;
}
.section-heading-line{
position: relative;
text-align: center;
&:before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 20%;
background-color: gray;
height: 1px;
}
&:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 20%;
background-color: gray;
height: 1px;
}
}