113 lines
12 KiB
XML
113 lines
12 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="1700" height="2420" viewBox="0 0 1700 2420"><rect width="1700" height="2420" fill="#F7F3EE"/>
|
|
<defs><style>.title{font-family:Arial,sans-serif;font-size:28px;font-weight:700;fill:#2D2520}.label{font-family:Arial,sans-serif;font-size:16px;fill:#2D2520}.small{font-family:Arial,sans-serif;font-size:13px;fill:#4B5563}.box{fill:#fff;stroke:#8B5E3C;stroke-width:2}.data{fill:#EAF4FF;stroke:#2B6CB0;stroke-width:2}.decision{fill:#FFF7D6;stroke:#B7791F;stroke-width:2}.term{fill:#EAF8EF;stroke:#2E7D32;stroke-width:2}.db{fill:#EFF2F5;stroke:#4B5563;stroke-width:2}.mail{fill:#F0FDF4;stroke:#16A34A;stroke-width:2}.err{fill:#FFECEC;stroke:#DC2626;stroke-width:2}.lane{fill:#fff;stroke:#8B5E3C;stroke-width:2}.line{stroke:#4B3A31;stroke-width:2;fill:none}</style><marker id="arrow" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto"><path d="M0,0 L10,4 L0,8 z" fill="#4B3A31"/></marker></defs>
|
|
<text x="850" y="50" text-anchor="middle" class="title">Flowchart Detail Login dan Lupa Password OTP Email</text>
|
|
<ellipse cx="850.0" cy="117.5" rx="90.0" ry="27.5" class="term"/>
|
|
<text x="850.0" y="109.5" text-anchor="middle" class="label">Mulai</text>
|
|
<rect x="755" y="170" width="190" height="55" rx="10" class="box"/>
|
|
<text x="850.0" y="189.5" text-anchor="middle" class="label">Splash Screen</text>
|
|
<polygon points="850.0,260 980,305.0 850.0,350 720,305.0" class="decision"/>
|
|
<text x="850.0" y="297.0" text-anchor="middle" class="label">Apakah sesi login</text><text x="850.0" y="317.0" text-anchor="middle" class="label">masih aktif?</text>
|
|
<ellipse cx="1240.0" cy="307.5" rx="130.0" ry="32.5" class="term"/>
|
|
<text x="1240.0" y="299.5" text-anchor="middle" class="label">Masuk ke</text><text x="1240.0" y="319.5" text-anchor="middle" class="label">Dashboard Utama</text>
|
|
<rect x="725" y="450" width="250" height="65" rx="10" class="box"/>
|
|
<text x="850.0" y="474.5" text-anchor="middle" class="label">Tampilkan</text><text x="850.0" y="494.5" text-anchor="middle" class="label">Halaman Login</text>
|
|
<polygon points="850.0,550 980,592.5 850.0,635 720,592.5" class="decision"/>
|
|
<text x="850.0" y="584.5" text-anchor="middle" class="label">Pilih aksi pada</text><text x="850.0" y="604.5" text-anchor="middle" class="label">halaman login</text>
|
|
<rect x="60" y="705" width="680" height="1125" rx="14" class="lane"/>
|
|
<text x="400" y="740" text-anchor="middle" class="label">Alur Login Normal</text>
|
|
<rect x="820" y="705" width="820" height="1270" rx="14" class="lane"/>
|
|
<text x="1230" y="740" text-anchor="middle" class="label">Alur Lupa Password dengan OTP Email</text>
|
|
<polygon points="270,815 555,815 530,885 245,885" class="data"/>
|
|
<text x="400.0" y="842.0" text-anchor="middle" class="label">Input username/email</text><text x="400.0" y="862.0" text-anchor="middle" class="label">dan password</text>
|
|
<rect x="255" y="930" width="290" height="65" rx="10" class="box"/>
|
|
<text x="400.0" y="954.5" text-anchor="middle" class="label">Kirim data login ke API</text><text x="400.0" y="974.5" text-anchor="middle" class="label">/api/login</text>
|
|
<rect x="260" y="1040" width="280" height="65" rx="24" class="db"/>
|
|
<text x="400.0" y="1064.5" text-anchor="middle" class="label">Validasi akun pada</text><text x="400.0" y="1084.5" text-anchor="middle" class="label">tabel login</text>
|
|
<polygon points="400.0,1160 530,1205.0 400.0,1250 270,1205.0" class="decision"/>
|
|
<text x="400.0" y="1197.0" text-anchor="middle" class="label">Apakah data</text><text x="400.0" y="1217.0" text-anchor="middle" class="label">login valid?</text>
|
|
<ellipse cx="400.0" cy="1350.0" rx="150.0" ry="40.0" class="term"/>
|
|
<text x="400.0" y="1342.0" text-anchor="middle" class="label">Login berhasil,</text><text x="400.0" y="1362.0" text-anchor="middle" class="label">masuk dashboard</text>
|
|
<rect x="105" y="1435" width="270" height="65" rx="10" class="err"/>
|
|
<text x="240.0" y="1459.5" text-anchor="middle" class="label">Tampilkan pesan</text><text x="240.0" y="1479.5" text-anchor="middle" class="label">login gagal</text>
|
|
<rect x="105" y="1545" width="270" height="65" rx="10" class="box"/>
|
|
<text x="240.0" y="1569.5" text-anchor="middle" class="label">Ulangi input username/email</text><text x="240.0" y="1589.5" text-anchor="middle" class="label">dan password</text>
|
|
<polygon points="1100,815 1385,815 1360,885 1075,885" class="data"/>
|
|
<text x="1230.0" y="842.0" text-anchor="middle" class="label">Input username/email</text><text x="1230.0" y="862.0" text-anchor="middle" class="label">akun</text>
|
|
<rect x="1045" y="930" width="370" height="70" rx="10" class="box"/>
|
|
<text x="1230.0" y="957.0" text-anchor="middle" class="label">Request OTP ke API</text><text x="1230.0" y="977.0" text-anchor="middle" class="label">/api/forgot-password/send-otp</text>
|
|
<rect x="1090" y="1045" width="280" height="65" rx="24" class="db"/>
|
|
<text x="1230.0" y="1069.5" text-anchor="middle" class="label">Cek akun pada</text><text x="1230.0" y="1089.5" text-anchor="middle" class="label">tabel login</text>
|
|
<polygon points="1230.0,1160 1390,1205.0 1230.0,1250 1070,1205.0" class="decision"/>
|
|
<text x="1230.0" y="1197.0" text-anchor="middle" class="label">Apakah email/username</text><text x="1230.0" y="1217.0" text-anchor="middle" class="label">terdaftar?</text>
|
|
<rect x="1390" y="1170" width="300" height="65" rx="10" class="err"/>
|
|
<text x="1540.0" y="1194.5" text-anchor="middle" class="label">Tampilkan pesan akun</text><text x="1540.0" y="1214.5" text-anchor="middle" class="label">tidak ditemukan</text>
|
|
<rect x="1390" y="1270" width="300" height="65" rx="10" class="box"/>
|
|
<text x="1540.0" y="1294.5" text-anchor="middle" class="label">Ulangi input username/email</text><text x="1540.0" y="1314.5" text-anchor="middle" class="label">yang terdaftar</text>
|
|
<rect x="1050" y="1305" width="360" height="70" rx="10" class="box"/>
|
|
<text x="1230.0" y="1332.0" text-anchor="middle" class="label">Generate kode OTP 6 digit</text><text x="1230.0" y="1352.0" text-anchor="middle" class="label">masa berlaku 10 menit</text>
|
|
<rect x="1050" y="1415" width="360" height="70" rx="24" class="db"/>
|
|
<text x="1230.0" y="1442.0" text-anchor="middle" class="label">Simpan OTP ke tabel</text><text x="1230.0" y="1462.0" text-anchor="middle" class="label">password_reset_otps</text>
|
|
<rect x="1050" y="1525" width="360" height="70" rx="10" class="mail"/>
|
|
<text x="1230.0" y="1552.0" text-anchor="middle" class="label">Kirim OTP ke email pengguna</text><text x="1230.0" y="1572.0" text-anchor="middle" class="label">melalui SMTP</text>
|
|
<polygon points="1100,1635 1385,1635 1360,1705 1075,1705" class="data"/>
|
|
<text x="1230.0" y="1662.0" text-anchor="middle" class="label">Input kode OTP</text><text x="1230.0" y="1682.0" text-anchor="middle" class="label">dari email</text>
|
|
<rect x="1045" y="1745" width="370" height="70" rx="10" class="box"/>
|
|
<text x="1230.0" y="1772.0" text-anchor="middle" class="label">Verifikasi OTP ke API</text><text x="1230.0" y="1792.0" text-anchor="middle" class="label">/api/forgot-password/verify-otp</text>
|
|
<rect x="1045" y="1855" width="370" height="70" rx="24" class="db"/>
|
|
<text x="1230.0" y="1882.0" text-anchor="middle" class="label">Cek OTP: sesuai, belum dipakai,</text><text x="1230.0" y="1902.0" text-anchor="middle" class="label">dan belum kedaluwarsa</text>
|
|
<polygon points="1230.0,1960 1360,2005.0 1230.0,2050 1100,2005.0" class="decision"/>
|
|
<text x="1230.0" y="1997.0" text-anchor="middle" class="label">Apakah OTP</text><text x="1230.0" y="2017.0" text-anchor="middle" class="label">valid?</text>
|
|
<rect x="1390" y="1975" width="300" height="65" rx="10" class="err"/>
|
|
<text x="1540.0" y="1999.5" text-anchor="middle" class="label">Tampilkan pesan OTP</text><text x="1540.0" y="2019.5" text-anchor="middle" class="label">salah/kedaluwarsa</text>
|
|
<rect x="1390" y="2075" width="300" height="65" rx="10" class="box"/>
|
|
<text x="1540.0" y="2099.5" text-anchor="middle" class="label">Ulangi input OTP</text><text x="1540.0" y="2119.5" text-anchor="middle" class="label">atau kirim OTP baru</text>
|
|
<polygon points="685,2075 960,2075 935,2145 660,2145" class="data"/>
|
|
<text x="810.0" y="2102.0" text-anchor="middle" class="label">Input password</text><text x="810.0" y="2122.0" text-anchor="middle" class="label">baru</text>
|
|
<rect x="660" y="2185" width="380" height="70" rx="10" class="box"/>
|
|
<text x="850.0" y="2212.0" text-anchor="middle" class="label">Request reset password ke API</text><text x="850.0" y="2232.0" text-anchor="middle" class="label">/api/forgot-password/reset</text>
|
|
<rect x="1080" y="2185" width="390" height="70" rx="24" class="db"/>
|
|
<text x="1275.0" y="2212.0" text-anchor="middle" class="label">Update password tabel login</text><text x="1275.0" y="2232.0" text-anchor="middle" class="label">dan tandai OTP digunakan</text>
|
|
<ellipse cx="1275.0" cy="2335.0" rx="155.0" ry="35.0" class="term"/>
|
|
<text x="1275.0" y="2327.0" text-anchor="middle" class="label">Reset berhasil,</text><text x="1275.0" y="2347.0" text-anchor="middle" class="label">kembali ke halaman login</text>
|
|
<path d="M850.0,145 L850.0,170" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M850.0,225 L850.0,260" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M850.0,515 L850.0,550" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M400.0,885 L400.0,930" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M400.0,995 L400.0,1040" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M400.0,1105 L400.0,1160" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M240.0,1500 L240.0,1545" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M1230.0,885 L1230.0,930" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M1230.0,1000 L1230.0,1045" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M1230.0,1110 L1230.0,1160" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M1540.0,1235 L1540.0,1270" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M1230.0,1375 L1230.0,1415" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M1230.0,1485 L1230.0,1525" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M1230.0,1595 L1230.0,1635" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M1230.0,1705 L1230.0,1745" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M1230.0,1815 L1230.0,1855" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M1230.0,1925 L1230.0,1960" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M1540.0,2040 L1540.0,2075" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M810.0,2145 L850.0,2185" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M1275.0,2255 L1275.0,2300" class="line" marker-end="url(#arrow)"/>
|
|
<path d="M980,305.0 L1110,307" class="line" marker-end="url(#arrow)"/>
|
|
<text x="1050" y="296" text-anchor="middle" class="small">Ya</text>
|
|
<path d="M850.0,350 L850,450" class="line" marker-end="url(#arrow)"/>
|
|
<text x="878" y="405" text-anchor="middle" class="small">Tidak</text>
|
|
<path d="M720,592.5 L400,592 L400,815" class="line" marker-end="url(#arrow)"/>
|
|
<text x="550" y="590" text-anchor="middle" class="small">Login</text>
|
|
<path d="M980,592.5 L1230,592 L1230,815" class="line" marker-end="url(#arrow)"/>
|
|
<text x="1080" y="590" text-anchor="middle" class="small">Lupa password</text>
|
|
<path d="M400.0,1250 L400,1310" class="line" marker-end="url(#arrow)"/>
|
|
<text x="430" y="1290" text-anchor="middle" class="small">Ya</text>
|
|
<path d="M270,1205.0 L190,1205 L190,1468 L375,1468" class="line" marker-end="url(#arrow)"/>
|
|
<text x="220" y="1218" text-anchor="middle" class="small">Tidak</text>
|
|
<path d="M1230.0,1250 L1230,1305" class="line" marker-end="url(#arrow)"/>
|
|
<text x="1258" y="1285" text-anchor="middle" class="small">Ya</text>
|
|
<path d="M1390,1205.0 L1390,1202" class="line" marker-end="url(#arrow)"/>
|
|
<text x="1408" y="1188" text-anchor="middle" class="small">Tidak</text>
|
|
<path d="M1100,2005.0 L810,2005 L810,2075 L960,2110" class="line" marker-end="url(#arrow)"/>
|
|
<text x="1005" y="1995" text-anchor="middle" class="small">Ya</text>
|
|
<path d="M1360,2005.0 L1390,2007" class="line" marker-end="url(#arrow)"/>
|
|
<text x="1375" y="1992" text-anchor="middle" class="small">Tidak</text>
|
|
<path d="M1040,2220.0 L1080,2220" class="line" marker-end="url(#arrow)"/>
|
|
</svg> |