Current user

planetary-social · Oct 23, 2023 · 06862ba · 06862ba
1 parent deb9118
commit 06862ba
Show file tree

Hide file tree

Showing 13 changed files with 129 additions and 10 deletions.
diff --git a/frontend/nos-crossposting-service-frontend/src/assets/checkmark.svg b/frontend/nos-crossposting-service-frontend/src/assets/checkmark.svg
diff --git a/frontend/nos-crossposting-service-frontend/src/assets/logout_on_dark.svg b/frontend/nos-crossposting-service-frontend/src/assets/logout_on_dark.svg
diff --git a/frontend/nos-crossposting-service-frontend/src/assets/logout_on_light.svg b/frontend/nos-crossposting-service-frontend/src/assets/logout_on_light.svg
diff --git a/frontend/nos-crossposting-service-frontend/src/components/CurrentUser.vue b/frontend/nos-crossposting-service-frontend/src/components/CurrentUser.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="current-user">
-    You are logged in as {{ user.accountID }}.
+    <img class="image" :src="user?.twitterProfileImageURL">
+    <div class="name">{{ user.twitterName }}</div>
+    <div class="username">@{{ user.twitterUsername }}</div>
+    <a class="logout-button">
+      <img src="../assets/logout_on_dark.svg">
+    </a>
   </div>
 </template>
 
@@ -19,4 +24,47 @@ export default class CurrentUser extends Vue {
 </script>
 
 <style scoped lang="scss">
+.current-user {
+  margin: 1.5em 0;
+  border-radius: 10px;
+  width: 500px;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: auto;
+  grid-template-areas:
+    "image name logout-button"
+    "image username logout-button";
+  align-items: center;
+
+  border: 3px solid #9379BF;
+  gap: 20px;
+  padding: 20px;
+
+  .image {
+    grid-area: image;
+    border-radius: 75px;
+    height: 75px;
+  }
+
+  .username, .name {
+    font-size: 28px;
+    font-style: normal;
+  }
+
+  .username {
+    grid-area: username;
+    font-weight: 500;
+    color: #9379BF;
+  }
+
+  .name {
+    grid-area: name;
+    font-weight: 700;
+    color: #fff;
+  }
+
+  .logout-button {
+    grid-area: logout-button;
+  }
+}
 </style>
diff --git a/frontend/nos-crossposting-service-frontend/src/dto/User.ts b/frontend/nos-crossposting-service-frontend/src/dto/User.ts
@@ -1,4 +1,7 @@
 export class User {
     accountID?: string;
     twitterID?: number;
+    twitterName?: string;
+    twitterUsername?: string;
+    twitterProfileImageURL?: string;
 }
diff --git a/frontend/nos-crossposting-service-frontend/src/views/HomeView.vue b/frontend/nos-crossposting-service-frontend/src/views/HomeView.vue
@@ -2,15 +2,19 @@
   <div class="home">
     <Explanation/>
 
-    <div class="step">
-      1. Link your X account:
-    </div>
-
     <div v-if="!loading && !user">
+      <div class="step">
+        1. Link your X account:
+      </div>
+
       <LogInWithTwitterButton/>
     </div>
 
     <div v-if="!loading && user">
+      <div class="step">
+        1. Logged in as
+      </div>
+
       <CurrentUser :user="user"/>
     </div>
 

diff --git a/.../ports/http/frontend/css/app.3c9271ec.css → .../ports/http/frontend/css/app.089a72a3.css b/.../ports/http/frontend/css/app.3c9271ec.css → .../ports/http/frontend/css/app.089a72a3.css
diff --git a/service/ports/http/frontend/img/logout_on_dark.2eaec2bd.svg b/service/ports/http/frontend/img/logout_on_dark.2eaec2bd.svg
diff --git a/service/ports/http/frontend/index.html b/service/ports/http/frontend/index.html
@@ -1 +1 @@
-<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>nos-crossposting-service-frontend</title><script defer="defer" src="/js/chunk-vendors.72ad489a.js"></script><script defer="defer" src="/js/app.438c80ff.js"></script><link href="/css/app.3c9271ec.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but nos-crossposting-service-frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
+<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>nos-crossposting-service-frontend</title><script defer="defer" src="/js/chunk-vendors.72ad489a.js"></script><script defer="defer" src="/js/app.f4c2ef83.js"></script><link href="/css/app.089a72a3.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but nos-crossposting-service-frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>nos-crossposting-service-frontend</title><script defer="defer" src="/js/chunk-vendors.72ad489a.js"></script><script defer="defer" src="/js/app.438c80ff.js"></script><link href="/css/app.3c9271ec.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but nos-crossposting-service-frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
		<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>nos-crossposting-service-frontend</title><script defer="defer" src="/js/chunk-vendors.72ad489a.js"></script><script defer="defer" src="/js/app.f4c2ef83.js"></script><link href="/css/app.089a72a3.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but nos-crossposting-service-frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>