Skip to content
This repository has been archived by the owner on Aug 23, 2023. It is now read-only.

Commit

Permalink
fix typography and creds generator
Browse files Browse the repository at this point in the history
  • Loading branch information
lucadruda committed Jul 14, 2020
1 parent ac5b03b commit 0a64b16
Show file tree
Hide file tree
Showing 10 changed files with 98 additions and 52 deletions.
63 changes: 40 additions & 23 deletions creds-generator/client/src/credentials.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,15 @@ type CredentialsObject = {


function Credentials() {
const [formState, setFormState] = React.useState({})
const [formState, setFormState] = React.useState({
'device-id': '',
'scope-id': '',
'encryption-key': '',
'device-key': '',
'group-key': '',
'model-id': ''

})
const [existing, setExisting] = React.useState(true);
const [authType, setAuthType] = React.useState(null);
const [valid, setValid] = React.useState(false);
Expand All @@ -31,7 +39,6 @@ function Credentials() {
let deviceKey = formState['device-key'];
if (!existing && formState['group-key'] && formState['device-id']) {
deviceKey = await deriveKey(formState['group-key'], formState['device-id']);
console.log(deviceKey);
}
const credsObj: CredentialsObject = {
deviceId: formState['device-id'],
Expand All @@ -54,6 +61,15 @@ function Credentials() {

}

const clear = function () {
setValid(false);
setCreds(null);
setFormState((current: any) => {
Object.keys(current).forEach(k => current[k] = '');
return current;
})
}

const onChange = function (e: React.ChangeEvent<HTMLInputElement>) {
setAuthType(e.currentTarget.value);
};
Expand All @@ -66,41 +82,45 @@ function Credentials() {
if (formState['device-id'] && formState['scope-id'] && formState['encryption-key'] && (formState['device-key'] || formState['group-key'])) {
setValid(true);
}
const codeDiv = document.getElementById('code-div') as HTMLElement;
if (creds) {
const codeDiv = document.getElementById('code-div') as HTMLElement;
if (authType == 'qr') {
codeDiv.innerHTML = `<img src='${creds.qrCode}'/>`;
}
else if (authType == 'numeric') {
codeDiv.innerHTML = `<p style='font-size:30px'>${creds.numeric}</p>`;
}
}
else {
codeDiv.innerHTML = `<p>Please select authorization type</p>`;
}
}, [formState, creds, authType])

return (<div style={style.container}>
<div style={style.box}>
<Title>CPM Credentials Generator</Title>
<div style={{ display: 'flex', flexDirection: mobilePortrait ? 'column' : 'row', justifyContent: 'space-around', alignItems: mobilePortrait ? 'center' : undefined }}>
<div>
<FormItem id='device-id' label='Device Id' helpText='The device unique Id' onChange={onItemChange.bind(null, 'device-id')} />
<FormItem id='scope-id' label='Scope Id' helpText='Application scope Id' onChange={onItemChange.bind(null, 'scope-id')} />
<FormItem id='encryption-key' label='Encryption Key' helpText='Encryption Key for generated credentials. This is the same value of user login password used inside the mobile application.' onChange={onItemChange.bind(null, 'encryption-key')} />
<FormItem id='device-id' value={formState['device-id']} label='Device Id' helpText='The device unique Id' onChange={onItemChange.bind(null, 'device-id')} />
<FormItem id='scope-id' label='Scope Id' value={formState['scope-id']} helpText='Application scope Id' onChange={onItemChange.bind(null, 'scope-id')} />
<FormItem id='encryption-key' label='Encryption Key' value={formState['encryption-key']} helpText='Encryption Key for generated credentials. This is the same value of user login password used inside the mobile application.' onChange={onItemChange.bind(null, 'encryption-key')} />

{/* <FormItem id='device-id' label='Device Id' /> */}
<DeviceCredentials setExisting={setExisting} />
{existing && <FormItem id='device-key' label='Device Key' helpText='Connection key for the device' onChange={onItemChange.bind(null, 'device-key')} />}
{existing && <FormItem id='device-key' label='Device Key' value={formState['device-key']} helpText='Connection key for the device' onChange={onItemChange.bind(null, 'device-key')} />}
{!existing && <>
<FormItem id='group-key' label='Group Key' helpText='Connection key for the application' onChange={onItemChange.bind(null, 'group-key')} />
<ModelDetails onChange={onItemChange.bind(null, 'model-id')} /></>}
<FormItem id='group-key' label='Group Key' value={formState['group-key']} helpText='Connection key for the application' onChange={onItemChange.bind(null, 'group-key')} />
<ModelDetails value={formState['model-id']} onChange={onItemChange.bind(null, 'model-id')} /></>}
</div>
<div>
<input type='radio' name='cred-type' value={'qr'} onChange={onChange} />QR Code
<input type='radio' name='cred-type' value={'numeric'} onChange={onChange} />Numeric Code
<div id='code-div' style={{ width: '300px', height: '300px', border: '1px solid black', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
{authType === null && <p>Please select authorization type</p>}
{authType !== null && <button disabled={!valid} onClick={submit}>Generate</button>}
</div>

<div style={{ display: 'flex', justifyContent: 'space-evenly', marginTop: '20px' }}>
<button disabled={!valid || creds} onClick={submit}>Generate</button>
<button disabled={!creds} onClick={clear}>Clear</button>
</div>
</div>
</div>
</div>
Expand All @@ -125,10 +145,9 @@ function DeviceCredentials(props: { setExisting: ReactDispatch<boolean> }) {
}


function ModelDetails(props: { onChange: (value: any) => void }) {
const { onChange: onModelChange } = props;
function ModelDetails(props: { value: string, onChange: (value: any) => void }) {
const { onChange: onModelChange, value } = props;
const [selected, setSelected] = React.useState('knee');
const [defaultValue, setDefaultValue] = React.useState(undefined);


const onChange = function (e: React.ChangeEvent<HTMLInputElement>) {
Expand All @@ -143,12 +162,12 @@ function ModelDetails(props: { onChange: (value: any) => void }) {
onModelChange('urn:continuousPatientMonitoringTemplate:Smart_Vitals_Patch_220:1')
return 'urn:continuousPatientMonitoringTemplate:Smart_Vitals_Patch_220:1';
default:
return undefined;
return '';
}
};

React.useEffect(() => {
setDefaultValue(getValue());
onModelChange(getValue());
}, [selected])

return (
Expand All @@ -157,7 +176,7 @@ function ModelDetails(props: { onChange: (value: any) => void }) {
<input type='radio' name='model-group' value={'knee'} checked={selected === 'knee'} onChange={onChange} />Smart Knee Brace
<input type='radio' name='model-group' value={'vitals'} checked={selected === 'vitals'} onChange={onChange} />Smart Vitals Patch
<input type='radio' name='model-group' value={'custom'} checked={selected === 'custom'} onChange={onChange} />Custom
<FormItem id='model-id' value={defaultValue} label='Model Id' helpText='Id of the model to which assign device to.' onChange={onModelChange} />
<FormItem id='model-id' value={value} label='Model Id' helpText='Id of the model to which assign device to.' readonly={['knee', 'vitals'].indexOf(selected) >= 0} onChange={onModelChange} />
</div>
)
}
Expand All @@ -173,9 +192,8 @@ function Help(props: { text: string, position: DOMRect }) {
}


function FormItem(props: { id: string, value?: string, label: string, helpText: string, onChange: (value: any) => void }) {
const { id, label, onChange } = props;
const [value, setValue] = React.useState('');
function FormItem(props: { id: string, value: string, readonly?: boolean, label: string, helpText: string, onChange: (value: any) => void }) {
const { id, label, value, readonly, onChange } = props;
const [showHelp, setShowHelp] = React.useState(false);
const [position, setPosition] = React.useState(null);

Expand All @@ -201,8 +219,7 @@ function FormItem(props: { id: string, value?: string, label: string, helpText:
setShowHelp((current: boolean) => (!current));
}}>help_outline</i></p>
{showHelp && <Help text={props.helpText} position={position} />}
<input style={style.input} id={id} value={props.value ? props.value : value} readOnly={!!props.value} onChange={e => {
setValue(e.target.value);
<input style={style.input} id={id} value={value} readOnly={readonly} onChange={e => {
onChange(e.target.value);
}
} />
Expand Down
2 changes: 1 addition & 1 deletion creds-generator/server/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export type Credentials = {


const app = Express();
const port = process.env.PORT;
const port = process.env.PORT || 3700;
const dbPath = path.join(__dirname, '../db.json');
if (!fs.existsSync(dbPath)) {
fs.writeFileSync(dbPath, '{}');
Expand Down
3 changes: 2 additions & 1 deletion src/components/footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import { View, StyleSheet, ViewStyle } from "react-native";
import { Text, IconButton } from 'react-native-paper';
import { useState } from "react";
import { CPMText } from './typography';

const defaultTitle = 'Learn more about this technology';
export interface IFooterProps {
Expand All @@ -16,7 +17,7 @@ export function Footer(props: IFooterProps) {
<IconButton icon={expanded ? 'chevron-down' : 'chevron-up'} onPress={() => {
setExpanded(current => (!current));
}} size={20} color={props.textColor} />
{expanded ? <Text style={{ textAlign: 'center', ...(props.textColor ? { color: props.textColor } : {}) }}>{props.text}</Text> : <Text style={(props.textColor ? { color: props.textColor } : {})}>{props.title ? props.title : defaultTitle}</Text>}
{expanded ? <CPMText style={{ textAlign: 'center', ...(props.textColor ? { color: props.textColor } : {}) }}>{props.text}</CPMText> : <CPMText style={(props.textColor ? { color: props.textColor } : {})}>{props.title ? props.title : defaultTitle}</CPMText>}
</View>)
}

Expand Down
22 changes: 14 additions & 8 deletions src/components/typography.tsx
Original file line number Diff line number Diff line change
@@ -1,39 +1,45 @@
import React from 'react';
import { Text } from 'react-native-paper';
import { TextProperties } from 'react-native';
import { TextProperties, Dimensions, Platform, PixelRatio } from 'react-native';
import { normalize } from '../utils';




interface Props extends TextProperties {
children?: any
children?: any,
theme?: any
}


export function Headline(props: Props) {
const { children, style, ...textProps } = props;
return (<Text style={[style, { fontSize: 20, fontWeight: 'bold' }]}>{props.children}</Text>)
return (<Text style={[style, { fontSize: normalize(20), fontWeight: 'bold' }]}>{props.children}</Text>)
}

export function CPMText(props: Props) {
const { children, style, ...textProps } = props;
return (<Text style={[style, { fontSize: 12, fontStyle: 'normal', letterSpacing: 1.15 }]}>{props.children}</Text>)
return (<Text style={[style, { fontSize: normalize(14), fontStyle: 'normal' }]}>{props.children}</Text>)
}

export function Name(props: Props) {
const { children, style, ...textProps } = props;
return (<Text style={[style, { fontSize: 14, fontWeight: 'bold', fontStyle: 'normal', letterSpacing: 1.15 }]}>{props.children}</Text>)
return (<Text style={[style, { fontSize: normalize(14), fontWeight: 'bold', fontStyle: 'normal', letterSpacing: 1.15 }]}>{props.children}</Text>)
}

export function Item(props: Props) {
const { children, style, ...textProps } = props;
return (<Text style={[style, { fontSize: 14, fontWeight: 'bold', fontStyle: 'normal' }]}>{props.children}</Text>)
return (<Text style={[style, { fontSize: normalize(14), fontWeight: 'bold', fontStyle: 'normal' }]}>{props.children}</Text>)
}

export function Detail(props: Props) {
const { children, style, ...textProps } = props;

return (<Text style={[style, { fontSize: 14, color: '#666666' }]}>{props.children}</Text>)
return (<Text style={[style, { fontSize: normalize(14), color: '#666666' }]}>{props.children}</Text>)
}

export function Action(props: Props) {
const { children, style, ...textProps } = props;

return (<Text style={[style, { fontSize: 14, color: '#00B1FF' }]}>{props.children}</Text>)
return (<Text style={[style, { fontSize: normalize(14), color: '#00B1FF' }]}>{props.children}</Text>)
}
4 changes: 2 additions & 2 deletions src/components/utils.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { View, processColor } from 'react-native';
import { ActivityIndicator, Text, Portal, Dialog, Button } from 'react-native-paper';
import { Detail } from './typography';
import { Detail, Headline } from './typography';
import DefaultStyles from '../styles';
import GetConnected from '../assets/home_connected_icon.svg';
import { ReactDispatch } from '../types';
Expand Down Expand Up @@ -36,7 +36,7 @@ export function GetConnectedHeader() {
<View style={{ flexDirection: 'row', padding: 10, alignItems: 'center' }}>
<GetConnected style={{ marginHorizontal: 16, marginVertical: 10 }} />
<View style={{ flexDirection: 'column' }}>
<Text style={DefaultStyles.header}>{header}</Text>
<Headline style={DefaultStyles.header}>{header}</Headline>
<Detail>{sub}</Detail>
</View>
</View>)
Expand Down
10 changes: 5 additions & 5 deletions src/screens/devices.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { View, ScrollView, StyleSheet, RefreshControl } from "react-native";
import { Button, Text, IconButton, ActivityIndicator } from 'react-native-paper';
import { Footer } from '../components/footer';
import DefaultStyles from '../styles';
import { Detail, Headline, Action, Name } from '../components/typography';
import { Detail, Headline, Action, Name, CPMText } from '../components/typography';
import { NavigationProperty, CONSTANTS } from '../types';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { useNavigation, useIsFocused } from '@react-navigation/native';
Expand Down Expand Up @@ -233,11 +233,11 @@ function NotFound(props: { retry: () => void }) {
<IconButton icon='alert' size={60} />
</View>
<View style={{ ...DefaultStyles.centerFragment, ...{ justifyContent: 'space-evenly', marginHorizontal: 20 } }}>
<Text style={DefaultStyles.header}>{NOT_FOUND_TITLE}</Text>
<Text style={{ textAlign: 'center' }}>{NOT_FOUND_TEXT}</Text>
<CPMText style={DefaultStyles.header}>{NOT_FOUND_TITLE}</CPMText>
<CPMText style={{ textAlign: 'center' }}>{NOT_FOUND_TEXT}</CPMText>
</View>
<View style={DefaultStyles.centerFragment}>
<Button mode='contained' style={{ ...DefaultStyles.centeredButton, ...DefaultStyles.elevated }} onPress={props.retry}><Text>TRY AGAIN</Text></Button>
<Button mode='contained' style={{ ...DefaultStyles.centeredButton, ...DefaultStyles.elevated }} onPress={props.retry}><CPMText>TRY AGAIN</CPMText></Button>
<SimulatedButton refresh={props.retry} />
</View>
</View>)
Expand All @@ -261,7 +261,7 @@ function SimulatedButton(props: { refresh: () => void }) {
type: 'ACTIVATE',
payload: simManager
});
}}><Text>USE SIMULATED DEVICES</Text></CPMButton>)
}}>USE SIMULATED DEVICES</CPMButton>)
}


Expand Down
6 changes: 4 additions & 2 deletions src/screens/login.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import LinearGradient from 'react-native-linear-gradient';
import { login } from '../api/auth';
import { useUser } from '../hooks/auth';
import { ReactDispatch } from '../types';
import { CPMText } from '../components/typography';

const footerText = 'This generates and stores the patient ID information that will be mapped to a device in the Azure API for FHIR.';
const forgot_passord = 'Forgot password?'
Expand Down Expand Up @@ -47,7 +48,7 @@ function Form(props: { onSubmit: (user: string, password: string) => void | Prom
return (<View style={style.form}>
<Input name='Username' value={username} setValue={setUsername} />
<Input name='Password' hidden={true} value={password} setValue={setPassword} />
<Text style={{ ...style.forgot, ...style.text }}>{forgot_passord}</Text>
<CPMText style={{ ...style.forgot, ...style.text }}>{forgot_passord}</CPMText>
<Button mode='outlined' style={style.button} onPress={() => props.onSubmit(username, password)}>Login</Button>
</View>)
}
Expand All @@ -70,7 +71,8 @@ const style = StyleSheet.create({
},
logoSub: {
fontSize: 20,
fontWeight: 'bold'
fontWeight: 'bold',
color: 'white'
},
form: {
width: '80%',
Expand Down
9 changes: 5 additions & 4 deletions src/screens/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Text, IconButton } from "react-native-paper";
import { Footer } from "../components/footer";
import DefaultStyles from "../styles";
import ApplicationBar from "../components/appbar";
import { Detail } from "../components/typography";
import { Detail, CPMText } from "../components/typography";
import { useUser } from "../hooks/auth";
import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
import ConnectedLogo from '../assets/home_connected_logo.svg';
Expand All @@ -20,6 +20,7 @@ import Providers from "./providers";
import { GetConnectedHeader } from "../components/utils";
import { useEnv, useHeaderTitle } from "../hooks/common";
import { Scene } from "@react-navigation/stack/lib/typescript/src/types";
import { normalize } from "../utils";


const instructions = 'Start seeing insights by pairing a bluetooth device or syncing data from your health app.'
Expand Down Expand Up @@ -117,7 +118,7 @@ function Home() {
<View style={{ ...DefaultStyles.elevated, ...style.box }}>
<GetConnectedHeader />
<ConnectedLogo width='100%' height={250} style={{ justifyContent: 'center' }} />
<Text style={{ padding: 20 }}>{instructions}</Text>
<CPMText style={{ paddingHorizontal: 20, paddingVertical: normalize(10) }}>{instructions}</CPMText>
<Options />
</View>
</View>
Expand All @@ -137,7 +138,7 @@ function Options() {
navigation.setParams({ title: 'Devices' });
}}>
<IconButton icon='bluetooth' size={30} style={{ marginRight: -5 }} />
<Text>PAIR DEVICE</Text>
<CPMText>PAIR DEVICE</CPMText>
</TouchableOpacity>
{
(Platform.OS === 'android' && envs['GoogleFit'])
Expand All @@ -147,7 +148,7 @@ function Options() {
navigation.navigate(CONSTANTS.Screens.PROVIDERS_SCREEN);
}}>
<IconButton icon='sync' size={30} style={{ marginRight: -5 }} />
<Text>{sync}</Text>
<CPMText>{sync}</CPMText>
</TouchableOpacity> : <></>}
</View>)
}
Expand Down
Loading

0 comments on commit 0a64b16

Please sign in to comment.