feat: первое подключение фронтенда

frontend/src/views/auth/AuthCallbackView.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+const message = ref('Завершаем вход через Microsoft...')
+
+onMounted(async () => {
+  const code = typeof route.query.code === 'string' ? route.query.code : ''
+  const state = typeof route.query.state === 'string' ? route.query.state : null
+  const error = typeof route.query.error_description === 'string' ? route.query.error_description : ''
+  const hashParams = new URLSearchParams(window.location.hash.replace(/^#/, ''))
+  const accessToken = hashParams.get('access_token')
+
+  try {
+    if (error) throw new Error(error)
+    if (accessToken) await auth.completeTokenLogin(accessToken)
+    else if (code) await auth.completeMicrosoftLogin(code, state)
+    else throw new Error('Microsoft не вернул токен авторизации.')
+
+    window.history.replaceState({}, document.title, window.location.pathname)
+    const role = auth.user?.role
+    if (role === 'teacher') await router.replace('/teacher')
+    else if (role === 'admin') await router.replace('/admin')
+    else await router.replace('/')
+  } catch (err) {
+    message.value = err instanceof Error ? err.message : 'Не удалось завершить авторизацию.'
+    window.setTimeout(() => router.replace({ path: '/login', query: { error: message.value } }), 1600)
+  }
+})
+</script>
+
+<template>
+  <div class="callback-bg">
+    <div class="callback-card">
+      <div class="spinner"></div>
+      <h1>Вход в UniVerse</h1>
+      <p>{{ message }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.callback-bg {
+  min-height: 100vh;
+  background: var(--gradient-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+.callback-card {
+  width: min(420px, 100%);
+  background: rgba(255,255,255,0.86);
+  border: 1px solid var(--color-border-glass);
+  border-radius: var(--radius-lg);
+  padding: 32px;
+  text-align: center;
+  box-shadow: 0 24px 70px rgba(0,0,0,0.12);
+}
+.spinner { margin: 0 auto 16px; }
+h1 { font-size: 24px; margin: 0 0 8px; }
+p { color: var(--color-text-secondary); margin: 0; }
+</style>

frontend/src/views/auth/LoginView.vue

@@ -1,34 +1,21 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
-import type { UserRole } from '@/types'
 
 const auth = useAuthStore()
-const router = useRouter()
+const route = useRoute()
 const error = ref('')
 const loading = ref(false)
-const selectedRole = ref<UserRole>('student')
-const simulateError = ref(false)
 
-const roleOptions: Array<{ label: string; role: UserRole }> = [
-  { label: '🎓 Студент', role: 'student' },
-  { label: '👩‍🏫 Преподаватель', role: 'teacher' },
-  { label: '🛡️ Администратор', role: 'admin' },
-]
+if (typeof route.query.error === 'string') error.value = route.query.error
 
 async function login() {
   loading.value = true
   error.value = ''
-  const ok = await auth.login(selectedRole.value, simulateError.value)
+  const ok = auth.startMicrosoftLogin()
   loading.value = false
-  if (ok) {
-    if (selectedRole.value === 'teacher') router.push('/teacher')
-    else if (selectedRole.value === 'admin') router.push('/admin')
-    else router.push('/')
-  } else {
-    error.value = auth.error ?? 'Ошибка авторизации. Проверьте доступ и попробуйте снова.'
-  }
+  if (!ok) error.value = auth.error ?? 'Не удалось начать вход через Microsoft.'
 }
 </script>
 
@@ -46,21 +33,6 @@ async function login() {
         Получайте рекомендации, оставляйте отзывы и зарабатывайте монеты за полезную обратную связь.
       </div>
 
-      <div class="role-select">
-        <p class="demo-label">Роль для демонстрации:</p>
-        <div class="role-options">
-          <button
-            v-for="opt in roleOptions"
-            :key="opt.role"
-            class="role-option"
-            :class="{ active: selectedRole === opt.role }"
-            @click="selectedRole = opt.role"
-          >
-            {{ opt.label }}
-          </button>
-        </div>
-      </div>
-
       <div class="login-actions">
         <button class="btn-primary btn-full" type="button" :disabled="loading" @click="login">
           <span v-if="loading" class="spinner-inline">
@@ -68,10 +40,6 @@ async function login() {
           </span>
           {{ loading ? 'Вход...' : 'Войти через ЮФУ (Microsoft Entra ID)' }}
         </button>
-        <label class="toggle">
-          <input type="checkbox" v-model="simulateError" />
-          Показать ошибку авторизации
-        </label>
         <div class="error" v-if="error">⚠️ {{ error }}</div>
       </div>
 
@@ -125,39 +93,8 @@ async function login() {
   padding: 14px 16px;
   border: 1px solid var(--color-border-glass);
 }
-.demo-label {
-  font-size: 12px;
-  color: var(--color-text-secondary);
-  font-weight: 600;
-  text-transform: uppercase;
-  margin-bottom: 8px;
-}
-.role-options { display: flex; flex-wrap: wrap; gap: 8px; }
-.role-option {
-  background: rgba(255,255,255,0.6);
-  border: 1px solid var(--color-border-glass);
-  border-radius: var(--radius-sm);
-  padding: 8px 12px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-  color: var(--color-text);
-}
-.role-option.active {
-  border-color: var(--color-primary);
-  background: rgba(34,197,94,0.12);
-  color: var(--color-primary-dark);
-}
 .login-actions { display: flex; flex-direction: column; gap: 10px; }
 .btn-full { width: 100%; justify-content: center; }
-.toggle {
-  font-size: 12px;
-  color: var(--color-text-secondary);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
 .error {
   font-size: 13px;
   color: var(--color-error);