extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2024-11-21 23:53:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

dodgy attempt at getting a ui together (#669)

Browse Source
This commit is contained in:
Michael Quigley 2024-07-31 12:41:32 -04:00
parent ed09ab2c25
commit d71143148c
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/src/index.css
View File

@ -119,8 +119,13 @@ code, pre {
margin-top: 25px; margin-top: 25px;
} }
#zrok-tou { .zrok-tou {
margin-top: 15px; margin: 15px;
color: white;
}
.zrok-type {
font-family: 'Russo One', sans-serif;
} }
#controls-row { #controls-row {
@ -130,4 +135,4 @@ code, pre {
#navbar { #navbar {
background: linear-gradient(180deg, #0E0238 0%, #231069 100%); background: linear-gradient(180deg, #0E0238 0%, #231069 100%);
} }

31
ui/src/register/SetPasswordForm.js
View File

@ -4,13 +4,14 @@ import * as metadata from "../api/metadata"
import Success from "./Success"; import Success from "./Success";
import {Button, Container, Form, Row} from "react-bootstrap"; import {Button, Container, Form, Row} from "react-bootstrap";
import PasswordForm from "../components/password"; import PasswordForm from "../components/password";
import {Checkbox, FormControl, FormControlLabel, FormGroup, InputLabel} from "@mui/material";
const SetPasswordForm = (props) => { const SetPasswordForm = (props) => {
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [message, setMessage] = useState(); const [message, setMessage] = useState();
const [authToken, setAuthToken] = useState(''); const [authToken, setAuthToken] = useState('');
const [complete, setComplete] = useState(false); const [complete, setComplete] = useState(false);
const [tou, setTou] = useState(); const [tou, setTou] = useState(<span/>);
const [passwordLength, setPasswordLength] = useState(10); const [passwordLength, setPasswordLength] = useState(10);
const [passwordRequireCapital, setPasswordRequireCapital] = useState(true); const [passwordRequireCapital, setPasswordRequireCapital] = useState(true);
const [passwordRequireNumeric, setPasswordRequireNumeric] = useState(true); const [passwordRequireNumeric, setPasswordRequireNumeric] = useState(true);
@ -23,7 +24,7 @@ const SetPasswordForm = (props) => {
metadata.configuration().then(resp => { metadata.configuration().then(resp => {
if(!resp.error) { if(!resp.error) {
if (resp.data.touLink !== undefined && resp.data.touLink.trim() !== "") { if (resp.data.touLink !== undefined && resp.data.touLink.trim() !== "") {
setTou(resp.data.touLink) setTou(<span dangerouslySetInnerHTML={{__html: resp.data.touLink}}/>)
} }
setPasswordLength(resp.data.passwordRequirements.length) setPasswordLength(resp.data.passwordRequirements.length)
setPasswordRequireCapital(resp.data.passwordRequirements.requireCapital) setPasswordRequireCapital(resp.data.passwordRequirements.requireCapital)
@ -73,14 +74,22 @@ const SetPasswordForm = (props) => {
<Container className={"fullscreen-form"}> <Container className={"fullscreen-form"}>
<Row> <Row>
<Form onSubmit={handleSubmit}> <Form onSubmit={handleSubmit}>
<PasswordForm <div>
setMessage={setMessage} <PasswordForm
passwordLength={passwordLength} setMessage={setMessage}
passwordRequireCapital={passwordRequireCapital} passwordLength={passwordLength}
passwordRequireNumeric={passwordRequireNumeric} passwordRequireCapital={passwordRequireCapital}
passwordRequireSpecial={passwordRequireSpecial} passwordRequireNumeric={passwordRequireNumeric}
passwordValidSpecialCharacters={passwordValidSpecialCharacters} passwordRequireSpecial={passwordRequireSpecial}
setParentPassword={setPassword}/> passwordValidSpecialCharacters={passwordValidSpecialCharacters}
setParentPassword={setPassword}/>
</div>
<div class={"zrok-tou"}>
<p>{tou}</p>
</div>
<div class={"zrok-tou"}>
<FormControlLabel control={<Checkbox iconStyle={{fill: 'white'}} required/>} label={<span class={"zrok-type"}>I have read and agree to the above</span>}/>
</div>
<Button variant={"light"} type={"submit"}>Register Account</Button> <Button variant={"light"} type={"submit"}>Register Account</Button>
</Form> </Form>
</Row> </Row>
@ -88,7 +97,7 @@ const SetPasswordForm = (props) => {
{message} {message}
</Row> </Row>
<Row> <Row>
<div id={"zrok-tou"} dangerouslySetInnerHTML={{__html: tou}}></div>
</Row> </Row>
</Container> </Container>
</Row> </Row>