@vue-skuilder/common-ui 0.1.1

package/src/components/StudySessionTimer.vue

@@ -0,0 +1,121 @@
+<!-- @vue-skuilder/common-ui/src/components/StudySessionTimer.vue -->
+<template>
+  <v-tooltip location="right" :open-delay="0" :close-delay="200" color="secondary" class="text-subtitle-1">
+    <template #activator="{ props }">
+      <div class="timer-container" v-bind="props" @mouseenter="hovered = true" @mouseleave="hovered = false">
+        <v-progress-circular
+          alt="Time remaining in study session"
+          size="64"
+          width="8"
+          rotate="0"
+          :color="timerColor"
+          :model-value="percentageRemaining"
+        >
+          <v-btn
+            v-if="timeRemaining > 0 && hovered"
+            icon
+            color="transparent"
+            location="bottom left"
+            @click="addSessionTime"
+          >
+            <v-icon size="large">mdi-plus</v-icon>
+          </v-btn>
+        </v-progress-circular>
+      </div>
+    </template>
+    {{ formattedTimeRemaining }}
+  </v-tooltip>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, ref } from 'vue';
+
+export default defineComponent({
+  name: 'StudySessionTimer',
+
+  props: {
+    /**
+     * Time remaining in seconds
+     */
+    timeRemaining: {
+      type: Number,
+      required: true,
+    },
+    /**
+     * Total session time limit in minutes
+     */
+    sessionTimeLimit: {
+      type: Number,
+      required: true,
+      default: 5,
+    },
+  },
+
+  emits: ['add-time'],
+
+  setup(props, { emit }) {
+    const hovered = ref(false);
+
+    /**
+     * Formats the time remaining into a readable string
+     */
+    const formattedTimeRemaining = computed(() => {
+      let timeString = '';
+      const seconds = props.timeRemaining;
+
+      if (seconds > 60) {
+        timeString = Math.floor(seconds / 60).toString() + ':';
+      }
+
+      const secondsRemaining = seconds % 60;
+      timeString += secondsRemaining >= 10 ? secondsRemaining : '0' + secondsRemaining;
+
+      if (seconds <= 60) {
+        timeString += ' seconds';
+      }
+
+      timeString += ' left!';
+
+      return timeString;
+    });
+
+    /**
+     * Calculates the percentage of time remaining for the progress indicator
+     */
+    const percentageRemaining = computed(() => {
+      return props.timeRemaining > 60
+        ? 100 * (props.timeRemaining / (60 * props.sessionTimeLimit))
+        : 100 * (props.timeRemaining / 60);
+    });
+
+    /**
+     * Determines the color of the timer based on time remaining
+     */
+    const timerColor = computed(() => {
+      return props.timeRemaining > 60 ? 'primary' : 'orange darken-3';
+    });
+
+    /**
+     * Handles adding time to the session
+     */
+    const addSessionTime = () => {
+      emit('add-time');
+    };
+
+    return {
+      hovered,
+      formattedTimeRemaining,
+      percentageRemaining,
+      timerColor,
+      addSessionTime,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.timer-container {
+  display: inline-flex;
+  cursor: pointer;
+}
+</style>

package/src/components/auth/UserChip.vue

@@ -0,0 +1,106 @@
+<template>
+  <v-badge :content="items.length" :model-value="hasNewItems" color="accent" location="end top">
+    <v-menu location="bottom end" transition="scale-transition">
+      <template #activator="{ props }">
+        <v-chip v-bind="props" class="ma-2">
+          <v-avatar start class="bg-primary">
+            <v-icon>mdi-school</v-icon>
+          </v-avatar>
+          {{ username }}
+        </v-chip>
+      </template>
+
+      <v-list>
+        <v-list-item v-for="item in items" :key="item" @click="dismiss(item)">
+          <v-list-item-title>{{ item }}</v-list-item-title>
+        </v-list-item>
+
+        <v-divider v-if="items.length" />
+
+        <v-list-item @click="gotoStats">
+          <template #prepend>
+            <v-icon>mdi-trending-up</v-icon>
+          </template>
+          <v-list-item-title>Stats</v-list-item-title>
+        </v-list-item>
+
+        <v-list-item @click="gotoSettings">
+          <template #prepend>
+            <v-icon>mdi-cog</v-icon>
+          </template>
+          <v-list-item-title>Settings</v-list-item-title>
+        </v-list-item>
+
+        <v-list-item @click="logout">
+          <template #prepend>
+            <v-icon>mdi-logout</v-icon>
+          </template>
+          <v-list-item-title>Log out</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </v-badge>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { getCurrentUser, useAuthStore } from '../../stores/useAuthStore';
+import { useConfigStore } from '../../stores/useConfigStore';
+
+export default defineComponent({
+  name: 'UserChip',
+
+  data() {
+    return {
+      username: '',
+      items: [] as string[],
+      checked: false,
+      authStore: useAuthStore(),
+      configStore: useConfigStore(),
+    };
+  },
+
+  computed: {
+    hasNewItems(): boolean {
+      return this.items.length > 0;
+    },
+  },
+
+  created() {
+    getCurrentUser().then((u) => {
+      this.username = u.getUsername();
+    });
+  },
+
+  methods: {
+    async gotoSettings() {
+      this.$router.push(`/u/${(await getCurrentUser()).getUsername()}`);
+    },
+
+    async gotoStats() {
+      this.$router.push(`/u/${(await getCurrentUser()).getUsername()}/stats`);
+    },
+
+    dismiss(item: string) {
+      const index = this.items.indexOf(item);
+      this.items.splice(index, 1);
+    },
+
+    async logout() {
+      const res = await this.authStore._user!.logout();
+      if (res.ok) {
+        this.authStore.loginAndRegistration = {
+          init: true,
+          loggedIn: false,
+          regDialogOpen: false,
+          loginDialogOpen: false,
+        };
+
+        this.configStore.resetDefaults();
+
+        this.$router.push('/home');
+      }
+    },
+  },
+});
+</script>

package/src/components/auth/UserLogin.vue

@@ -0,0 +1,141 @@
+<template>
+  <v-card>
+    <v-card-title v-if="!loginRoute" class="text-h5 bg-grey-lighten-2">Log In</v-card-title>
+
+    <v-card-text>
+      <v-form onsubmit="return false;" @submit.prevent="login">
+        <v-text-field
+          id=""
+          v-model="username"
+          autofocus
+          name="username"
+          label="Username"
+          prepend-icon="mdi-account-circle"
+        ></v-text-field>
+        <v-text-field
+          v-model="password"
+          prepend-icon="mdi-lock"
+          name="password"
+          hover="Show password input"
+          label="Enter your password"
+          hint=""
+          min="0"
+          :append-icon="passwordVisible ? 'mdi-eye-off' : 'mdi-eye'"
+          :type="passwordVisible ? 'text' : 'password'"
+          @click:append="() => (passwordVisible = !passwordVisible)"
+        ></v-text-field>
+
+        <v-snackbar v-model="badLoginAttempt" location="bottom right" :timeout="errorTimeout">
+          Username or password was incorrect.
+          <v-btn color="pink" variant="text" @click="badLoginAttempt = false">Close</v-btn>
+        </v-snackbar>
+
+        <v-btn class="mr-2" type="submit" :loading="awaitingResponse" :color="buttonStatus.color">
+          <v-icon start>mdi-lock-open</v-icon>
+          Log In
+        </v-btn>
+        <router-link v-if="loginRoute" to="signup">
+          <v-btn variant="text">Create New Account</v-btn>
+        </router-link>
+        <v-btn v-else variant="text" @click="toggle">Create New Account</v-btn>
+      </v-form>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { alertUser } from '../SnackbarService';
+import { log } from '@vue-skuilder/common';
+import { Status } from '@vue-skuilder/common';
+import { User } from '@vue-skuilder/db';
+import { getCurrentUser, useAuthStore } from '../../stores/useAuthStore';
+import { useConfigStore } from '../../stores/useConfigStore';
+
+const router = useRouter();
+const route = useRoute();
+const authStore = useAuthStore();
+const configStore = useConfigStore();
+
+const username = ref('');
+const password = ref('');
+const passwordVisible = ref(false);
+const awaitingResponse = ref(false);
+const badLoginAttempt = ref(false);
+const errorTimeout = ref(7000);
+const user = ref<User | undefined>(undefined);
+
+const loginRoute = computed(() => route.name === 'login');
+
+const buttonStatus = computed(() => ({
+  color: badLoginAttempt.value ? 'error' : 'success',
+  text: badLoginAttempt.value ? 'Try again' : 'Log In',
+}));
+
+const initBadLogin = () => {
+  badLoginAttempt.value = true;
+
+  alertUser({
+    text: 'Username or password was incorrect.',
+    status: Status.error,
+    timeout: errorTimeout.value,
+  });
+  setTimeout(() => {
+    badLoginAttempt.value = false;
+  }, errorTimeout.value);
+};
+
+const login = async () => {
+  awaitingResponse.value = true;
+  log('Starting login attempt');
+  log(`Login attempt for username: ${username.value}`);
+
+  try {
+    log('Attempting to get User instance');
+    // #172 starting point - why is the pre-existing _user being referenced here?
+    user.value = await getCurrentUser();
+    log('Got User instance, attempting login');
+
+    await user.value.login(username.value, password.value);
+    log('Login successful');
+
+    // load user config
+    log('Initializing user config');
+    configStore.init();
+    log('User config initialized');
+
+    // set login state
+    log('Setting authentication state');
+    authStore.loginAndRegistration.loggedIn = true;
+    log('Authentication state set, redirecting to study page');
+    router.push('/study');
+    log('Login and redirect complete');
+  } catch (e) {
+    // entry #186
+    log('Login attempt failed');
+    log(`Login error details: ${JSON.stringify(e)}`);
+    console.log(`login error: ${JSON.stringify(e)}`);
+    // - differentiate response
+    // - return better message to UI
+    log('Initiating bad login feedback');
+    initBadLogin();
+  }
+
+  log('Resetting awaiting response state');
+  awaitingResponse.value = false;
+};
+
+const emit = defineEmits(['toggle']);
+
+const toggle = () => {
+  log('Toggling registration / login forms.');
+  emit('toggle');
+};
+</script>
+
+<style lang="css" scoped>
+.login {
+  max-width: 650px;
+}
+</style>

package/src/components/auth/UserLoginAndRegistrationContainer.vue

@@ -0,0 +1,85 @@
+<template>
+  <transition v-if="userReady && display" name="component-fade" mode="out-in">
+    <div v-if="guestMode">
+      <v-dialog v-model="regDialog" width="500px">
+        <template #activator="{ props }">
+          <v-btn class="mr-2" size="small" color="success" v-bind="props">Sign Up</v-btn>
+        </template>
+        <UserRegistration @toggle="toggle" />
+      </v-dialog>
+      <v-dialog v-model="loginDialog" width="500px">
+        <template #activator="{ props }">
+          <v-btn size="small" color="success" v-bind="props">Log In</v-btn>
+        </template>
+        <UserLogin @toggle="toggle" />
+      </v-dialog>
+    </div>
+    <user-chip v-else />
+  </transition>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import UserLogin from './UserLogin.vue';
+import UserRegistration from './UserRegistration.vue';
+import UserChip from './UserChip.vue';
+import { useAuthStore } from '../../stores/useAuthStore';
+import { GuestUsername } from '@vue-skuilder/db';
+
+const route = useRoute();
+const authStore = useAuthStore();
+
+const display = computed(() => {
+  if (!route.name || typeof route.name !== 'string') {
+    return true;
+  }
+  const routeName = route.name.toLowerCase();
+  return !(routeName === 'login' || routeName === 'signup');
+});
+
+const userReady = computed(() => authStore.onLoadComplete);
+
+const guestMode = computed(() => {
+  if (authStore._user) {
+    return authStore._user.getUsername().startsWith(GuestUsername);
+  }
+  return !authStore.loginAndRegistration.loggedIn;
+});
+
+const regDialog = computed({
+  get: () => authStore.loginAndRegistration.regDialogOpen,
+  set: (value: boolean) => {
+    authStore.loginAndRegistration.regDialogOpen = value;
+  },
+});
+
+const loginDialog = computed({
+  get: () => authStore.loginAndRegistration.loginDialogOpen,
+  set: (value: boolean) => {
+    authStore.loginAndRegistration.loginDialogOpen = value;
+  },
+});
+
+const toggle = () => {
+  if (regDialog.value && loginDialog.value) {
+    throw new Error('Registration / Login dialogs both activated.');
+  } else if (regDialog.value === loginDialog.value) {
+    throw new Error('Registration / Login dialogs toggled while both were dormant.');
+  } else {
+    regDialog.value = !regDialog.value;
+    loginDialog.value = !loginDialog.value;
+  }
+};
+</script>
+
+<style scoped>
+.component-fade-enter-active,
+.component-fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+.component-fade-enter,
+.component-fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/auth/UserRegistration.vue

@@ -0,0 +1,181 @@
+<template>
+  <v-card>
+    <v-card-title v-if="!registrationRoute" class="text-h5 bg-grey-lighten-2"> Create an Account </v-card-title>
+
+    <v-card-text>
+      <v-form @submit.prevent="createUser">
+        <v-text-field
+          id=""
+          ref="userNameTextField"
+          v-model="username"
+          autofocus
+          name="username"
+          label="Choose a Username"
+          prepend-icon="mdi-account-circle"
+          :error="usernameError"
+          :hint="usernameHint"
+          @blur="validateUsername"
+        ></v-text-field>
+        <v-text-field
+          v-model="password"
+          prepend-icon="mdi-lock"
+          name="password"
+          hover="Show password"
+          label="Create a password"
+          hint=""
+          min="4"
+          :append-icon="passwordVisible ? 'mdi-eye-off' : 'mdi-eye'"
+          :type="passwordVisible ? 'text' : 'password'"
+          @click:append="() => (passwordVisible = !passwordVisible)"
+        ></v-text-field>
+        <v-text-field
+          v-model="retypedPassword"
+          prepend-icon="mdi-lock"
+          name="retypedPassword"
+          hover="Show password"
+          label="Retype your password"
+          hint=""
+          min="4"
+          :type="passwordVisible ? 'text' : 'password'"
+        ></v-text-field>
+
+        <!-- <v-checkbox label="Student" v-model="student" ></v-checkbox>
+            <v-checkbox label="Teacher" v-model="teacher" ></v-checkbox>
+            <v-checkbox label="Author" v-model="author" ></v-checkbox> -->
+
+        <v-snackbar v-model="badLoginAttempt" location="bottom right" :timeout="5000">
+          Username or password was incorrect.
+          <v-btn color="pink" variant="text" @click="badLoginAttempt = false"> Close </v-btn>
+        </v-snackbar>
+        <v-btn class="mr-2" type="submit" :loading="awaitingResponse" :color="buttonStatus.color">
+          <v-icon start>mdi-lock-open</v-icon>
+          Create Account
+        </v-btn>
+        <router-link v-if="registrationRoute" to="login">
+          <v-btn variant="text">Log In</v-btn>
+        </router-link>
+        <v-btn v-else variant="text" @click="toggle"> Log In </v-btn>
+      </v-form>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { UserDBInterface } from '@vue-skuilder/db';
+import { alertUser } from '../SnackbarService';
+import { Status, log } from '@vue-skuilder/common';
+import { getCurrentUser, useAuthStore } from '../../stores/useAuthStore';
+
+export default defineComponent({
+  name: 'UserRegistration',
+
+  emits: ['toggle'],
+
+  data() {
+    return {
+      username: '',
+      password: '',
+      retypedPassword: '',
+      passwordVisible: false,
+      usernameValidationInProgress: false,
+      usernameError: false,
+      usernameHint: '',
+      awaitingResponse: false,
+      badLoginAttempt: false,
+      userSecret: '',
+      secret: 'goons',
+      user: null as UserDBInterface | null,
+      roles: ['Student', 'Teacher', 'Author'] as string[],
+      student: true,
+      teacher: false,
+      author: false,
+      authStore: useAuthStore(),
+    };
+  },
+
+  computed: {
+    registrationRoute(): boolean {
+      return typeof this.$route.name === 'string' && this.$route.name.toLowerCase() === 'signup';
+    },
+    buttonStatus() {
+      return {
+        color: this.badLoginAttempt ? 'error' : 'success',
+        text: this.badLoginAttempt ? 'Try again' : 'Log In',
+      };
+    },
+  },
+
+  async created() {
+    this.user = await getCurrentUser();
+  },
+
+  methods: {
+    toggle() {
+      log('Toggling registration / login forms.');
+      this.$emit('toggle');
+    },
+
+    validateUsername() {
+      this.usernameError = false;
+    },
+
+    async createUser() {
+      this.awaitingResponse = true;
+      log(`
+User creation
+-------------
+
+Name: ${this.username}
+Student: ${this.student}
+Teacher: ${this.teacher}
+Author: ${this.author}
+`);
+      if (this.password === this.retypedPassword) {
+        if (!this.user) return;
+
+        this.user
+          .createAccount(this.username, this.password)
+          .then(async (resp) => {
+            if (resp.status === Status.ok) {
+              this.authStore.loginAndRegistration.loggedIn = true;
+              this.authStore.loginAndRegistration.init = false;
+              this.authStore.loginAndRegistration.init = true;
+
+              this.$router.push(`/u/${(await getCurrentUser()).getUsername()}/new`);
+            } else {
+              if (resp.error === 'This username is taken!') {
+                this.usernameError = true;
+                this.usernameHint = 'Try a different name.';
+                (this.$refs.userNameTextField as HTMLInputElement).focus();
+                alertUser({
+                  text: `The name ${this.username} is taken!`,
+                  status: resp.status,
+                });
+              } else {
+                alertUser({
+                  text: resp.error,
+                  status: resp.status,
+                });
+              }
+            }
+          })
+          .catch((e) => {
+            if (e)
+              alertUser({
+                text: JSON.stringify(e),
+                status: Status.error,
+              });
+          });
+        this.awaitingResponse = false;
+      } else {
+        alertUser({
+          text: 'Passwords do not match.',
+          status: Status.error,
+        });
+        this.awaitingResponse = false;
+      }
+    },
+  },
+});
+</script>

package/src/components/auth/index.ts

@@ -0,0 +1,4 @@
+export { default as UserChip } from './UserChip.vue';
+export { default as UserLogin } from './UserLogin.vue';
+export { default as UserRegistration } from './UserRegistration.vue';
+export { default as UserLoginAndRegistrationContainer } from './UserLoginAndRegistrationContainer.vue';