Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WIP | Register as Issuer (without verification) | Aman Mulani #18

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

WIP | Register as Issuer (without verification) | Aman Mulani #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
12ebd70
WIP | Register as Issuer (without verification) | Aman Mulani
AmanMulani Oct 8, 2022
a077ee5
Added Logo
AmanMulani Oct 8, 2022
cb105c7
Source Map Generation disabled for build
AmanMulani Oct 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build": "GENERATE_SOURCEMAP=false react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Expand Down
21 changes: 21 additions & 0 deletions public/sunbird_logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
150 changes: 150 additions & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
body {
display: block;
background: #F7F8FC;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
Expand All @@ -11,3 +13,151 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}


.header-component {
background: #FFFFFF;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
padding: 10px;
position: sticky;
}

.logo {
padding: 0px 20px;
}

.register-issuer-body {
justify-content: center;
display: flex;
padding: 20px;
}

.register-issuer-container {
height: 70vh;
padding: 20px;
}

.registration-form-card {
width: 40vw;
background: #FFFFFF;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
border-radius: 4px;
height: 60vh;
padding: 20px;
}

.container-content {
padding: 5px;
}

.issuer-header {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #000000;
}

.input-button-row {
display: flex;
flex-grow: 1;
}

.text-input {
display: block;
box-sizing: border-box;
padding: 10px;
width: 100%;
background: #FFFFFF;
border: 1px solid #EFEFEF;
border-radius: 4px;
}

.text-input-inline {
display: inline;
flex-grow: 4;
}

.register-button-div {
display: flex;
justify-content: end;
}

.register-text-button {
background: transparent !important;
border-radius: 0px !important;
color: #1987B6 !important;
}

.register-text-button:hover {
box-shadow: none !important;
cursor: pointer;
}

.add-logo-text {
font-weight: 700;
font-size: 14px;
line-height: 32px;
color: #8D9091;
}

.register-button {
padding: 10px 20px;
color: white;
background: #1987B6;
border-radius: 20px;
border: none;
display: block;
display: flex;
justify-content: center;
align-items: center;
}

.register-button:hover {
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
cursor: pointer;
}

.logo-image-picker {
box-sizing: border-box;
width: 107px;
height: 105px;
left: 0px;
top: 52px;
background: #FFFFFF;
border: 1px solid #EFEFEF;
display: flex;
justify-content: center;
align-items: center;
}

.label-text {
font-weight: 700;
font-size: 12px;
}

.label-text-optional {
color: #8D9091;
font-weight: 400;
}

.form-subtitle {
font-weight: 700;
font-size: 16px;
line-height: 32px;
padding: 15px 5px;
}


.label-subtitle {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #8D9091;
}


.file_upload {
display: none;
}
15 changes: 8 additions & 7 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,15 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
//Disabled keycloak login iframe check in development environment because of cross site cookies being stored by iframe.
//Certain browsers will have strict policies enabled for cookies.
<ReactKeycloakProvider
initOptions={{onLoad: 'login-required', checkLoginIframe: false}}
authClient={keycloak}
onEvent={eventLogger}
onTokens={tokenLogger}
>
// <ReactKeycloakProvider
// initOptions={{onLoad: 'login-required', checkLoginIframe: false}}
// authClient={keycloak}
// onEvent={eventLogger}
// onTokens={tokenLogger}

// >
<AppRouter/>
</ReactKeycloakProvider>
/* </ReactKeycloakProvider> */
)
;

Expand Down
57 changes: 57 additions & 0 deletions src/pages/RegisterIssuerPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import '../index.css';

export const RegisterIssuerPage = () => {
return (<>
<div className='header-component'>
<img className = "logo" src="sunbird_logo.svg" alt="mobile logo"/>
</div>
<div className='register-issuer-body'>
<div className='register-issuer-container'>
<div className='container-content'>
<h3>Register as Issuer</h3>
</div>

<div className='container-content'>
<div className='registration-form-card'>
<div className='form-subtitle'>Basic Details</div>

<div className='container-content'>
<label id = "fileUpload" className='logo-image-picker add-logo-text'>
Add Logo
</label>
<input id = "fileUpload" type="file" className="file_upload" />
</div>

<div className='container-content'>
<label id='name' className='label-text'>Issuer Name</label>
<input id='name' className = "text-input" placeholder="Enter Your Organization's Name" aria-label='Issuer Name'>
</input>
</div>

<div className='container-content'>
<label id='websiteURL' className='label-text'>Website URL</label>
<input id = "websiteURL" className = "text-input" placeholder="Enter Your Organization's Website URL" >
</input>
</div>

<div className='form-subtitle'>Verify as Issuer</div>

<div className='container-content'>
<label id='GSTIN' className='label-text'>GSTIN <span className='label-text label-text-optional'>(optional)</span></label>
<div className='input-button-row'>
<input id="GSTIN" className = "text-input text-input-inline" placeholder="Enter Your Organization's GSTIN" />
<button className='register-button register-text-button'>Verify</button>
</div>
<div className='label-subtitle'>Enter GSTIN number to verify. You can do the verification later.</div>
</div>
<div className='container-content register-button-div'>
<button className='register-button'>
Register
</button>
</div>
</div>
</div>
</div>
</div>
</>)
}
11 changes: 6 additions & 5 deletions src/routes/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,20 @@ import * as React from 'react'
import {createBrowserRouter, RouterProvider,} from "react-router-dom";
import {useKeycloak} from '@react-keycloak/web'
import {Home} from "../pages/Home";
import { RegisterIssuerPage } from '../pages/RegisterIssuerPage';

const router = createBrowserRouter([
{
path: "/",
element: <Home/>,
element: <RegisterIssuerPage/>,
},
]);
export const AppRouter = () => {
const {initialized} = useKeycloak()
// const {initialized} = useKeycloak()

if (!initialized) {
return <div>Loading...</div>
}
// if (!initialized) {
// return <div>Loading...</div>
// }

return (
<RouterProvider router={router}/>
Expand Down