refactor: simplify desktop client UI labels and remove local config section
Replace Unix timestamp with "Just now" label in now_label helper. Update profile label from "No profile provisioned" to "Not provisioned". Change brand copy subtitle based on enrollment state. Rename "Current profile" to "Overview" and "Profile" to "Access" in status panel. Remove "Stored config" surface section showing profile path and revision. Update resources sidebar instructions and rename resource-list to resource-
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
mod tunnel_manager;
|
mod tunnel_manager;
|
||||||
|
|
||||||
use std::{fs, path::PathBuf, sync::Mutex, time::{SystemTime, UNIX_EPOCH}};
|
use std::{fs, path::PathBuf, sync::Mutex};
|
||||||
|
|
||||||
use base64::{engine::general_purpose::STANDARD, Engine as _};
|
use base64::{engine::general_purpose::STANDARD, Engine as _};
|
||||||
use rand_core::OsRng;
|
use rand_core::OsRng;
|
||||||
@@ -314,11 +314,7 @@ fn generate_keypair() -> (String, String) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
fn now_label() -> String {
|
fn now_label() -> String {
|
||||||
let seconds = SystemTime::now()
|
"Just now".into()
|
||||||
.duration_since(UNIX_EPOCH)
|
|
||||||
.map(|duration| duration.as_secs())
|
|
||||||
.unwrap_or(0);
|
|
||||||
format!("synced at {}", seconds)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
fn build_fingerprint(server_url: &str, username: &str, public_key: &str) -> String {
|
fn build_fingerprint(server_url: &str, username: &str, public_key: &str) -> String {
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ function formatInvokeError(err: unknown, fallback: string) {
|
|||||||
|
|
||||||
function currentProfileLabel(state: EnrollmentState | null) {
|
function currentProfileLabel(state: EnrollmentState | null) {
|
||||||
if (!state) {
|
if (!state) {
|
||||||
return "No profile provisioned";
|
return "Not provisioned";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (state.resources.includes("0.0.0.0/0")) {
|
if (state.resources.includes("0.0.0.0/0")) {
|
||||||
@@ -123,7 +123,7 @@ export function App() {
|
|||||||
<div className="brand-copy">
|
<div className="brand-copy">
|
||||||
<p className="eyebrow">NexaVPN</p>
|
<p className="eyebrow">NexaVPN</p>
|
||||||
<h1>VPN Client</h1>
|
<h1>VPN Client</h1>
|
||||||
<p>{state ? profileLabel : "Sign in to provision this device"}</p>
|
<p>{state ? "Private access client" : "Sign in to add this device"}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="top-actions">
|
<div className="top-actions">
|
||||||
@@ -190,7 +190,7 @@ export function App() {
|
|||||||
<div className="surface-header">
|
<div className="surface-header">
|
||||||
<div>
|
<div>
|
||||||
<p className="eyebrow">Connection</p>
|
<p className="eyebrow">Connection</p>
|
||||||
<h4>Current profile</h4>
|
<h4>Overview</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="status-grid">
|
<div className="status-grid">
|
||||||
@@ -203,7 +203,7 @@ export function App() {
|
|||||||
<strong>{state.gatewayEndpoint}</strong>
|
<strong>{state.gatewayEndpoint}</strong>
|
||||||
</div>
|
</div>
|
||||||
<div className="detail-card">
|
<div className="detail-card">
|
||||||
<span>Profile</span>
|
<span>Access</span>
|
||||||
<strong>{profileLabel}</strong>
|
<strong>{profileLabel}</strong>
|
||||||
</div>
|
</div>
|
||||||
<div className="detail-card">
|
<div className="detail-card">
|
||||||
@@ -213,25 +213,6 @@ export function App() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="surface">
|
|
||||||
<div className="surface-header">
|
|
||||||
<div>
|
|
||||||
<p className="eyebrow">Local</p>
|
|
||||||
<h4>Stored config</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="profile-grid">
|
|
||||||
<div className="profile-card">
|
|
||||||
<span>Profile path</span>
|
|
||||||
<strong>{state.profilePath}</strong>
|
|
||||||
</div>
|
|
||||||
<div className="profile-card">
|
|
||||||
<span>Revision</span>
|
|
||||||
<strong>{state.profileRevision}</strong>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error ? <div className="error">{error}</div> : null}
|
{error ? <div className="error">{error}</div> : null}
|
||||||
</section>
|
</section>
|
||||||
)}
|
)}
|
||||||
@@ -243,8 +224,8 @@ export function App() {
|
|||||||
<h4>Resources</h4>
|
<h4>Resources</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>After policy changes, press <strong>Sync</strong> to refresh this device profile.</p>
|
<p>Press <strong>Sync</strong> after policy changes.</p>
|
||||||
<ul className="resource-list">
|
<ul className="resource-stack">
|
||||||
{(state?.resources ?? ["No resources assigned yet"]).map((resource) => (
|
{(state?.resources ?? ["No resources assigned yet"]).map((resource) => (
|
||||||
<li key={resource}>{resource}</li>
|
<li key={resource}>{resource}</li>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -218,21 +218,21 @@ input {
|
|||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resource-list {
|
.resource-stack {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resource-list li {
|
.resource-stack li {
|
||||||
padding: 10px 12px;
|
padding: 14px 16px;
|
||||||
border-radius: 999px;
|
border-radius: 16px;
|
||||||
background: rgba(117, 227, 186, 0.08);
|
background: rgba(255, 255, 255, 0.03);
|
||||||
border: 1px solid rgba(117, 227, 186, 0.15);
|
border: 1px solid rgba(177, 197, 229, 0.1);
|
||||||
color: #dffaf0;
|
color: #eef4ff;
|
||||||
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-panel form {
|
.login-panel form {
|
||||||
|
|||||||
Reference in New Issue
Block a user