- Click to add ID to Apple Wallet
+ {
Your Treehacks ID will be used for check-in and meals! Make sure you
have this QR code available before arriving!
-
+
);
}
diff --git a/src/art/add_to_apple_wallet.svg b/src/art/add_to_apple_wallet.svg
new file mode 100644
index 00000000..6084d20b
--- /dev/null
+++ b/src/art/add_to_apple_wallet.svg
@@ -0,0 +1,259 @@
+
+
+
From a7ac096c877247f7ea4ddafc9eec78ec910a9331 Mon Sep 17 00:00:00 2001
From: Sabrina <59457991+syenko@users.noreply.github.com>
Date: Tue, 24 Dec 2024 20:43:03 -1000
Subject: [PATCH 03/10] Add web version of QR code
---
package-lock.json | 26 ++++++++++++++++++++++++++
package.json | 1 +
src/Id/Id.tsx | 3 ++-
3 files changed, 29 insertions(+), 1 deletion(-)
diff --git a/package-lock.json b/package-lock.json
index e0467abc..c01aa2e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15264,6 +15264,32 @@
}
}
},
+ "react-qr-code": {
+ "version": "2.0.15",
+ "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.15.tgz",
+ "integrity": "sha512-MkZcjEXqVKqXEIMVE0mbcGgDpkfSdd8zhuzXEl9QzYeNcw8Hq2oVIzDLWuZN2PQBwM5PWjc2S31K8Q1UbcFMfw==",
+ "requires": {
+ "prop-types": "^15.8.1",
+ "qr.js": "0.0.0"
+ },
+ "dependencies": {
+ "prop-types": {
+ "version": "15.8.1",
+ "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+ "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+ "requires": {
+ "loose-envify": "^1.4.0",
+ "object-assign": "^4.1.1",
+ "react-is": "^16.13.1"
+ }
+ },
+ "react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ }
+ }
+ },
"react-redux": {
"version": "5.0.7",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz",
diff --git a/package.json b/package.json
index eea15c70..4ff4e0a2 100644
--- a/package.json
+++ b/package.json
@@ -126,6 +126,7 @@
"react-jsonschema-form": "^1.8.0",
"react-jsonschema-form-extras": "^0.9.28",
"react-linkify": "^1.0.0-alpha",
+ "react-qr-code": "^2.0.15",
"react-redux": "^5.0.7",
"react-responsive-modal": "^3.5.1",
"react-router": "^4.3.1",
diff --git a/src/Id/Id.tsx b/src/Id/Id.tsx
index 09429d65..d0b1bdd6 100644
--- a/src/Id/Id.tsx
+++ b/src/Id/Id.tsx
@@ -2,6 +2,7 @@ import React from "react";
import "./Id.scss";
import { connect } from "react-redux";
import Loading from "../Loading/Loading";
+import QRCode from "react-qr-code";
import { IIDProps } from "./types";
import { loadData, getUserProfile } from "../store/form/actions";
import API from "@aws-amplify/api";
@@ -70,7 +71,7 @@ export class ID extends React.Component
+
+ Your Treehacks ID will be used for check-in and meals! Make sure you
+ have this QR code available before arriving!
+
+ QR CODE PLACEHOLDER
+
+ 
+
+ QR CODE PLACEHOLDER
+
-
+
+ ![]()
Date: Wed, 8 Jan 2025 23:56:33 -0800
Subject: [PATCH 05/10] Add Google Wallet integration
---
backend/index.ts | 14 ++++++----
backend/routes/digital_id.ts | 20 ++++++++++++++
src/Id/Id.scss | 13 +++++++--
src/Id/Id.tsx | 46 +++++++++++++++++++++++++++-----
src/art/add_to_google_wallet.svg | 16 +++++++++++
5 files changed, 95 insertions(+), 14 deletions(-)
create mode 100644 src/art/add_to_google_wallet.svg
diff --git a/backend/index.ts b/backend/index.ts
index 2b3b35be..47816d45 100644
--- a/backend/index.ts
+++ b/backend/index.ts
@@ -82,7 +82,7 @@ import {
leaveTeam,
getUserTeamData,
} from "./routes/teams";
-import {getDigitalId} from "./routes/digital_id";
+import {getDigitalId, getDigitalGoogleId} from "./routes/digital_id";
import {
uploadSponsorLogo,
updateSponsor,
@@ -149,10 +149,6 @@ apiRouter.get("/users/:userId/contact", [anonymousRoute], userContact);
apiRouter.get("/leaderboard", [anonymousRoute], leaderboard);
apiRouter.post("/mentor_create", [anonymousRoute], mentorCreate);
apiRouter.post("/sponsor/admin", createAdmin);
-apiRouter.get(
- "/users/:userId/:fullName/getDigitalID",
- getDigitalId
-);
apiRouter.use("/", authenticatedRoute);
@@ -195,6 +191,14 @@ authenticatedRoute.get("/users/:userId/forms/workshop_info", getWorkshopList);
authenticatedRoute.put("/users/:userId/forms/workshop_info", setWorkshopList);
authenticatedRoute.put("/users/:userId/forms/add_teammate", addTeammate);
authenticatedRoute.put("/users/:userId/forms/remove_teammate", removeTeammate);
+authenticatedRoute.get(
+ "/users/:userId/:fullName/getDigitalID",
+ getDigitalId
+);
+authenticatedRoute.get(
+ "/users/:userId/:fullName/getGoogleID",
+ getDigitalGoogleId
+);
// What permission should this one be?
authenticatedRoute.get("/users/:userId/status", getApplicationStatus);
diff --git a/backend/routes/digital_id.ts b/backend/routes/digital_id.ts
index 47c0ac52..bed502ba 100644
--- a/backend/routes/digital_id.ts
+++ b/backend/routes/digital_id.ts
@@ -34,3 +34,23 @@ export async function getDigitalId(req: Request, res: Response) {
content: base64Data,
});
}
+
+export async function getDigitalGoogleId(req: Request, res: Response) {
+ const baseDomain: string = process.env.ID_URL; // TODO: adjust based on env value
+ const token = generateToken(req.params.userId, req.params.fullName);
+ const response = await fetch(baseDomain + "/googlePass/" + token, {
+ method: "GET",
+ });
+
+ if (!response.ok) {
+ return res.status(response.status).json({
+ error: "Failed to generate digital ID",
+ details: await response.text(),
+ });
+ }
+
+ const data = await response.json();
+ return res.status(200).json({
+ content: data.url,
+ });
+}
diff --git a/src/Id/Id.scss b/src/Id/Id.scss
index 27157be4..73f9a055 100644
--- a/src/Id/Id.scss
+++ b/src/Id/Id.scss
@@ -1,7 +1,16 @@
@import "../Global.scss";
-#apple-wallet {
+.wallet-holder {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.wallet-btn {
cursor: pointer;
+ height: 50px;
}
#id-box {
@@ -9,5 +18,5 @@
}
.qr-container {
- padding: 20px;
+ padding: 50px 20px;
}
diff --git a/src/Id/Id.tsx b/src/Id/Id.tsx
index 55847d82..fbfb4068 100644
--- a/src/Id/Id.tsx
+++ b/src/Id/Id.tsx
@@ -8,6 +8,7 @@ import { loadData, getUserProfile } from "../store/form/actions";
import API from "@aws-amplify/api";
const appleWalletButton = require("../art/add_to_apple_wallet.svg") as string;
+const googleWalletButton = require("../art/add_to_google_wallet.svg") as string;
const mapStateToProps = (state) => ({
...state.form,
@@ -24,7 +25,7 @@ export class ID extends React.Component {
constructor(props) {
super(props);
this.getID = this.getID.bind(this);
- console.log(this.props);
+ this.getGoogleID = this.getGoogleID.bind(this);
}
async getID() {
@@ -57,6 +58,28 @@ export class ID extends React.Component {
URL.revokeObjectURL(url); // Clean up the Object URL
}
+ async getGoogleID() {
+ const res = await API.get(
+ "treehacks",
+ "/users/" +
+ this.props.profile.user.id +
+ "/" +
+ this.props.profile.forms.application_info.full_name +
+ "/getGoogleID",
+ {}
+ );
+
+ // trigger file download
+ const url = res.content;
+ const link = document.createElement("a");
+ link.href = url;
+ link.target = "_blank";
+ document.body.appendChild(link); // Required for Firefox
+ link.click();
+ document.body.removeChild(link);
+ URL.revokeObjectURL(url); // Clean up the Object URL
+ }
+
render(): React.ReactNode {
return (
Your Treehacks ID will be used for check-in and meals! Make sure you
have this QR code available before arriving!
-
+
{
diff --git a/src/art/add_to_google_wallet.svg b/src/art/add_to_google_wallet.svg
new file mode 100644
index 00000000..9fc86837
--- /dev/null
+++ b/src/art/add_to_google_wallet.svg
@@ -0,0 +1,16 @@
+
From f24de0cc315e773de890c83151a6d3ef3ffa369d Mon Sep 17 00:00:00 2001
From: Sabrina <59457991+syenko@users.noreply.github.com>
Date: Thu, 9 Jan 2025 16:09:18 -0800
Subject: [PATCH 06/10] Add ID to dashboard (Admitted Stanford page)
---
src/Dashboard/AdmittedStanford.tsx | 2 ++
src/Id/Id.scss | 33 +++++++++++++++++--
src/Id/Id.tsx | 51 ++++++++++++++----------------
3 files changed, 57 insertions(+), 29 deletions(-)
diff --git a/src/Dashboard/AdmittedStanford.tsx b/src/Dashboard/AdmittedStanford.tsx
index b046fe87..390c7933 100644
--- a/src/Dashboard/AdmittedStanford.tsx
+++ b/src/Dashboard/AdmittedStanford.tsx
@@ -4,6 +4,7 @@ import { HACKATHON_YEAR, HACKATHON_DATE_RANGE } from "../constants";
import { confirmAdmission, declineAdmission } from "../store/form/actions";
import { Link } from "react-router-dom";
import moment from "moment-timezone";
+import Id from "../Id/Id";
interface IAdmittedScreenProps {
confirmAdmission: () => void;
@@ -20,6 +21,7 @@ export const AdmittedScreen = (props: IAdmittedScreenProps) => (
Keep an eye on your inbox in the coming weeks -- we'll be sending more
details to you shortly!
+
-
+
+
+
+
+
+ 
+