146 lines
6.9 KiB
HTML
146 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Social accounts · Portal · MKDRealtor.com</title>
|
||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700%7CPoppins:400,600,700">
|
||
<link rel="stylesheet" href="proposal.css">
|
||
|
||
</head>
|
||
<body class="portal">
|
||
<div class="proposal-banner">
|
||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||
<div><a href="index.html">All screens</a></div>
|
||
</div>
|
||
<div class="portal-shell">
|
||
<aside class="portal-sidebar">
|
||
<a class="portal-brand" href="portal-dashboard.html"><img src="brand/exit_logo.png" alt="EXIT Realty"><span>MKDRealtor.com</span></a>
|
||
<nav class="portal-nav">
|
||
<div class="nav-section">Overview</div>
|
||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||
<a class="" href="portal-leads.html">Leads</a>
|
||
<a class="" href="portal-analytics.html">Analytics</a>
|
||
<div class="nav-section">Outreach</div>
|
||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||
<div class="nav-section">Social</div>
|
||
<a class="" href="portal-social.html">Compose & preview</a>
|
||
<a class="active" href="portal-social-accounts.html">Accounts</a>
|
||
</nav>
|
||
</aside>
|
||
<div class="portal-main">
|
||
<div class="portal-topbar">
|
||
<h1>Social accounts</h1>
|
||
<div class="portal-user">Signed in as <strong>Monica Dhillon</strong> · <a href="portal-login.html" style="color:#00626c">Sign out</a></div>
|
||
</div>
|
||
<div class="portal-content">
|
||
<div class="proposal-note"><strong>UX note:</strong> Add via OAuth (Meta / LinkedIn). Re-authorize when token expires or refresh fails — same connect button, no data loss.</div>
|
||
|
||
<div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px">
|
||
<p style="margin:0;font-size:14px;color:#6b7280">Connect native APIs (Meta + LinkedIn). Tokens encrypted. Re-auth when expired or scopes change.</p>
|
||
<button class="btn btn-primary" type="button" onclick="document.getElementById('add-panel').style.display='block'">Add account</button>
|
||
</div>
|
||
|
||
<div class="panel" id="add-panel" style="display:none;border-color:#93c5fd">
|
||
<div class="panel-h"><h2>Add a social account</h2><button class="btn btn-sm btn-ghost" type="button" onclick="document.getElementById('add-panel').style.display='none'">Close</button></div>
|
||
<div class="panel-b">
|
||
<div class="connect-grid">
|
||
<button class="connect-card" type="button" onclick="alert('Mockup: redirect to Meta OAuth → grant Pages + Instagram Business')">
|
||
<div class="platform-icon meta">f</div>
|
||
<div>
|
||
<strong>Facebook Page</strong>
|
||
<p>Meta Graph OAuth. Pick a Page you manage.</p>
|
||
</div>
|
||
</button>
|
||
<button class="connect-card" type="button" onclick="alert('Mockup: same Meta OAuth → select IG Business linked to a Page')">
|
||
<div class="platform-icon ig">ig</div>
|
||
<div>
|
||
<strong>Instagram Business</strong>
|
||
<p>Requires IG Business/Creator linked to a Facebook Page.</p>
|
||
</div>
|
||
</button>
|
||
<button class="connect-card" type="button" onclick="alert('Mockup: redirect to LinkedIn OAuth → org or member posting')">
|
||
<div class="platform-icon li">in</div>
|
||
<div>
|
||
<strong>LinkedIn</strong>
|
||
<p>Organization or member posting. App review may take 2–4 weeks.</p>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
<p class="hint-block">Flow: click Connect → provider consent screen → callback stores encrypted token + SocialAccount row → status = Connected.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<div class="panel-h"><h2>Connected accounts</h2></div>
|
||
<div class="panel-b" style="padding:0">
|
||
<table class="table">
|
||
<thead><tr><th>Platform</th><th>Account</th><th>Status</th><th>Token</th><th>Actions</th></tr></thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><span class="platform-pill meta">Facebook</span></td>
|
||
<td>Monica Dhillon · MKDRealtor.com<br><span class="muted">Page ID · 1029384756</span></td>
|
||
<td><span class="badge badge-won">Connected</span></td>
|
||
<td><span class="muted">Expires Oct 2026</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-ghost" type="button">Test post</button>
|
||
<button class="btn btn-sm btn-ghost" type="button" onclick="alert('Mockup: disconnect + revoke token')">Disconnect</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="platform-pill ig">Instagram</span></td>
|
||
<td>@monicadhillonhomes<br><span class="muted">Linked to FB Page above</span></td>
|
||
<td><span class="badge badge-won">Connected</span></td>
|
||
<td><span class="muted">Expires Oct 2026</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-ghost" type="button">Test post</button>
|
||
<button class="btn btn-sm btn-ghost" type="button">Disconnect</button>
|
||
</td>
|
||
</tr>
|
||
<tr class="row-warn">
|
||
<td><span class="platform-pill li">LinkedIn</span></td>
|
||
<td>Monica Dhillon<br><span class="muted">Member + Company page</span></td>
|
||
<td><span class="badge badge-contacted">Needs re-auth</span></td>
|
||
<td><span class="text-warn">Expired Jul 12 · refresh failed</span></td>
|
||
<td>
|
||
<button class="btn btn-sm btn-primary" type="button" onclick="alert('Mockup: LinkedIn OAuth re-consent → refresh_token()')">Re-authorize</button>
|
||
<button class="btn btn-sm btn-ghost" type="button">Disconnect</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="split">
|
||
<div class="panel">
|
||
<div class="panel-h"><h2>When to re-auth</h2></div>
|
||
<div class="panel-b" style="font-size:14px">
|
||
<ul class="plain-list">
|
||
<li>Token expired / refresh failed (banner on compose + Accounts)</li>
|
||
<li>Provider asks for new scopes (e.g. Meta Graph version bump)</li>
|
||
<li>You switched Page / IG account</li>
|
||
<li>Password change or security review on the social side</li>
|
||
</ul>
|
||
<p class="muted" style="margin:0">Re-auth = same OAuth connect flow; we replace the encrypted token and clear the “needs re-auth” flag. Scheduled posts stay queued until token works again.</p>
|
||
</div>
|
||
</div>
|
||
<div class="panel">
|
||
<div class="panel-h"><h2>Health checks</h2></div>
|
||
<div class="panel-b" style="font-size:14px">
|
||
<p><strong>Last refresh job</strong> — today 6:00a · 2 OK · 1 failed (LinkedIn)</p>
|
||
<p><strong>Failed publish (7d)</strong> — 1 IG (media format) · 2 LI (auth)</p>
|
||
<p style="margin:0"><a href="portal-social.html">Open composer</a> — platforms that need re-auth are disabled until fixed.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|