txio/frontend/src/components/AuthModal/tabs/SecurityTab.tsx at fix/37-remove-user-debug-log · ghzhost/txio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import React from 'react';
import {
  KeyRound,
  Shield,
  Smartphone,
  Sparkles,
  RefreshCcw
} from 'lucide-react';
import { appStore } from '@/lib/store';

export const SecurityTab: React.FC = () => {
  return (
    <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-300">
      <section className="relative overflow-hidden rounded-[2rem] border border-white/10 bg-[linear-gradient(145deg,rgba(167,139,250,0.12)_0%,rgba(10,10,14,0.96)_40%,rgba(6,6,8,1)_100%)] p-6">
        <div className="absolute right-0 top-0 h-32 w-32 rounded-full bg-electric-violet/15 blur-3xl" />

        <div className="relative">
          <div className="inline-flex items-center gap-2 rounded-full border border-electric-violet/20 bg-electric-violet/10 px-3 py-1 text-[10px] font-bold uppercase tracking-[0.28em] text-electric-violet">
            <Shield size={12} />
            Security Layer
          </div>

          <h2 className="mt-4 text-3xl font-bold tracking-tight text-white">
            Harden the account surface.
          </h2>
          <p className="mt-3 max-w-2xl text-sm leading-relaxed text-slate-400">
            Review identity protection, recovery posture, and session handling
            before they become problems in production.
          </p>
        </div>
      </section>

      <div className="grid gap-6 xl:grid-cols-3">
        <div className="rounded-[1.75rem] border border-white/10 bg-[#0b0b10]/85 p-5">
          <div className="flex items-start gap-3">
            <div className="rounded-2xl bg-amber-500/10 p-3 text-amber-400">
              <Smartphone size={18} />
            </div>
            <div>
              <div className="text-sm font-semibold text-white">
                Two-factor authentication
              </div>
              <p className="mt-1 text-xs leading-relaxed text-slate-400">
                2FA is currently disabled. Enable a second checkpoint before
                expanding access to more operators.
              </p>
            </div>
          </div>

          <button
            onClick={() =>
              appStore.showToast('2FA setup not implemented yet', 'info')
            }
            className="mt-5 w-full rounded-2xl border border-amber-500/20 bg-amber-500/10 px-4 py-3 text-xs font-bold uppercase tracking-[0.22em] text-amber-300 transition-colors hover:bg-amber-500/15"
          >
            Enable 2FA
          </button>
        </div>

        <div className="rounded-[1.75rem] border border-white/10 bg-[#0b0b10]/85 p-5">
          <div className="flex items-start gap-3">
            <div className="rounded-2xl bg-electric-violet/10 p-3 text-electric-violet">
              <KeyRound size={18} />
            </div>
            <div>
              <div className="text-sm font-semibold text-white">
                Password rotation
              </div>
              <p className="mt-1 text-xs leading-relaxed text-slate-400">
                Keep credential lifetime short and rotate keys before your
                environment becomes sticky.
              </p>
            </div>
          </div>

          <button
            onClick={() =>
              appStore.showToast(
                'Password rotation flow not implemented yet',
                'info'
              )
            }
            className="mt-5 w-full rounded-2xl bg-electric-violet px-4 py-3 text-xs font-bold uppercase tracking-[0.22em] text-white shadow-[0_18px_35px_-20px_rgba(123,63,242,0.8)] transition-colors hover:bg-soft-purple"
          >
            Rotate Password
          </button>
        </div>

        <div className="rounded-[1.75rem] border border-white/10 bg-[#0b0b10]/85 p-5">
          <div className="flex items-start gap-3">
            <div className="rounded-2xl bg-emerald-500/10 p-3 text-emerald-400">
              <RefreshCcw size={18} />
            </div>
            <div>
              <div className="text-sm font-semibold text-white">
                Session review
              </div>
              <p className="mt-1 text-xs leading-relaxed text-slate-400">
                Audit active surfaces and revoke stale sessions when operators
                or devices change.
              </p>
            </div>
          </div>

          <button
            onClick={() =>
              appStore.showToast(
                'Session review not implemented yet',
                'info'
              )
            }
            className="mt-5 w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-xs font-bold uppercase tracking-[0.22em] text-slate-300 transition-colors hover:bg-white/[0.07]"
          >
            Review Sessions
          </button>
        </div>
      </div>

      <section className="rounded-[1.75rem] border border-white/10 bg-[#0b0b10]/85 p-5">
        <div className="flex items-start gap-3">
          <div className="rounded-2xl bg-soft-purple/10 p-3 text-soft-purple">
            <Sparkles size={18} />
          </div>
          <div>
            <div className="text-sm font-semibold text-white">
              Recommended next step
            </div>
            <p className="mt-1 text-sm leading-relaxed text-slate-400">
              Turn on 2FA first. It gives the biggest security gain with the
              least friction for this workspace state.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
};