Added replaceStudantPassword view

web/src/components/CreateTokenForm.vue

@@ -1,8 +1,7 @@
 <template>
   <v-card :loading="loading" flat outlined class="light-shadow">
-    <v-card-title class="font-weight-light display-1 mb-2">
-      Criar token
-    </v-card-title>
+    <v-card-title class="font-weight-light mb-1"> Criar token </v-card-title>
+    <v-divider />
     <v-card-text>
       <UserSelect v-model="user" students />
     </v-card-text>

web/src/components/ReplacePasswordForm.vue

@@ -1,11 +1,11 @@
 <template>
   <v-card :loading="loading" flat outlined class="light-shadow">
-    <v-card-title class="font-weight-light display-1 mb-2">
-      Alterar uma senha
+    <v-card-title class="font-weight-light mb-1">
+      Alterar senha de {{ studentsOnly ? 'estudante' : 'usuário' }}
     </v-card-title>
-
+    <v-divider />
     <v-card-text>
-      <UserSelect v-model="username" />
+      <UserSelect v-model="username" :students="studentsOnly" />
 
       <NewPasswordFields v-model="newPassword" :suggestion="suggestion" />
 
@@ -28,7 +28,7 @@
         :disabled="!username || !newPassword"
         color="primary"
         large
-        @click="onReplacePassword"
+        @click="$emit('submit', { username, newPassword })"
       >
         Trocar a senha
       </v-btn>
@@ -37,21 +37,34 @@
 </template>
 
 <script>
-import gql from 'graphql-tag'
 import UserSelect from './UserSelect'
 import NewPasswordFields from './NewPasswordFields'
+
 export default {
   name: 'ReplacePasswordForm',
+
   components: {
     NewPasswordFields,
     UserSelect
   },
+  props: {
+    studentsOnly: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    errors: {
+      type: Array,
+      default: () => []
+    }
+  },
   data: () => ({
     username: null,
     newPassword: '',
-    suggestion: '',
-    loading: false,
-    errors: []
+    suggestion: ''
   }),
   methods: {
     generatePassword() {
@@ -60,37 +73,6 @@ export default {
 
     defaultPassword() {
       this.suggestion = `ifms.${this.username}`
-    },
-
-    async onReplacePassword() {
-      this.loading = true
-
-      try {
-        await this.$apollo.mutate({
-          mutation: gql`
-            mutation ($username: String!, $newPassword: String!) {
-              replacePassword(
-                data: { username: $username, newPassword: $newPassword }
-              )
-            }
-          `,
-          variables: {
-            username: this.username,
-            newPassword: this.newPassword
-          }
-        })
-
-        await this.$router.push({
-          name: 'home',
-          params: {
-            message: `A senha do usuário ${this.username} foi alterada!`
-          }
-        })
-      } catch (e) {
-        this.errors = e.graphQLErrors.map(e => e.message)
-      } finally {
-        this.loading = false
-      }
     }
   }
 }

web/src/mixins/Nav.js

@@ -41,6 +41,12 @@ export default {
             route: { name: 'user-presence' },
             role: 'watcher'
           },
+          {
+            title: 'Senha de estudante',
+            icon: 'mdi-account-key',
+            route: { name: 'replace-student-password' },
+            role: 'tokenCreator'
+          },
           {
             title: 'Criar token',
             icon: 'mdi-qrcode',

web/src/router/index.js

@@ -100,6 +100,19 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "create-token" */ '../views/CreateToken.vue')
   },
+  {
+    path: '/replace-student-password',
+    name: 'replace-student-password',
+    meta: {
+      title: 'Redefinir uma senha de estudante',
+
+      roles: ['tokenCreator']
+    },
+    component: () =>
+      import(
+        /* webpackChunkName: "replace-student-password" */ '../views/ReplaceStudentPassword.vue'
+      )
+  },
   {
     path: '/use-token',
     name: 'use-token',

web/src/views/ReplacePassword.vue

@@ -2,17 +2,59 @@
   <v-container style="height: 90vh" fluid>
     <v-row class="fill-height" justify="center">
       <v-col style="max-width: 480px">
-        <ReplacePasswordForm />
+        <ReplacePasswordForm
+          :errors="errors"
+          :loading="loading"
+          @submit="onSubmit"
+        />
       </v-col>
     </v-row>
   </v-container>
 </template>
 
 <script>
+import gql from 'graphql-tag'
 import ReplacePasswordForm from '../components/ReplacePasswordForm'
+
 export default {
   name: 'ReplacePassword',
-  components: { ReplacePasswordForm }
+  components: { ReplacePasswordForm },
+  data: () => ({
+    loading: false,
+    errors: []
+  }),
+  methods: {
+    async onSubmit({ username, newPassword }) {
+      this.loading = true
+
+      try {
+        await this.$apollo.mutate({
+          mutation: gql`
+            mutation ($username: String!, $newPassword: String!) {
+              replacePassword(
+                data: { username: $username, newPassword: $newPassword }
+              )
+            }
+          `,
+          variables: {
+            username,
+            newPassword
+          }
+        })
+
+        await this.$router.push({
+          name: 'home',
+          params: {
+            message: `A senha do usuário ${username} foi alterada!`
+          }
+        })
+      } catch (e) {
+        this.errors = e.graphQLErrors.map(e => e.message)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
 }
 </script>
 

web/src/views/ReplaceStudentPassword.vue

@@ -0,0 +1,75 @@
+<template>
+  <v-container style="height: 90vh" fluid>
+    <v-alert
+      :value="true"
+      type="info"
+      icon="mdi-alert-circle"
+      dismissible
+      outlined
+    >
+      ATENÇÃO! Você está alterando a senha de um aluno diretamente! Se possível,
+      dê preferência ao uso do
+      <router-link class="text--secondary" to="create-token">
+        token de redefinição de senha</router-link
+      >.
+    </v-alert>
+    <v-row class="fill-height" justify="center">
+      <v-col style="max-width: 480px">
+        <ReplacePasswordForm
+          students-only
+          :errors="errors"
+          :loading="loading"
+          @submit="onSubmit"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+import ReplacePasswordForm from '../components/ReplacePasswordForm'
+
+export default {
+  name: 'ReplacePassword',
+  components: { ReplacePasswordForm },
+  data: () => ({
+    loading: false,
+    errors: []
+  }),
+  methods: {
+    async onSubmit({ username, newPassword }) {
+      this.loading = true
+
+      try {
+        await this.$apollo.mutate({
+          mutation: gql`
+            mutation ($username: String!, $newPassword: String!) {
+              replaceStudentPassword(
+                data: { username: $username, newPassword: $newPassword }
+              )
+            }
+          `,
+          variables: {
+            username,
+            newPassword
+          }
+        })
+
+        await this.$router.push({
+          name: 'home',
+          params: {
+            message: `A senha do aluno ${username} foi alterada!`
+          }
+        })
+      } catch (e) {
+        this.errors = e.graphQLErrors.map(e => e.message)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped></style>