Skip to content

Commit

Permalink
fix: Don't show device configuration box if user has no network access (
Browse files Browse the repository at this point in the history 
#58)
  • Loading branch information
@j-chmielewski
j-chmielewski authored Mar 20, 2024
1 parent 8b7196d commit d3e4651
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 59 deletions.
1 change: 1 addition & 0 deletions web/src/i18n/en/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@ If you have any questions, please consult your assigned admin.All necessary info
`,
},
deviceNameLabel: 'My Device Name',
noNetworksMessage: "You don't have access to any networks",
cardTitle:
'Use provided configuration file below by scanning QR Code or importing it as file on your devices WireGuard app.',
card: {
Expand Down
8 changes: 8 additions & 0 deletions web/src/i18n/i18n-types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -319,6 +319,10 @@ type RootTranslation = {
* M​y​ ​D​e​v​i​c​e​ ​N​a​m​e
*/
deviceNameLabel: string
/**
* Y​o​u​ ​d​o​n​'​t​ ​h​a​v​e​ ​a​c​c​e​s​s​ ​t​o​ ​a​n​y​ ​n​e​t​w​o​r​k​s
*/
noNetworksMessage: string
/**
* U​s​e​ ​p​r​o​v​i​d​e​d​ ​c​o​n​f​i​g​u​r​a​t​i​o​n​ ​f​i​l​e​ ​b​e​l​o​w​ ​b​y​ ​s​c​a​n​n​i​n​g​ ​Q​R​ ​C​o​d​e​ ​o​r​ ​i​m​p​o​r​t​i​n​g​ ​i​t​ ​a​s​ ​f​i​l​e​ ​o​n​ ​y​o​u​r​ ​d​e​v​i​c​e​s​ ​W​i​r​e​G​u​a​r​d​ ​a​p​p​.
*/
Expand Down Expand Up @@ -877,6 +881,10 @@ export type TranslationFunctions = {
* My Device Name
*/
deviceNameLabel: () => LocalizedString
/**
* You don't have access to any networks
*/
noNetworksMessage: () => LocalizedString
/**
* Use provided configuration file below by scanning QR Code or importing it as file on your devices WireGuard app.
*/
Expand Down
127 changes: 68 additions & 59 deletions ...tep/components/ConfigureDeviceCard/components/DeviceConfiguration/DeviceConfiguration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { Card } from '../../../../../../../../shared/components/layout/Card/Card
import { useTheme } from '../../../../../../../../shared/components/layout/hooks/theme/useTheme';
import { Input } from '../../../../../../../../shared/components/layout/Input/Input';
import { MessageBox } from '../../../../../../../../shared/components/layout/MessageBox/MessageBox';
import { MessageBoxType } from '../../../../../../../../shared/components/layout/MessageBox/types';
import { Select } from '../../../../../../../../shared/components/layout/Select/Select';
import { SelectOption } from '../../../../../../../../shared/components/layout/Select/types';
import SvgIconHamburger from '../../../../../../../../shared/components/svg/IconHamburger';
Expand Down Expand Up @@ -42,7 +43,7 @@ export const DeviceConfiguration = () => {
})) ?? [],
[deviceState?.configs],
);

const networksAvailable = deviceState?.configs?.length > 0 ?? false;
const preparedConfig = useMemo(() => {
if (deviceState?.device?.privateKey) {
return selected?.config.replace('YOUR_PRIVATE_KEY', deviceState.device.privateKey);
Expand Down Expand Up @@ -76,65 +77,73 @@ export const DeviceConfiguration = () => {
return;
}}
/>

<div className="qr-info">
<p>{cardLL.cardTitle()}</p>
</div>

<Card id="device-config-card">
<div className="top">
<SvgIconHamburger />
<label>{cardLL.card.selectLabel()}:</label>
<Select<DeviceConfig>
identify={networkIdentifier}
options={selectOptions}
onChangeSingle={(config) => setSelected(config)}
selected={selected}
/>
<div className="actions">
<ActionButton variant={ActionButtonVariant.QRCODE} active />
<ActionButton
variant={ActionButtonVariant.COPY}
disabled={isUndefined(selected) || !window.isSecureContext}
onClick={() => {
if (selected && window.isSecureContext) {
if (deviceState?.device?.privateKey && preparedConfig) {
navigator.clipboard
.writeText(preparedConfig)
.catch((e) => console.error(e));
} else {
navigator.clipboard
.writeText(selected.config)
.catch((e) => console.error(e));
}
}
}}
/>
<ActionButton
disabled={isUndefined(selected)}
variant={ActionButtonVariant.DOWNLOAD}
onClick={() => {
if (preparedConfig && selected) {
downloadWGConfig(
deviceState?.device?.privateKey ? preparedConfig : selected.config,
`${selected.network_name.toLowerCase().replace(/\s+/g, '-')}`,
);
}
}}
/>
{networksAvailable && (
<>
<div className="qr-info">
<p>{cardLL.cardTitle()}</p>
</div>
</div>
<div className="qr">
{!isUndefined(preparedConfig) && (
<QRCode
size={275}
value={preparedConfig}
bgColor={colors.surfaceDefaultModal}
fgColor={colors.textBodyPrimary}
/>
)}
</div>
</Card>

<Card id="device-config-card">
<div className="top">
<SvgIconHamburger />
<label>{cardLL.card.selectLabel()}:</label>
<Select<DeviceConfig>
identify={networkIdentifier}
options={selectOptions}
onChangeSingle={(config) => setSelected(config)}
selected={selected}
/>
<div className="actions">
<ActionButton variant={ActionButtonVariant.QRCODE} active />
<ActionButton
variant={ActionButtonVariant.COPY}
disabled={isUndefined(selected) || !window.isSecureContext}
onClick={() => {
if (selected && window.isSecureContext) {
if (deviceState?.device?.privateKey && preparedConfig) {
navigator.clipboard
.writeText(preparedConfig)
.catch((e) => console.error(e));
} else {
navigator.clipboard
.writeText(selected.config)
.catch((e) => console.error(e));
}
}
}}
/>
<ActionButton
disabled={isUndefined(selected)}
variant={ActionButtonVariant.DOWNLOAD}
onClick={() => {
if (preparedConfig && selected) {
downloadWGConfig(
deviceState?.device?.privateKey
? preparedConfig
: selected.config,
`${selected.network_name.toLowerCase().replace(/\s+/g, '-')}`,
);
}
}}
/>
</div>
</div>
<div className="qr">
{!isUndefined(preparedConfig) && (
<QRCode
size={275}
value={preparedConfig}
bgColor={colors.surfaceDefaultModal}
fgColor={colors.textBodyPrimary}
/>
)}
</div>
</Card>
</>
)}
{!networksAvailable && (
<MessageBox message={cardLL.noNetworksMessage()} type={MessageBoxType.WARNING} />
)}
</>
);
};

0 comments on commit d3e4651

Please sign in to comment.