Implement login state in website

website/codegen.yml

@@ -1,6 +1,7 @@
 schema: http://localhost:3000/api/website/graphql
 documents:
   - src/graphql/queries/get-prompt-info.ts
+  - src/graphql/queries/get-login-state.ts
   - src/graphql/mutations/login.ts
   - src/graphql/mutations/set-symbol.ts
   - src/graphql/mutations/create-user.ts

website/src/graphql/generated.ts

@@ -18,6 +18,7 @@ export type Scalars = {
 export type Query = {
   __typename?: 'Query';
   promptInfo: PromptInfo;
+  loginState: Maybe<LoginState>;
 };
 
 export type QueryPromptInfoArgs = {
@@ -55,6 +56,13 @@ export type GitHubUser = {
   url: Scalars['String'];
 };
 
+export type LoginState = {
+  __typename?: 'LoginState';
+  name: Maybe<Scalars['String']>;
+  login: Scalars['String'];
+  avatarUrl: Scalars['String'];
+};
+
 export type Mutation = {
   __typename?: 'Mutation';
   createUser: CreateUserResult;
@@ -148,6 +156,16 @@ export type SetSymbolMutation = (
   ); }
 );
 
+export type GetLoginStateQueryVariables = Exact<{ [key: string]: never }>;
+
+export type GetLoginStateQuery = (
+  { __typename?: 'Query' }
+  & { loginState: Maybe<(
+    { __typename?: 'LoginState' }
+    & Pick<LoginState, 'name' | 'avatarUrl' | 'login'>
+  )>; }
+);
+
 export type GetPromptInfoQueryVariables = Exact<{
   promptId: Scalars['String'];
 }>;
@@ -199,6 +217,15 @@ export const SetSymbolDocument = gql`
   }
 }
     `;
+export const GetLoginStateDocument = gql`
+    query GetLoginState {
+  loginState {
+    name
+    avatarUrl
+    login
+  }
+}
+    `;
 export const GetPromptInfoDocument = gql`
     query GetPromptInfo($promptId: String!) {
   promptInfo(promptId: $promptId) {
@@ -235,6 +262,9 @@ export function getSdk(client: GraphQLClient, withWrapper: SdkFunctionWrapper =
     SetSymbol(variables: SetSymbolMutationVariables, requestHeaders?: Headers): Promise<SetSymbolMutation> {
       return withWrapper(() => client.request<SetSymbolMutation>(print(SetSymbolDocument), variables, requestHeaders));
     },
+    GetLoginState(variables?: GetLoginStateQueryVariables, requestHeaders?: Headers): Promise<GetLoginStateQuery> {
+      return withWrapper(() => client.request<GetLoginStateQuery>(print(GetLoginStateDocument), variables, requestHeaders));
+    },
     GetPromptInfo(variables: GetPromptInfoQueryVariables, requestHeaders?: Headers): Promise<GetPromptInfoQuery> {
       return withWrapper(() => client.request<GetPromptInfoQuery>(print(GetPromptInfoDocument), variables, requestHeaders));
     },

website/src/graphql/queries/get-login-state.ts

@@ -0,0 +1,9 @@
+import gql from 'graphql-tag';
+
+export default gql`query GetLoginState {
+  loginState {
+    name
+    avatarUrl
+    login
+  }
+}`;

website/src/pages/developer/app.vue

@@ -1,15 +1,23 @@
 <template>
-<!--  <v-app>-->
-<!--    <v-app-bar app color="primary" dark>-->
-<!--      <v-app-bar-title>Developer</v-app-bar-title>-->
-<!--      <v-spacer />-->
-<!--      <v-btn icon>-->
-<!--        <v-icon>mdi-account</v-icon>-->
-<!--      </v-btn>-->
-<!--    </v-app-bar>-->
-<!--    <router-view />-->
-<!--  </v-app>-->
-  <developer-signed-out />
+  <v-app v-if="loginStateLoading">
+    <v-container class="d-flex align-center justify-center fill-height">
+      <v-progress-circular indeterminate color="primary" :size="96" />
+    </v-container>
+  </v-app>
+  <developer-signed-out v-else-if="loginState === null" />
+  <v-app v-else>
+    <v-app-bar app color="primary" dark>
+      <v-app-bar-title>Developer</v-app-bar-title>
+      <v-spacer />
+      <v-app-bar-title>
+        {{ loginState.name }} | {{ loginState.login }}
+      </v-app-bar-title>
+      <v-btn icon>
+        <v-img :src="loginState.avatarUrl" :width="48" />
+      </v-btn>
+    </v-app-bar>
+    <router-view />
+  </v-app>
 </template>
 
 <style lang="scss">
@@ -25,12 +33,21 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import DeveloperSignedOut from '@/pages/developer/views/signed-out.vue';
+import { LoginState } from '@/graphql/generated';
+import { sdk } from '@/pages/authenticate-prompt/sdk';
 
 @Component({
   name: 'DeveloperApp',
   components: { DeveloperSignedOut },
 })
 export default class DeveloperApp extends Vue {
+  loginStateLoading = true;
 
+  loginState: LoginState | null = null;
+
+  async created() {
+    this.loginState = (await sdk.GetLoginState()).loginState;
+    this.loginStateLoading = false;
+  }
 }
 </script>