Integrate app into main website, various improvements

Author: LostLuma

package.json

@@ -5,8 +5,9 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "parcel public/index.html",
-    "build": "parcel build --experimental-scope-hoisting public/**/*",
+    "start": "parcel verify.html",
+    "build-test": "parcel build --experimental-scope-hoisting verify.html",
+    "build-prod": "parcel build --experimental-scope-hoisting --public-url /verify --out-dir ../public/verify src/index.js",
     "format": "prettier --write src/**/*.{css,js} public/**/*.{html,js}"
   },
   "repository": {

public/favicon.ico

@@ -9,19 +9,30 @@ import "./Steam.css";
 export default function Steam({ data }) {
   const params = new URLSearchParams({
     "openid.mode": "checkid_setup",
-    "openid.return_to": LOCATION + "/auth/steam",
+    "openid.return_to": LOCATION + "/verify/steam",
     "openid.ns": "http://specs.openid.net/auth/2.0",
     "openid.claimed_id": "http://specs.openid.net/auth/2.0/identifier_select",
     "openid.identity": "http://specs.openid.net/auth/2.0/identifier_select",
   });
 
+  const cls = data ? "connect" : "connect bold";
+  const name = data ? (
+    <a className="account" href={`https://steamcommunity.com/profiles/${data.id}`} target="_blank">
+      {data.name}
+    </a>
+  ) : (
+    "Not Connected"
+  );
+
   const url = "https://steamcommunity.com/openid/login?" + params.toString();
 
   return (
     <>
       <img title="Steam" src={SteamIcon} />
-      <div>{data ? data.name : "Not Connected"}</div>
-      <a href={url}>{data ? "Change Account" : "Connect Account"}</a>
+      <div>{name}</div>
+      <a className={cls} href={url}>
+        {data ? "Change Account" : "Connect Account"}
+      </a>
     </>
   );
 }

public/index.html

@@ -10,18 +10,34 @@ export default function Xbox({ data }) {
   const params = new URLSearchParams({
     client_id: MICROSOFT_CLIENT_ID,
     response_type: "code",
-    redirect_uri: LOCATION + "/auth/xbox",
+    redirect_uri: LOCATION + "/verify/xbox",
     scope: "xboxlive.signin offline_access",
     response_mode: "query",
     prompt: "consent",
   });
 
+  const cls = data ? "connect" : "connect bold";
+  const name = data ? (
+    <a
+      className="account"
+      href={`https://account.xbox.com/en-us/profile?gamertag=${data.name}`}
+      target="_blank"
+    >
+      {data.name}
+    </a>
+  ) : (
+    "Not Connected"
+  );
+
   const url = "https://login.microsoftonline.com/common/oauth2/v2.0/authorize?" + params.toString();
+
   return (
     <>
       <img title="Xbox" src={XboxIcon} />
-      <div>{data ? data.name : "Not Connected"}</div>
-      <a href={url}>{data ? "Change Account" : "Connect Account"}</a>
+      <div>{name}</div>
+      <a className={cls} href={url}>
+        {data ? "Change Account" : "Connect Account"}
+      </a>
     </>
   );
 }

public/robots.txt

@@ -1,6 +1,6 @@
 .user {
   margin-top: 1em;
-  margin-bottom: -1em;
+  margin-bottom: 1em;
   text-align: center;
 }
 
@@ -30,10 +30,16 @@
 }
 
 .platform div {
+  color: white;
   padding-left: 1em;
 }
 
-.platform a {
+.platform .account {
+  color: white;
+  border-bottom: 1px solid white;
+}
+
+.platform .connect {
   float: right;
   background-color: #0062cc;
 
@@ -42,7 +48,17 @@
   color: white;
 }
 
+.bold {
+  font-weight: bold;
+}
+
 h3 {
-  margin-top: 2em;
+  display: block;
+  margin-top: 1em;
+  margin-bottom: 0;
   text-align: center;
 }
+
+.accounts p {
+  margin-top: 0;
+}

public/well-known/microsoft-identity-association.json

@@ -22,18 +22,19 @@ function LogoutButton({ updateUser }) {
 
 export default function Accounts({ user, updateUser }) {
   return (
-    <div>
+    <div className="accounts">
       <Avatar user={user} />
       <div className="user">
         Logged in as {user.name}#{user.discriminator} – <LogoutButton updateUser={updateUser} />
       </div>
-      <div className="divider" />
+
       <div className="platform steam">
         <Steam data={user.connections.steam} />
       </div>
       <div className="platform xbox">
         <Xbox data={user.connections.xbox} />
       </div>
+
       <h3>Is your platform not available?</h3>
       <p>Get in contact with 100Pals Staff and let us know!</p>
     </div>

src/Accounts/Steam.js

@@ -13,13 +13,10 @@ export default function App() {
   return (
     <BrowserRouter>
       <Switch>
-        <Route exact path="/">
-          <Redirect to="/home" />
-        </Route>
-        <Route path="/home">
+        <Route exact path="/verify">
           <MenuBase />
         </Route>
-        <Route path="/auth">
+        <Route path="/verify/*">
           <CallbackHandler />
         </Route>
       </Switch>
@@ -62,7 +59,7 @@ class MenuBase extends Component {
 
     return (
       <div className="menu">
-        <h1>AchievementHunting.com Verification</h1>
+        <h1>Account Verification</h1>
         {user ? <Accounts user={user} updateUser={this.updateUser} /> : <Landing />}
       </div>
     );

src/Accounts/Xbox.js

@@ -3,12 +3,14 @@ import { Redirect, withRouter } from "react-router-dom";
 
 import api, { APIError } from "./api";
 import { AppFailure, Loading } from "./Common";
+import Reminder from "./Reminder";
 
 class CallbackHandler extends Component {
   constructor(props) {
     super(props);
 
-    this.state = { loading: true, error: null };
+    this.reminderSeen = this.reminderSeen.bind(this);
+    this.state = { loading: true, error: null, steam: null };
   }
 
   async componentDidMount() {
@@ -21,26 +23,31 @@ class CallbackHandler extends Component {
     this.setState({ loading: false });
   }
 
+  async reminderSeen() {
+    this.setState({ steam: null });
+  }
+
   async processData() {
     const path = this.props.location.pathname;
     const search = new URLSearchParams(this.props.location.search);
 
     // The Discord and Xbox auth flow can be cancelled
-    // In this case the user is redirected back to /app
+    // In this case the user is redirected back to /verify
     switch (path) {
-      case "/auth/discord": {
+      case "/verify/discord": {
         const code = search.get("code");
 
         if (code) {
           await api.login(code);
         }
         break;
       }
-      case "/auth/steam": {
-        await api.createSteamConnection(Object.fromEntries(search));
+      case "/verify/steam": {
+        const data = await api.createSteamConnection(Object.fromEntries(search));
+        this.setState({ steam: data });
         break;
       }
-      case "/auth/xbox": {
+      case "/verify/xbox": {
         const code = search.get("code");
 
         if (code) {
@@ -55,13 +62,17 @@ class CallbackHandler extends Component {
   }
 
   render() {
-    const { loading, error } = this.state;
+    const { loading, error, steam } = this.state;
 
     if (error) {
       return <AppFailure error={error} />;
     }
 
-    return loading ? <Loading /> : <Redirect to="/home" />;
+    if (steam && steam.status === "private") {
+      return <Reminder id={steam.id} reminderSeen={this.reminderSeen} />;
+    }
+
+    return loading ? <Loading /> : <Redirect to="/verify" />;
   }
 }
 

src/Accounts/index.css

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 import "./common.css";
 
@@ -8,5 +9,12 @@ export function Loading() {
 
 export function AppFailure({ error }) {
   const _default = "Something unexpected went wrong. Try again later.";
-  return <h1 className="status error">{error.message ?? _default}</h1>;
+  return (
+    <>
+      <h1 className="status error">{error.message ?? _default}</h1>
+      <div className="wrap-return">
+        <Link to="/verify">Go Back to account verification</Link>
+      </div>
+    </>
+  );
 }

src/Accounts/index.js

@@ -1,15 +1,19 @@
+p {
+  margin-top: 1em;
+}
+
 p,
 .login {
   text-align: center;
 }
 
 .login {
-  margin-top: 30%;
+  padding: 1em;
 }
 
 .login a {
-  font-size: x-large;
-  padding: 10px;
+  font-size: large;
+  padding: 5px;
   border-radius: 5px;
   color: white;
   background-color: #0062cc;

src/App.js

@@ -9,7 +9,7 @@ import "./Landing.css";
 export default function Landing() {
   const params = new URLSearchParams({
     client_id: DISCORD_CLIENT_ID,
-    redirect_uri: LOCATION + "/auth/discord",
+    redirect_uri: LOCATION + "/verify/discord",
     scope: "identify connections",
     response_type: "code",
     prompt: IS_LOCAL ? "none" : "consent", // Save some time clicking authorize :)
@@ -20,7 +20,6 @@ export default function Landing() {
   return (
     <>
       <img className="icon" src={SiteIcon} alt="AchievementHunting.com Icon" />
-      <div className="divider" />
       <p>Sign in with Discord in order to start verifying ownership of your gaming accounts.</p>
       <p>You will be prompted to verify the platforms you play games on.</p>
       <div className="login">

src/Callback.js

@@ -0,0 +1,25 @@
+.privacy-wrapper {
+  max-width: 40em;
+  display: block;
+  margin: 0 auto;
+}
+
+.privacy {
+  max-width: 100%;
+}
+
+.continue {
+  padding-top: 1em;
+  padding-bottom: 1em;
+  text-align: center;
+}
+
+.continue button {
+  border: none;
+  background: none;
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: large;
+  padding: 0;
+  color: #8bd;
+}