mirror of
https://github.com/OneUptime/oneuptime
synced 2024-11-21 22:59:07 +00:00
style register page
This commit is contained in:
Caleb Okpara
parent
40d6085c12
commit
8e892fe2f6
@ -72,18 +72,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
height: fit-content;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: $bglight;
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 2px 10px lighten($bgDark, 85%);
|
||||
padding: 50px 70px;
|
||||
z-index: 40;
|
||||
|
||||
.grid_form_1 {
|
||||
@include responsive($xs) {
|
||||
width: 95%;
|
||||
padding: 25px;
|
||||
@ -106,13 +95,50 @@ form {
|
||||
@include responsive($xl) {
|
||||
width: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
.grid_form_2 {
|
||||
width: 45%;
|
||||
|
||||
@include responsive($xs) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include responsive($sm) {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
@include responsive($med) {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
@include responsive($lg) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@include responsive($xl) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
height: fit-content;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: $bglight;
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 2px 10px lighten($bgDark, 85%);
|
||||
padding: 50px 70px;
|
||||
z-index: 40;
|
||||
|
||||
h1 {
|
||||
color: lighten($bgDark, 20%);
|
||||
font-family: 'Helvetica Neue', sans-serif;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 30px;
|
||||
letter-spacing: -0.2px;
|
||||
line-height: 32px;
|
||||
}
|
||||
@ -123,53 +149,74 @@ form {
|
||||
color: lighten($bgDark, 40%);
|
||||
}
|
||||
|
||||
div {
|
||||
.grid_1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.grid_2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
flex: 0 0 48%;
|
||||
input {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 400;
|
||||
color: lighten($bgDark, 20%);
|
||||
margin-bottom: 5px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
|
||||
span:last-child {
|
||||
color: $lightBlue;
|
||||
cursor: pointer;
|
||||
transition: $transition;
|
||||
label {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 400;
|
||||
color: lighten($bgDark, 20%);
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:hover {
|
||||
color: darken($lightBlue, 50%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
span:last-child {
|
||||
color: $lightBlue;
|
||||
cursor: pointer;
|
||||
transition: $transition;
|
||||
|
||||
&:hover {
|
||||
color: darken($lightBlue, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 15px 20px;
|
||||
border: 1px solid $colorLightGrey;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
font-size: 1.3rem;
|
||||
color: darken($colorLightGrey, 50%);
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 15px 20px;
|
||||
border: 1px solid $colorLightGrey;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
font-size: 1.3rem;
|
||||
color: darken($colorLightGrey, 50%);
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid rgba(84, 84, 238, 0.72);
|
||||
}
|
||||
&:focus {
|
||||
outline: 2px solid rgba(84, 84, 238, 0.72);
|
||||
}
|
||||
|
||||
& + div {
|
||||
color: rgb(189, 11, 11);
|
||||
margin-top: 5px;
|
||||
font-size: 1.2rem;
|
||||
& + div {
|
||||
color: rgb(189, 11, 11);
|
||||
margin-top: 5px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import LoginPage from './Pages/Login';
|
||||
import SsoLoginPage from './Pages/SsoLogin';
|
||||
import ForgotPasswordPage from './Pages/ForgotPassword';
|
||||
import RegisterPage from './Pages/Register';
|
||||
|
||||
function App(): ReactElement {
|
||||
return (
|
||||
@ -22,7 +23,7 @@ function App(): ReactElement {
|
||||
path="/forgot-password"
|
||||
element={<ForgotPasswordPage />}
|
||||
/>
|
||||
<Route path="/register" element={<LoginPage />} />
|
||||
<Route path="/register" element={<RegisterPage />} />
|
||||
<Route path="/login/sso" element={<SsoLoginPage />} />
|
||||
<Route path="/verify-email" element={<LoginPage />} />
|
||||
</Routes>
|
||||
|
||||
@ -28,17 +28,18 @@ const ForgotPasswordPage: FunctionComponent = () => {
|
||||
submitButtonText={'Continue'}
|
||||
title={'Reset your password'}
|
||||
description={`Enter the email address associated with your account, and we'll send you a link to reset your password.`}
|
||||
>
|
||||
<div className="actions">
|
||||
<p>
|
||||
<Link to="/login">Return to sign in</Link>
|
||||
</p>
|
||||
<p>
|
||||
<span>Don't have an account? </span>
|
||||
<Link to="/register">Sign up</Link>
|
||||
</p>
|
||||
</div>
|
||||
</BasicModelForm>
|
||||
footer={
|
||||
<div className="actions">
|
||||
<p>
|
||||
<Link to="/login">Return to sign in</Link>
|
||||
</p>
|
||||
<p>
|
||||
<span>Don't have an account? </span>
|
||||
<Link to="/register">Sign up</Link>
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
|
||||
@ -42,19 +42,20 @@ const LoginPage: FunctionComponent = () => {
|
||||
}}
|
||||
submitButtonText={'Login'}
|
||||
title={'Sign in to your account'}
|
||||
>
|
||||
<div className="actions">
|
||||
<p>
|
||||
<Link to="/login/sso">
|
||||
Use single sign-on (SSO) instead
|
||||
</Link>
|
||||
</p>
|
||||
<p>
|
||||
<span>Don't have an account? </span>
|
||||
<Link to="/register">Sign up</Link>
|
||||
</p>
|
||||
</div>
|
||||
</BasicModelForm>
|
||||
footer={
|
||||
<div className="actions">
|
||||
<p>
|
||||
<Link to="/login/sso">
|
||||
Use single sign-on (SSO) instead
|
||||
</Link>
|
||||
</p>
|
||||
<p>
|
||||
<span>Don't have an account? </span>
|
||||
<Link to="/register">Sign up</Link>
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
|
||||
@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
|
||||
import BasicModelForm from 'CommonUI/src/Components/Forms/BasicModelForm';
|
||||
import User from 'Common/Models/User';
|
||||
import FormValues from 'CommonUI/src/Components/Forms/Types/FormValues';
|
||||
import Route from 'Common/Types/API/Route';
|
||||
import Footer from '../Footer';
|
||||
|
||||
const RegisterPage: FunctionComponent = () => {
|
||||
@ -14,43 +13,71 @@ const RegisterPage: FunctionComponent = () => {
|
||||
<BasicModelForm<User>
|
||||
model={user}
|
||||
id="login-form"
|
||||
showAsColumns={2}
|
||||
fields={[
|
||||
{
|
||||
field: {
|
||||
email: true,
|
||||
},
|
||||
placeholder: 'jeff@example.com',
|
||||
required: true,
|
||||
title: 'Email',
|
||||
},
|
||||
{
|
||||
field: {
|
||||
name: true,
|
||||
},
|
||||
placeholder: 'Jeff Smith',
|
||||
required: true,
|
||||
title: 'Full Name',
|
||||
},
|
||||
{
|
||||
field: {
|
||||
companyName: true,
|
||||
},
|
||||
placeholder: 'Company Name',
|
||||
required: true,
|
||||
title: 'Company Name',
|
||||
},
|
||||
{
|
||||
field: {
|
||||
companyPhoneNumber: true,
|
||||
},
|
||||
required: true,
|
||||
placeholder: 'Phone Number',
|
||||
title: 'Phone Number',
|
||||
},
|
||||
{
|
||||
field: {
|
||||
password: true,
|
||||
},
|
||||
placeholder: 'Password',
|
||||
title: 'Password',
|
||||
sideLink: {
|
||||
text: 'Forgot password?',
|
||||
url: new Route('/forgot-password'),
|
||||
openLinkInNewTab: true,
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
field: {
|
||||
password: true,
|
||||
},
|
||||
placeholder: 'Confirm Password',
|
||||
title: 'Confirm Password',
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
onSubmit={(values: FormValues<User>) => {
|
||||
console.log(values);
|
||||
}}
|
||||
submitButtonText={'Login'}
|
||||
title={'Sign in to your account'}
|
||||
>
|
||||
<div className="actions">
|
||||
<p>
|
||||
<Link to="/login/sso">
|
||||
Use single sign-on (SSO) instead
|
||||
</Link>
|
||||
</p>
|
||||
<p>
|
||||
<span>Don't have an account? </span>
|
||||
<Link to="/register">Sign up</Link>
|
||||
</p>
|
||||
</div>
|
||||
</BasicModelForm>
|
||||
submitButtonText={'Sign Up'}
|
||||
title={'Create your OneUptime account'}
|
||||
footer={
|
||||
<div className="actions">
|
||||
<p>
|
||||
<span>Have an account? </span>
|
||||
<Link to="/login">Login</Link>
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
|
||||
@ -27,17 +27,18 @@ const SsoLoginPage: FunctionComponent = () => {
|
||||
}}
|
||||
submitButtonText={'Continue with SSO'}
|
||||
title={'Sign in to your account'}
|
||||
>
|
||||
<div className="actions">
|
||||
<p>
|
||||
<Link to="/login">Use your password instead</Link>
|
||||
</p>
|
||||
<p>
|
||||
<span>Don't have an account? </span>
|
||||
<Link to="/register">Sign up</Link>
|
||||
</p>
|
||||
</div>
|
||||
</BasicModelForm>
|
||||
footer={
|
||||
<div className="actions">
|
||||
<p>
|
||||
<Link to="/login">Use your password instead</Link>
|
||||
</p>
|
||||
<p>
|
||||
<span>Don't have an account? </span>
|
||||
<Link to="/register">Sign up</Link>
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
|
||||
@ -108,15 +108,15 @@ export default class BaseModel extends BaseEntity {
|
||||
}
|
||||
|
||||
public getDisplayColumnPlaceholderAs(columnName: string): string | null {
|
||||
return getTableColumn(this, columnName).placeholder || null;
|
||||
return getTableColumn(this, columnName)?.placeholder || null;
|
||||
}
|
||||
|
||||
public getDisplayColumnTitleAs(columnName: string): string | null {
|
||||
return getTableColumn(this, columnName).title || null;
|
||||
return getTableColumn(this, columnName)?.title || null;
|
||||
}
|
||||
|
||||
public getDisplayColumnDescriptionAs(columnName: string): string | null {
|
||||
return getTableColumn(this, columnName).description || null;
|
||||
return getTableColumn(this, columnName)?.description || null;
|
||||
}
|
||||
|
||||
public getEncryptedColumns(): Columns {
|
||||
|
||||
@ -19,13 +19,16 @@ export interface ComponentProps<T extends Object> {
|
||||
submitButtonText?: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
children: ReactElement;
|
||||
showAsColumns?: number;
|
||||
footer: ReactElement;
|
||||
}
|
||||
|
||||
const BasicForm = <T extends Object>(
|
||||
props: ComponentProps<T>
|
||||
): ReactElement => {
|
||||
const getFormField = (field: DataField<T>, index: number): ReactElement => {
|
||||
console.log(field);
|
||||
|
||||
const fieldType = 'text';
|
||||
if (Object.keys(field.field).length === 0) {
|
||||
throw new BadDataException('Object cannot be without Field');
|
||||
@ -99,15 +102,23 @@ const BasicForm = <T extends Object>(
|
||||
>
|
||||
{({ isSubmitting, isValidating, isValid }) => {
|
||||
return (
|
||||
<Form autoComplete="off">
|
||||
<Form
|
||||
autoComplete="off"
|
||||
className={`grid_form_${props.showAsColumns}`}
|
||||
>
|
||||
<h1>{props.title}</h1>
|
||||
|
||||
<p className="description">{props.description}</p>
|
||||
|
||||
{props.fields &&
|
||||
props.fields.map((field: DataField<T>, i) => {
|
||||
return getFormField(field, i);
|
||||
})}
|
||||
<div className={`grid_${props.showAsColumns}`}>
|
||||
{props.fields &&
|
||||
props.fields.map(
|
||||
(field: DataField<T>, i) => {
|
||||
return getFormField(field, i);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
title={props.submitButtonText || 'Submit'}
|
||||
disabled={
|
||||
@ -116,7 +127,7 @@ const BasicForm = <T extends Object>(
|
||||
type={ButtonTypes.Submit}
|
||||
id={`${props.id}-submit-button`}
|
||||
/>
|
||||
{props.children}
|
||||
{props.footer}
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
|
||||
@ -14,7 +14,8 @@ export interface ComponentProps<T extends BaseModel> {
|
||||
submitButtonText?: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
children: ReactElement;
|
||||
showAsColumns?: number;
|
||||
footer: ReactElement;
|
||||
}
|
||||
|
||||
const BasicModelForm = <TBaseModel extends BaseModel>(
|
||||
@ -61,9 +62,9 @@ const BasicModelForm = <TBaseModel extends BaseModel>(
|
||||
submitButtonText={props.submitButtonText || 'Save'}
|
||||
title={props.title || ''}
|
||||
description={props.description || ''}
|
||||
>
|
||||
{props.children}
|
||||
</BasicForm>
|
||||
footer={props.footer}
|
||||
showAsColumns={props.showAsColumns || 1}
|
||||
></BasicForm>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user