cerc-io/keycloak-reg-ui
16
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Creating a Sign in Form in the Login Page

Browse Source
This commit is contained in:
ilyaszm 2019-07-23 23:31:27 +01:00
parent c87883809c
commit ec69333eb3
5 changed files with 208 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
src/App.css
View File

@ -1,3 +1,6 @@
/*** General ***/
* {
box-sizing: border-box;
margin: 0;
@ -9,7 +12,117 @@ body {
margin: 0 auto
}
a {
text-decoration: none !important;
color: inherit
}
/*** Landing Page ***/
.main-title,
.main-para {
color: #f1f1f1
}
.main-title {
padding-top: 10rem;
font-size: 5rem;
font-family: 'Fascinate', cursive;
text-transform: uppercase
}
.main-para {
font-size: 2.5rem;
text-Transform: capitalize
}
#log_btn,
#reg_btn {
margin-top: 5rem;
margin-right: 1rem;
padding: .6rem;
width: 10rem;
background: #222;
border: none;
color: #fff;
font-size: 1.2rem;
transition: all .5s;
cursor: pointer;
text-transform: capitalize
}
#reg_btn span {
display: inline-block;
position: relative;
transition: 0.5s;
}
#reg_btn span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
#reg_btn:hover span {
padding-right: 25px;
}
#reg_btn:hover span:after {
opacity: 1;
right: 0;
}
/*** Login Page ***/
.login-page {
margin: 5rem auto
}
h2 {
font-weight: 300
}
form {
display: inline-block;
background: #f3f3f3;
border: 1px solid #ddd;
border-radius: 2px;
padding: 2rem;
margin: 2rem 0 1rem 0
}
form label {
float: left;
font-size: .9rem
}
.right-label {
float: right;
cursor: pointer
}
input {
width: 15rem;
padding: .3rem;
border-radius: 5px;
outline: none;
border: none
}
#sub_btn {
display: block;
width: 100%;
padding: .3rem;
border: none;
background: #222;
color: #fff;
border-radius: 3px;
}
#sub_btn:hover {
background: #333;
transition: all .5s
}
footer p {
margin: 0;
font-size: .9rem
}
/*** Register Page ***/

54
src/assets/css/landing-page.css
View File

@ -1,54 +0,0 @@
h1, p {
color: #f1f1f1
}
h1 {
padding-top: 10rem;
font-size: 5rem;
font-family: 'Fascinate', cursive;
text-transform: uppercase
}
p {
font-size: 2.5rem;
text-Transform: capitalize
}
#log_btn,
#reg_btn {
margin-top: 5rem;
margin-right: 1rem;
padding: .6rem;
width: 10rem;
background: #222;
border: none;
color: #fff;
font-size: 1.2rem;
transition: all .5s;
cursor: pointer;
text-transform: capitalize
}
#reg_btn span {
display: inline-block;
position: relative;
transition: 0.5s;
}
#reg_btn span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
#reg_btn:hover span {
padding-right: 25px;
}
#reg_btn:hover span:after {
opacity: 1;
right: 0;
}

6
src/components/pages/LandingPage.js
View File

@ -1,14 +1,14 @@
import React from 'react'
import { Link } from 'react-router-dom'
import '../../assets/css/landing-page.css'
import '../../App.css'
import BackgroundImage from '../../assets/images/bg.png'
export default function LandingPage() {
return (
<header style={ HeaderStyle }>
<h1 className="text-center">login / register page</h1>
<p className="text-center">join us now and don't waste time</p>
<h1 className="main-title text-center">login / register page</h1>
<p className="main-para text-center">join us now and don't waste time</p>
<div className="buttons text-center">
<Link to="/login">
<button href="https://google.com" id="log_btn">

30
src/components/pages/LoginPage.js
View File

@ -1,9 +1,35 @@
import React from 'react'
import { Link } from 'react-router-dom'
import '../../App.css'
const handleClick = () => {
alert('Login Successfully')
}
export default function SignInPage() {
return (
<div>
<h1>Login Page</h1>
<div className="text-center login-page">
<h2>Sign in to us</h2>
<form action="/home">
<p>
<label>Username or email address</label><br/>
<input type="text" name="first_name"/>
</p>
<p>
<label>Password</label>
<Link to="/forget-password"><label className="right-label">Forget password?</label></Link>
<br/>
<input type="password" name="password"/>
</p>
<p>
<button id="sub_btn" onClick={handleClick} type="submit">Login</button>
</p>
</form>
<footer>
<p>First time? <Link to="/register">Create an account</Link>.</p>
<p><Link to="/">Back to Homepage</Link>.</p>
</footer>
</div>
)
}

61
src/components/pages/RegisterPage.js
View File

@ -1,9 +1,68 @@
import React from 'react'
import '../../App.css'
export default function SignUpPage() {
return (
<div>
<h1>Register Page</h1>
<h1>join us</h1>
<form action="/signup" method="post">
<p>
<label>Title</label><br/>
<label>
<input type="radio" name="title" value="mr"/>
Mr
</label>
<label>
<input type="radio" name="title" value="mrs"/>
Mrs
</label>
<label>
<input type="radio" name="title" value="miss"/>
Miss
</label>
</p>
<p>
<label>First name</label><br/>
<input type="text" name="first_name"/>
</p>
<p>
<label>Last name</label><br/>
<input type="text" name="last_name"/>
</p>
<p>
<label>Email</label><br/>
<input type="email" name="email" required/>
</p>
<p>
<label>Phone number</label><br/>
<input type="tel" name="phone"/>
</p>
<p>
<label>Password</label><br/>
<input type="password" name="password"/>
</p>
<p>
<label>Country</label><br/>
<select>
<option>China</option>
<option>India</option>
<option>United States</option>
<option>Indonesia</option>
<option>Brazil</option>
</select>
</p>
<p>
<label>
<input type="checkbox" value="terms"/>
I agree to the <a href="/terms">terms and conditions</a>
</label>
</p>
<p>
<button>Sign up</button>
<button type="reset">Reset form</button>
</p>
</form>
</div>
)
}